Let AI agents design in Figma

Tools

custom-built or unnamed agent

Overview

⚠️ Figma 126+ blocks remote debugging.

Workflow

⚠️ 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 <Frame><Text> 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: 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. Analyze Discovery tools for understanding design systems: Example output: Lint (Experimental) Check designs for consistency, accessibility, and best practices: Output: 17 rules across 6 categories: JSON output for CI/CD: Comment-Driven Workflow (Experimental) AI agents can wait for Figma comments and respond: Returns comment text, author, and target_node — the exact element under the comment pin. Agent processes the request, resolves the comment, then runs watch again for the next one. Full Command Reference See REFERENCE.md for the complete list of 100+ commands. MCP Server For AI agents that support Model Context Protocol: Exposes 90+ tools. See MCP.md for setup. Configuration For Storybook export and linting, create a config file: Creates .figma-use.json: CLI arguments override config values. For AI Agents Includes SKILL.md — a reference for Claude Code, Cursor, and other agents. How It Works figma-use communicates directly with Figma via Chrome DevTools Protocol (CDP). Just start Figma with --remote-debugging-port=9222 and you're ready. Non-default port? Pass --port <N> to any command, or set the FIGMA_PORT env var: Commands are executed via Runtime.evaluate in Figma's JavaScript context, with full access to the Plugin API. Daemon Optional daemon keeps the CDP connection warm for faster sequential commands: Pipe Transport For Figma 126+ without admin access to patch, the daemon can launch Figma with --remote-debugging-pipe instead:

Reported result

The source does not report measured business outcomes, efficiency gains, or error rates. It claims the tool enables modification of Figma files (unlike the official read-only MCP plugin) and offers faster sequential commands via a daemon. No specific metrics on time saved or design quality improvements are provided.

Human role

The original post does not say how a person stayed involved.

Limitations

Figma version 126+ blocks standard remote debugging, requiring the use of `figma-use daemon start --pipe` or OpenPencil as alternatives. The tool relies on CDP access, which may be restricted by enterprise security policies. Some features like Storybook export and linting are marked as experimental. The source does not specify costs, licensing restrictions beyond MIT, or integration complexities with existing design systems.

Try it

Act as a design automation agent. I want to test the figma-use CLI workflow for creating a simple UI component. 1. **Setup**: Ensure Figma is running with remote debugging enabled (use `--remote-debugging-port=9222` or `figma-use daemon start --pipe` if on v126+). 2. **Task**: Create a 'Card' component with a title and description using JSX. 3. **Input**: Use this JSX structure: `<Frame style={{p: 24, bg: '#FFF', rounded: 12}}><Text style={{size: 18, color: '#000'}}>Card Title</Text><Text style={{size: 14, color: '#666'}}>Description</Text></Frame>`. 4. **Execution**: Run `figma-use render --stdin --x 100 --y 100` with the JSX above. 5. **Verification**: Use `figma-use node tree` to confirm the structure was created correctly. 6. **Human Check**: Before proceeding to complex layouts, I will manually inspect the Figma canvas to verify the output matches expectations. 7. **Error Handling**: If the connection fails, check if the daemon is running or if the port is blocked. Please execute step 1 and 2, then report the command output and any errors. Do not proceed to step 4 until I confirm the connection status.

More cases · Content & creative

• Play a button-clicking game via a browser agent
• Generate ads from a website URL
• Design a personal site with Codex CLI and a Markdown spec
• Turn an outline into a long-form post with SEO bundle
• OpenAI dots: Proposing and Building a Product Manager Toolbox