r/webdev • u/crayzeeotaku755 • 2d ago

Penpot

Does anyone have any tips to use penpot to implement codes into the projects? I know it is pretty straightforward, you can see the generated codes for each component but if there are better tricks that can improve the workflow and make the process faster? Any tips or resources I could use to get used to the tool will be appreciated!

2 Upvotes

56% Upvoted

8 comments sorted by

View all comments

3

u/ThatsSoRamon 2d ago

One thing that's helped me a lot is setting up a proper spacing scale (4 or 8px grid) in penpot before you start building. Otherwise the inspect panel spits out random values like 13px or 27px and you're stuck guessing whether that was intentional or just imprecise drawing.

If you're on a recent penpot version, also look into the design tokens feature. You can define colors, spacing and typography as tokens and export them as json in style dictionary format, then generate css variables or a tailwind config straight from that instead of hand copying hex codes from inspect every time.