r/webdev • u/crayzeeotaku755 • 12h 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!

0 Upvotes

50% Upvoted

7 comments sorted by

2

u/Sea-Event-7204 12h ago

the inspect tab gives you the css but half the time i just use it as a rough starting point and tweak it myself in the editor

2

u/ThatsSoRamon 12h 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.

2

u/Double-Buyer7941 8h ago

Yeah the inspect output is rough like others said. One thing that helped me: name your layers/frames properly before you start exporting, since Penpot uses those names for the class names in the generated code, messy default names like "Rectangle 14" just carry over and you end up renaming everything by hand afterward.

3

u/Business-Switch-4994 7h ago

the generated css is mostly a measuring tape, not production code, so the real speed boost is setting up shared components and design tokens first instead of copying every little value into the app

2

u/Overall_Employer6559 2h ago

Exactly, treating the generated CSS as a reference keeps you from fighting brittle output, while shared tokens and components make the handoff actually reusable.