Figma to Code

Paste a Figma URL, receive pixel-accurate component code.

Install →

Trusted trust tier

This skill has meaningful adoption or reputation signals, but still deserves a quick review.

What is Figma to Code?

figma-to-code reads a Figma frame or component via the Figma API and emits clean React (with or without Tailwind), plain HTML/CSS, or Vue code. It infers spacing tokens, typography scales, and colour variables from your design file — producing code that matches your design system.

At a glance

  • 1,650 installs reported by the source registry
Installs1,650

How to install

1
Make sure you have Claude Code installed. Run claude in your terminal — if it opens, you're ready.
2
Open the source page for this tool and follow the install instructions in its README.
3
After installing, type / inside Claude Code to see your installed skills and invoke them by name.
Go to install page →