For this task, I used the Codex Figma Kit and the design token file on Figma to recreate the InfoChip component in Penpot.
This is the InfoChip component on Figma
Then it was updated to this:
Link to my tutorial:
https://udokaineh.wordpress.com/2024/10/10/udoka-marymagdalene-ineh/
Received Feedback
Following @cmadeo feedback, I converted the elements from groups to components.
Additional Components
As stated in the project description, the goal is to create as many components and component libraries from Codex in Penpot using the Codex Figma libraries as a guide.
After creating the InfoChip component, I proceeded to create additional components, including:
Component #1 Accordion
Component #2 Button
Component #3 ButtonGroup
Component #4 Checkbox
Component #5 ChipInput
Component #6 Field
Component #7 Label
Component #8 Link
Component #9 MenuButton
Component #10 Message
Component #11 Radio
Notable Differences
Additionally, the project description states, "Please be sure to share any insights you had from the transfer process (notable differences between Penpot and Figma, tips and tricks you learned, approaches you tried, etc.)."
Penpot is a great open-source tool that is easy to learn. The transition from Figma to Penpot comes with a relatively short learning curve, as Penpot was designed with ease of use in mind. The new Penpot Update now allows Plugins, this is awesome. However, during the transfer process, I noticed some notable differences between Penpot and Figma:
1. Component Behaviour: In Penpot, when you convert a frame into a component, any existing components inside the frame become instances (copies), rather than retaining their status as main components. This differs from Figma, where nested components maintain their original component roles.
2. Border Customisation: Penpot does not offer a built-in option for applying borders to specific sides. To achieve a similar effect, I used rectangles and the path tool as a workaround.
3. Renaming Elements: In Penpot, renaming an element requires double-clicking the item's name in the layers panel. There isn’t a dedicated "Rename" option available in the right-click context menu, as seen in Figma.
4. Layer Name Preview: Hovering over a named layer or object does not automatically display a preview of the name in Penpot. In Figma, being able to quickly see the name of an item by hovering over it enhances the user experience and boosts productivity.
Thank you @cmadeo and @mwilliams This contribution period has been a valuable learning experience for me and I have learnt so much.