Open source · MIT licensed

From Figmato codeAutomatically

Point it at your Figma file and get fully typed, props-driven React components with your own design tokens, visual review, and accessibility auditing.

Get started View on GitHub

terminal

$ /extractify-setup

Reading _docs/figma-paths.yaml...

✓ Colors — your palette → --color-* variables

✓ Typography — font families + text scale utilities

✓ Grid — breakpoints + container → CSS layout tokens

✓ Icons — your icon set → public/svg/ux/

✓ Buttons — variants → .button-* classes

✓ Forms — inputs, selects → form components

Your design system is now in code.

Scroll to learn more

What is it

Your Figma → Code pipeline

Figma Extractify is a set of Claude Code commands you drop into your project. Point it at any Figma file and extract your design tokens, build components with automated visual review, and link everything back to Figma Dev Mode.

Design Tokens

Extracts your colors, spacing, and variables straight from Figma into CSS custom properties.

Typography System

Pulls your font families, sizes, weights, and line heights into a scalable type scale.

Component Builder

Run a single command and get a fully typed, props-driven React component from any Figma frame.

Visual Review

Playwright screenshots your component and pixel-diffs it against the Figma design. 95%+ to pass.

Accessibility Audit

axe-core scans every component for WCAG violations. Zero critical issues allowed.

Code Connect

Links finished components back to their Figma node so your team sees real code in Dev Mode.

Works with

Claude Code

Cursor

Windsurf

GitHub Copilot

See it in action

Watch the walkthrough

From Figma file to production-ready components in minutes.

Get started

Up and running in 5 steps

Clone, install, paste your Figma URLs, and start extracting.

Clone the repo

git clone https://github.com/99x/figma-extractify.git

Open the boilerplate

cd figma-extractify/boilerplate

Copy extractify into the project

cp -r ../figma-extractify .

Run the installer

bash figma-extractify/install.sh

Add your Figma URLs and start

/extractify-setup

Existing project? Just copy the figma-extractify/ folder into your project root and run bash figma-extractify/install.sh. It copies everything it needs without touching your source code.

Open source

Built by the community

Figma Extractify is MIT licensed and open to contributions. Jump in.