Figma to Code Skills - The properly way to ship Figma design systems as React
The Figma-to-code handoff is where design quality disappears.
The solution: ten Claude Code skills that turn a Figma design system into a production React + Tailwind repo with typed props, accessibility, and tokens. Tested on a live fintech build.
Replies
Hey all, Piotr from Properly Studio here.
For the last month I've been quietly building these in the margins of client work, trying to crack a problem every agency knows: the design-to-code handoff is where about 20% of the design quietly disappears.
The skills take a Figma design system and turn it into a production React + Tailwind repo, with typed props, accessibility, semantic tokens, and a claude.md any future AI agent can read. First real test was on Eterna, one of our fintech clients - the Figma file became a working React repo in a single afternoon.
Full write-up is on the blog: https://www.properly.studio/blog/how-we-ship-figma-to-production-react-with-claude-code
MIT licensed and on GitHub. Would love feedback, contributions, or just to hear what you'd point it at. Around all day to answer questions.
Skills Janitor
@piotr_krezelewski you're cooking!
Mailwarm
Congrats on your launch!!
Skills Janitor
@naimz all credits to @piotr_krezelewski! :)
Mailwarm
Congrats on your launch!!
Skills Janitor
@daniel_nwankwo thx