dannote/figma-use

> **⚠️ Figma 126+ blocks remote debugging.** figma-use still works via figma-use daemon start --pipe. Or skip Figma entirely with **OpenPencil** — an open-source design editor that reads and writes .fig files, with built-in AI and P2P collaboration.
CLI for Figma. Control it from the terminal — with commands or JSX.
Why
Figma's official MCP plugin can read files but can't modify them. This one can.
LLMs know CLI. LLMs know React. This combines both.
CLI commands are compact — easy to read, easy to generate, easy to chain. When a task involves dozens of operations, every saved token matters.
JSX is how LLMs already think about UI. They've seen millions of React components. Describing a Figma layout as is natural for them — no special training, no verbose schemas.
Demo
▶️ Button components
▶️ Tailwind UI calendar
Installation
Or run directly without installing:
Start Figma with remote debugging enabled:
Check connection:
That's it. No plugins to install.
Two Modes
Imperative — one command at a time:
Or declaratively — describe the structure in JSX and render it:
The stdin mode accepts pure JSX only — no variables, no logic. For components, variants, and conditions, use .figma.tsx files.
**Elements:** Frame, Rectangle, Ellipse, Text, Line, Star, Polygon, Vector, Group, Icon, Image
Examples
Icons
Insert any icon from Iconify by name. No downloading, no importing, no cleanup.
In JSX:
Browse 150k+ icons: icon-sets.iconify.design
Images
Load images from URL:
Export to JSX
Convert any Figma node back to JSX:
Output:
Match vector shapes to Iconify icons automatically:
Compare two nodes as JSX diff:
Export to Storybook (Experimental)
Export components as Storybook stories:
Generates .stories.tsx with typed props from component properties.
Components
In a .figma.tsx file you can define components. First call creates the master, the rest create instances:
Variants
ComponentSet with all combinations:
This creates a real ComponentSet in Figma with all 4 variants, not just 4 separate buttons.
Grid Layout
CSS Grid for 2D layouts — calendars, dashboards, galleries:
Supports px, fr, and auto/hug. Separate gaps with colGap and rowGap.
In CLI:
Variables as Tokens
Bind colors to Figma variables by name. The hex value is a fallback:
In CLI, use var:Colors/Primary or $Colors/Primary in any color option.
Diffs
Compare two frames and get a patch:
Apply the patch to the original frame. On apply, current state is validated against expected — if they don't match, it fails.
Visual diff highlights changed pixels in red:
| Before | After | Diff |
| --------------------------------- | ------------------------------- | ------------------------------- |
| | | |
Inspection
Page tree in readable form:
Export any node or screenshot with one command.
Arrange
Tidy up canvas layout — especially useful after agents create multiple frames at the same position:
Uses d3-hierarchy treemap for squarify and binary modes — size-aware rectangle packing.
Vectors
Import SVG or work with paths directly — read, modify, translate, scale, flip:
Query
Find nodes using XPath selectors:
Full XPath 3.1 support — predicates, functions, arithmetic, axes.