# figma-use > **⚠️ Figma 126+ blocks remote debugging.** figma-use still works via `figma-use daemon start --pipe`. Or skip Figma entirely with **[OpenPencil](https://github.com/open-pencil/open-pencil)** — 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. ```bash # Create and style figma-use create frame --width 400 --height 300 --fill "#FFF" --layout VERTICAL --gap 16 figma-use create icon mdi:home --size 32 --color "#3B82F6" figma-use set layout 1:23 --mode GRID --cols "1fr 1fr 1fr" --gap 16 # Or render JSX echo ' ' | figma-use render --stdin --x 100 --y 100 ``` ## 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 ```bash npm install -g figma-use ``` Or run directly without installing: ```bash npx figma-use status ``` Start Figma with remote debugging enabled: ```bash # macOS open -a Figma --args --remote-debugging-port=9222 # Windows "%LOCALAPPDATA%\Figma\Figma.exe" --remote-debugging-port=9222 # Linux figma --remote-debugging-port=9222 ``` Check connection: ```bash figma-use status ``` That's it. No plugins to install. ## Two Modes Imperative — one command at a time: ```bash figma-use create frame --width 400 --height 300 --fill "#FFF" --radius 12 --layout VERTICAL --gap 16 ``` Or declaratively — describe the structure in JSX and render it: ```bash echo ' Card Title Description ' | figma-use render --stdin --x 100 --y 200 ``` 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. ```bash figma-use create icon mdi:home figma-use create icon lucide:star --size 48 --color "#F59E0B" ``` In JSX: ```tsx ``` Browse 150k+ icons: [icon-sets.iconify.design](https://icon-sets.iconify.design/) ### Images Load images from URL: ```tsx

``` ### Export to JSX Convert any Figma node back to JSX: ```bash figma-use export jsx 123:456 --pretty ``` Output: ```tsx import { Frame, Icon, Text } from 'figma-use/render' export default function SaveButton() { return ( Save ) } ``` Match vector shapes to Iconify icons automatically: ```bash npm install whaticon # Optional dependency figma-use export jsx 123:456 --match-icons --prefer-icons lucide ``` Compare two nodes as JSX diff: ```bash figma-use diff jsx 123:456 789:012 ``` ### Export to Storybook (Experimental) Export components as Storybook stories: ```bash figma-use export storybook --out ./stories figma-use export storybook --out ./stories --match-icons --prefer-icons lucide ``` 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: ```tsx import { defineComponent, Frame, Text } from 'figma-use/render' const Card = defineComponent( 'Card', Card ) export default () => ( ) ``` ### Variants ComponentSet with all combinations: ```tsx import { defineComponentSet, Frame, Text } from 'figma-use/render' const Button = defineComponentSet( 'Button', { variant: ['Primary', 'Secondary'] as const, size: ['Small', 'Large'] as const }, ({ variant, size }) => ( {variant} {size} ) ) export default () => (