Resubmitting this because updates were made to the task document.
Project experience tutorial
https://youtu.be/xOwpBHXrK50
Description
Description
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | • debt | T372834 Coordinate Wikimedia's participation in Outreachy Round 29 | |||
| Resolved | FatumaA-HijabiCoder | T374275 Outreachy Round 29: Creation of Codex (Wikimedia design system) components + libraries in Penpot (from Figma) | |||
| Resolved | FlorenceAhorlu | T376591 Task submission by Ahorlu Florence |
Event Timeline
Comment Actions
Thank you @FlorenceAhorlu for your thoughtful project submission. Thank you for recording a video of your tutorial, it was helpful to see how you navigated adding libraries to your file, but I am curious if you could show more about the full process you used to recreate the component in Penpot? As the goal of this tutorial would be to teach another person how to recreate the infochip component in Penpot from Figma / documentation on Codex.
Looking at your Penpot file it also looks like some of your padding might be a bit different from the Figma component (ex. 1px extra padding below the icon), could you share a bit more about how you figured out padding for the different elements? Additionally, it'd be great to know why you chose to use Bootstrap icons vs. the Codex icons.
You may receive additional feedback from other mentors in the next few days, but I wanted to reach out with this initial round of feedback now. Thank you so much for the time and care you put into this project.
Comment Actions
Thank you for the feedback.
Initially, I had difficulties copying and using the Codex icons in Penpot, so I watched some tutorials and realised I could find similar icons in the icon packages Penpot provides, so I used that instead. I believe this affected the padding around the icons, since I wasnt using the original icons. And also how I achieved that padding;
I copied the component from codex into a personal figma file
Noted the horizontal gap padding, horizontal padding and vertical paddings for each layout
And applied them in Pepnot. Padding variations would be as a result of the icon choice used.
With regards to the video, If you dont mind, I would happily recreate it with indept details of how I achieved the design component in Penpot.
Comment Actions
@cmadeo I remade the youtube tutorial. More detailed now.
Do I submit the link in the comment section or add it as a subtask?
Comment Actions
Thank you for your task. An intern has been selected for this project, so I am closing this ticket as 'resolved' as the application period has concluded.