The Wikimedia Design Systems team has developed a comprehensive set of assets for Codex, the Wikimedia design system, using Figma. This project aims to transfer these assets into Penpot, an open-source design tool, to facilitate collaboration with open-source contributors. The goal is to recreate components from the Codex Figma Kit in Penpot, ensuring they are as closely matched as possible while considering Penpot's current limitations, such as the lack of variable support.
For this microtask, I useed the Codex Figma Kit and the design tokens file on Figma to recreate the InfoChip component in Penpot. I carefully designed each version of the InfoChip (Success, Warning, Error, Notice). They are individually represented in my Penpot file. This process included carefully replicating dimensions, colors, typography, and layout from the original Figma file, including versions for both light and dark modes.
Documentation: I documented the entire process in detail, which can be viewed here: https://peaceobienyi.wordpress.com/2024/10/05/designing-the-info-chip-in-penpot-a-step-by-step-guide/
Video Tutorial: A video walkthrough of the task can be found here: https://www.youtube.com/watch?v=pLfSN4qKHGg
The Penpot file has been exported and is available for review.
File name: InfoChip_PeaceObienyi.penpot
