Really nice work @Mariam, I found your tutorial / documentation on Medium to be really thorough. I especially liked how you described challenges, like these ones:

Challenge: Another challenge I faced here was Penpot’s interpretation of Figma’s padding specs, which caused three InfoChip components to have inconsistent widths. I couldn’t adjust the widths without affecting spacing, so I prioritized spacing for the tutorial, resulting in a minor 1px width difference. This highlights Penpot’s slight variations in layout handling.

Challenge: Penpot and Figma interpret dimensions differently. For instance, when I input 22px for the line height on Penpot, it didn’t match Figma so a Tip is to: Divide your line height value by the text size (22/14 = 1.57) and use this value in Penpot to ensure the text line height matches what’s in Figma.

Your Penpot file looked good, utilizing Flex Layout and creating Penpot components. Visually, InfoChips appeared very close to the Figma file, just with that 1px discrepancy.

I did prefer your Medium documentation to the video - as I couldn't quite hear you over the music at some points but that is a minor piece of feedback :)

In T376900#10261039, @mwilliams wrote:

Really nice work @Mariam, I found your tutorial / documentation on Medium to be really thorough. I especially liked how you described challenges, like these ones:

Challenge: Another challenge I faced here was Penpot’s interpretation of Figma’s padding specs, which caused three InfoChip components to have inconsistent widths. I couldn’t adjust the widths without affecting spacing, so I prioritized spacing for the tutorial, resulting in a minor 1px width difference. This highlights Penpot’s slight variations in layout handling.

Challenge: Penpot and Figma interpret dimensions differently. For instance, when I input 22px for the line height on Penpot, it didn’t match Figma so a Tip is to: Divide your line height value by the text size (22/14 = 1.57) and use this value in Penpot to ensure the text line height matches what’s in Figma.

Your Penpot file looked good, utilizing Flex Layout and creating Penpot components. Visually, InfoChips appeared very close to the Figma file, just with that 1px discrepancy.

I did prefer your Medium documentation to the video - as I couldn't quite hear you over the music at some points but that is a minor piece of feedback :)

@mwilliams Thank you so much, I’m glad you found the documentation thorough, and I appreciate the feedback. I will make corrections to the video. Yh, Penpot challenges were definitely tricky, I'm glad I did both medium and video tutorial. Thanks again for the thoughtful review. Is it okay to tag you once I make correction to the video tutorial?
Also, is there anything I can do about the 1px disrepancy?

Hi @mwilliams and @cmadeo,

I've made improvements to the video tutorial based on feedback. The background music volume has been reduced to ensure clarity, making it easier for viewers to hear me. Additionally, I reviewed the feedback provided to other contributors and applied the necessary updates on Penpot, specifically the dark mode colour adjustments, as there was an update to the codex InfoChip component on Figma.

Here's the updated Penpot file

Here’s the link to the corrected video tutorial: name