Page MenuHomePhabricator
Create Task
Maniphest T377270

Creation of codex components in Penpot from Figma
Closed, ResolvedPublic
Actions

Description

To complete this microtask, I meticulously recreated the InfoChip component in Penpot adhering closely to the design specifications outlined in the Codex Figma kit and its associated design token. Each variant was meticulously designed to match the original Figma files, dimensions, colors, typography, and layout, ensuring compatibility with both light and dark mode.

I provided a comprehensive documentation of the entire process.

https://zainabonanuga.hashnode.dev/a-step-by-step-guide-to-building-the-wikimedia-infochip-in-penpot

InfoChip_Onanuga Zainab.penpot93 KBDownload

My penpot file

Received feedback

Following @cmadeo feedback, I converted my default and dark states into component and named them.

InfoChip_Onanuga Zainab 2.penpot102 KBDownload

Related Objects
Search...

Event Timeline

Yasmeen0525 created this task.Oct 15 2024, 9:19 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 15 2024, 9:19 PM
cmadeo added a comment.Oct 25 2024, 4:39 PM

Thank you @Yasmeen0525 for your detailed and helpful tutorial and your penpot file. The InfoChip in the penpot file look good, but I'm curious why you chose to utilize the boards as a part of the component? It could also be helpful to name each component and to utilize variants vs. components for the two different reading themes (default and dark). Thank you for your hard work!

Yasmeen0525 added a comment.Oct 26 2024, 9:18 AM

Thank you for the valuable feedback, Ma. I decided to use boards for the chips, because this approach offered a well-defined structure. Additionally I have created a reusable component for the dark and default states and named each component @cmadeo

Yasmeen0525 added a comment.Oct 26 2024, 9:21 AM

InfoChip_Onanuga Zainab 2.penpot102 KBDownload

Yasmeen0525 added a comment.Oct 26 2024, 9:38 AM

@cmadeo, I am having difficulty updating my new penpot file, do I need to create a new subtask?

Aklapper mentioned this in T378256: Received feedback.Oct 26 2024, 1:28 PM
Aklapper merged a task: T378256: Received feedback.
Yasmeen0525 updated the task description. (Show Details)Oct 26 2024, 2:10 PM
cmadeo closed this task as Resolved.Dec 17 2024, 8:25 PM

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.

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits