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.

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.

Figma to Code Skills - The properly way to ship Figma design systems as React

Replies