Talk in plain English. Watch Figma build.
You describe what you want, an AI assistant builds it live in your Figma Desktop.
No API key. No copy-paste. No plugin to babysit. No code to write.

figma-ds-cli lets an AI assistant build directly in your Figma Desktop, while you talk to it in normal language.

You don't run commands or write code. You open Claude in this project and say things like:

"Create three pricing cards." "Use my brand's design system." "Make those buttons look like Stripe." "Check the contrast on this screen."

Claude does the rest. Figma updates in real time, in front of you.

It works with real, editable Figma , actual frames, components, variants and variables , not a flat image. And it runs locally: no API key, nothing sent to a cloud service.

You don't install this by hand. You use an AI coding assistant , Claude Code (recommended, what most people use) or Cursor , point it at this project, and ask it to set everything up.

Using Cursor? Jump to Using Cursor for the one-line setup. The steps below are for Claude Code; everything the CLI does is identical in both.

• Figma Desktop , installed and open (download).
• Claude Code , Anthropic's AI assistant for your computer. Install it here (one command, takes a minute). (Or use Cursor , see below.)

Don't know git? No problem. Open Claude Code anywhere and paste:

"Download the figma-cli project from https://github.com/silships/figma-cli into a folder in my home directory, then go into it."

(Or, if you prefer: click the green Code button on the GitHub page → Download ZIP → unzip it.)

Open Claude Code inside the project folder and say:

"Set up figma-cli and connect it to my Figma."

Claude reads the project's instructions, installs what's needed, and connects to your open Figma Desktop. You watch , you don't type commands.

When it says it's connected, you're done. ✅

Now describe what you want:

"Add my brand colors, then create a primary button and a secondary button."

Claude builds it in Figma instantly.

Prefer Cursor? It works exactly the same , the CLI controls Figma Desktop, not your editor, so nothing about it is Claude-only. Most people use Claude Code, but if Cursor is your tool, here's the whole setup.

• Figma Desktop , installed and open (download).
• Cursor , download here.

Open Cursor in any folder, open the chat (the Agent), and paste:

"Install github.com/silships/figma-cli and connect it to my Figma."

Cursor downloads the project, installs it, sets up its own rules so it knows how to drive it, and connects to your open Figma Desktop. You watch , you don't type commands.

Under the hood Cursor runs one extra command for itself , figma-cli init-agent , which drops a small .cursor/rules/figma-cli.mdc into your project. That's the file that teaches Cursor's Agent the rules (use real variables, wrap text properly, build N items as N components, etc.). You never edit it.

When it says it's connected, you're done. ✅

Same as Claude Code , describe what you want:

"Add my brand colors, then create a primary button and a secondary button."

Cursor builds it in Figma instantly.

Already set up in a project and just want the Cursor rules? Run figma-cli init-agent yourself , it writes the Cursor rules and an AGENTS.md (which Claude Code and Cursor both read), without touching any existing CLAUDE.md.

figma-ds-cli talks to your Figma Desktop in one of two ways. Claude picks one during setup , here's what they mean, so you know what's happening:

• Fully automatic. Claude sets it up, you do nothing.
• It applies a small, reversible patch to the Figma Desktop app so the CLI can talk to it directly. That's what makes it fast and completely hands-off , no plugin to keep open, no clicking.
• "Yolo" sounds scary, but it's safe and undoable , Claude can un-patch it anytime, and nothing ever leaves your machine.
• Just tell Claude "connect to Figma" and you're done.

• Doesn't touch the Figma app at all. Instead it uses a tiny built-in Figma plugin.
• You run it once from Figma's Plugins → Development → FigCli and keep that plugin open while you work.
• A little more manual (you start the plugin), but zero modifications to Figma itself , good if you, or your company's IT policy, don't want the app patched.
• Tell Claude "connect to Figma in safe mode".

Both do exactly the same things. Unsure? Use Yolo. Want nothing changed on your Figma app? Use Safe. You can switch anytime , just ask Claude.

Just say it in plain language. A few examples:

Build things

• "Create 5 pricing cards in a row."
• "Make a login form."
• "Build a dashboard layout."
• "Add a dialog / a calendar / a sidebar." (40+ shadcn/ui components available)

Use a design system

• "Add shadcn colors" or "add Tailwind colors."
• "Make these in Stripe's style" / "use the Linear design system."
• "Use my brand's variables on these cards."

Bring your own brand

• "Import this design system" (point it at a DESIGN.md file , see below)
• "Switch this design from Stripe to Apple." (swap a whole layout between brands)
• "Export this file's design system as markdown." (any open file → DESIGN.md , see below)

Polish & hand off

• "Check the color contrast / touch targets / text sizes."
• "Export this as PNG / SVG."
• "Turn this into a reusable component with Small / Medium / Large variants."

You never memorize commands. Claude knows them , you just describe the outcome.

Have a brand or a design system? Put it in a single DESIGN.md file (colors, type, spacing) and tell Claude:

"Import ~/Downloads/my-DESIGN.md into Figma."

It creates real Figma variables (primary, canvas, ink, accent, …) you can use everywhere , and you can switch a design between systems on demand ("now make it look like Vercel"). Ready-made DESIGN.md files for popular brands work too.

DESIGN.md is no longer the only way in. You can point figma-cli import directly at the source files your project already has:

• Tailwind config (tailwind.config.js) , colors, radii, spacing and font families land as Figma variables.
• CSS custom properties (globals.css, styles.css) , supports shadcn HSL triples, Tailwind v4 @theme blocks and oklch.
• Design-tokens JSON (tokens.json) , W3C design-tokens format and Style Dictionary files, including alias resolution.
• Storybook (http://localhost:6006 or ./storybook-static/) , imports your component inventory (names, variants) as context for the AI. Combine with a Tailwind or CSS import to get design tokens too.

Ask Claude: "Import my tailwind config" or "load our storybook at localhost:6006" and it handles the rest.

The reverse also works. Open any Figma file , yours, a client's, a Community file like GitHub's Primer , and say:

"Export the design system as markdown."

figma-ds-cli scans every page (no truncation, even on 100k+ node files) and writes a DESIGN.md with the full token map: colors ranked by usage, the type scale, spacing, radii, shadows, plus a variant matrix for every component set (e.g. Button: variant × size × state, with all values). The file round-trips , figma-cli import reads it back into variables in any other file.

What it's for:

• Feed your design system to AI tools , Claude, Cursor, Copilot read DESIGN.md and build UI that actually matches your Figma file
• Document a design system , one command instead of hand-written token tables
• Transfer tokens between files , extract from file A, import into file B
• Learn from Community files , extract Primer, Material or any public system and see exactly how it's built

Huge files stay usable: when the structure trees alone would blow an AI context window, they're split into per-page files automatically and the main DESIGN.md stays small enough to load whole (Primer Web: 67 pages, 124k nodes → a 35k-token main file).

Prefer to keep everything on your machine? figma-ds-cli also works with local LLMs (via LM Studio or Ollama) , fully offline, no cloud, no key. Ask Claude to "set up the local LLM agent" and it'll walk you through it.

40+ ready components · 30+ capabilities · 8 areas. You trigger any of these just by asking.

🧩 Components (40+ components + 3 tools)

• 40+ shadcn/ui components (buttons, cards, inputs, dialogs, tabs, calendar, sidebar, …) with real Lucide icons
• Turn anything into a reusable component with variants (Size, State, …)
• Build slots for flexible, composable components
• Combine existing frames into a variant set

🎨 Design systems & tokens (4)

• One-command presets: shadcn (Light/Dark) and Tailwind color scales
• Import your own brand from a DESIGN.md , colors, typography, radius become real Figma variables
• Switch a design between brands (Stripe → Apple → your brand) , token names stay consistent
• Visualize a whole palette on the canvas

🖼️ Visuals & effects (5)

• Drop shadows, inner shadows, layer & background blur, glassmorphism
• Linear, radial, angular & diamond gradients
• Extract a gradient from any image , get a Figma-ready fill or a mesh wallpaper
• Generate mesh-gradient wallpapers from a color palette
• Image fills from any URL, corner smoothing (iOS squircles), rotation, blend modes

📐 Layout & structure (4)

• Real auto-layout (flex rows/columns, fill/hug, gaps, alignment)
• Pre-built blocks (full dashboards, page layouts) in one step
• Precise absolute positioning (pin to corners, center, stretch)
• Sections and layout grids to organize the canvas

♿ Accessibility (4)

• Contrast checking (WCAG)
• Touch-target sizing, text-size checks
• Color-blindness simulation
• One-shot full a11y audit

📦 Handoff & export (4)

• Export PNG, SVG, JSX, Storybook stories, CSS variables, Tailwind config
• Link components to Storybook / GitHub / docs
• Inline annotations for usage rules and token references
• Recreate a live webpage in Figma from a URL

🤖 Built for AI (6)

• Works with Claude Code or Cursor , one figma-cli init-agent sets up the rules for both
• Works with Claude, or local LLMs via LM Studio / Ollama (fully offline)
• Ships the entire Figma Plugin API spec offline so the AI can self-discover
• Self-corrects when a command needs a different approach
• Screenshot-based verification (verify --measure) so the AI checks its own work by numbers
• Enforces a DESIGN.md spec when recreating components (spec --check) , no eyeballing
• Optional voice control (macOS): "create three pricing cards" out loud

🔒 No strings (2)

• No API key, no cloud roundtrip, no plugin store waits
• Talks to Figma Desktop directly , real, editable Figma every time

Everything above is powered by a CLI that the AI calls for you. If you want to use it directly, script it, or see every command:

• REFERENCE.md , full command reference (tokens, render/JSX, components, gradients, a11y, export, the offline Figma API spec, and more).
• Two connection modes: Yolo (direct, recommended) and Safe (plugin-based, no patching). Claude picks the right one during setup.

You don't need any of this to use the tool , it's here for tinkerers.

Figma plugins are slow to build and tied to one UI. AI assistants are great at describing intent but need a clean way to act on Figma. figma-ds-cli is the bridge: it talks to Figma Desktop directly, so you can design by conversation , locally, with no API key and no cloud roundtrip.

You design. The AI builds. Figma updates.

MIT. Built by Sil Bormüller.