Figmage

Figmage is a small CLI that reads your published Figma library through the Figma REST API and generates design tokens as code — colors, typography, shadows, spacing, icons, and more. One config file, one command, and your design decisions land in your codebase as typed, ready-to-import values.

Get Started

Why Figmage

Pick your path

🧑‍💻 I run Figmage in code Install the CLI, set up auth, write figmage.config.js, and run figmage sync. Start with the developer Quickstart.

🎨 I design the Figma library No code required. Learn how to publish, name, and structure styles and components so Figmage can read them cleanly.

What Figmage generates

🎨 Colors Color tokens from your Figma color styles, in hex, rgb, hsl, and more.

🔤 Typography Full text tokens — family, size, weight, line height, and spacing — from text styles.

🌑 Shadows Drop-shadow tokens extracted from your effect styles, ready for elevation systems.

📏 Spacing & sizing Measured scales for spacing, sizing, and radii, derived straight from your components.

🖼️ Icons & images Export components as individual SVGs, a single SVG sprite, or raster assets.

🛡️ Type-safe output Generate typed ts, js, or json token files, plus svg output for vector image assets.

How it works

1 🎨 Designerpublishes library

2 🔌 Figma REST API

3 ⚙️ Figmage sync

4 📦 Design tokens in code

5 🚀 Up-to-date app

A designer publishes the library, Figmage reads it through the API, and figmage sync writes fresh token files into your repo. Re-run it whenever the design system changes — your code stays in step with Figma.

Ready to dive in?

New to Figmage?

Start with the Introduction to understand what Figmage is and which track fits you, then jump into your audience’s guide.

Want the benefits first?

Read Why Figmage for how it bridges design and development and keeps a design system honest.