figma-use

figma-use is a CLI tool that controls Figma from the command line, providing AI agents with full read and write access. It can create shapes, text, and components, set styles, auto layout, and variables, export images, and includes more than 100 commands.

Purpose

figma-use is designed to give AI agents full control over Figma via the command line. Figma's official MCP plugin can read files but cannot modify them, whereas figma-use can modify them. It combines two approaches familiar to LLMs, the CLI and React (JSX), with commands that are compact, readable, easy to generate, and easy to chain, making it suitable for task scenarios involving dozens of operations.

Main Capabilities

• Create shapes, text, and components: supports elements such as Frame, Rectangle, Ellipse, Text, Line, Star, Polygon, Vector, Group, Icon, Image, and more.
• Icons: insert any icon from Iconify by name, with no need to download, import, or clean up, and browse 150k+ icons (icon-sets.iconify.design).
• Components and variants: define components in .figma.tsx files; the first call creates the main component, and the rest create instances; ComponentSet can create a real component set containing all combinations.
• Auto layout and CSS Grid: supports CSS Grid for 2D layouts (calendars, dashboards, galleries), supports px, fr, auto/hug, and allows spacing to be set with colGap and rowGap.
• Variables as tokens: bind colors to Figma variables by name, with hex values as fallbacks; in the CLI you can use var:Colors/Primary or $Colors/Primary.
• Styles and export: set styles for nodes and export any node or screenshot with one click.
• Images: load images from URLs.
• Vectors and SVG: import SVG or work directly with paths (read, modify, translate, scale, flip).
• Node querying: find nodes using XPath selectors, with support for full XPath 3.1 (predicates, functions, arithmetic, axes).
• JSX conversion and diff: convert any Figma node back to JSX; automatically match vector shapes to Iconify icons; compare two nodes with a JSX diff; Compare two frames to get a patch and apply it (the current state is validated when applying).
• Visual diff: highlight changed pixels in red.
• Page tree: display the page tree in a readable form.
• Canvas organization: organize the canvas layout, implementing squarify and binary modes based on d3-hierarchy treemap (size-aware rectangle packing), suitable for agents after creating multiple frames at the same location.
• Discovery tools: used to understand the design system.
• Lint (experimental): check design consistency, accessibility, and best practices, including 6 categories and 17 rules, with JSON output support for CI/CD.
• Comment-driven workflow (experimental): AI agents can wait for Figma comments and respond, returning the comment text, author, and target_node (the exact element under the comment pin); after handling the request, the agent resolves the comment, then runs watch to wait for the next one.
• Storybook export (experimental): export components as Storybook stories, generating .stories.tsx with typed props.
• MCP support: expose 90+ tools for AI agents that support the Model Context Protocol.
• Configuration file: you can create .figma-use.json for Storybook export and linting; CLI parameters override configuration values.
• Comes with SKILL.md: for reference by agents such as Claude Code and Cursor.

Usage

1. Start Figma with remote debugging enabled: use --remote-debugging-port=9222. You can also run it without installing. No plugin installation is required.
2. Check the connection.
3. You can use imperative (one command at a time) or declarative (describe the structure with JSX and render it).
4. stdin mode accepts only pure JSX (no variables, no logic); use .figma.tsx files for components, variants, and conditions.
5. You can set a non-default port: pass --port <N> to any command, or set the FIGMA_PORT environment variable.
6. Commands are executed via Runtime.evaluate in the Figma JavaScript context, withfull access to the Plugin API.
7. An optional daemon keeps the CDP connection alive, speeding up consecutive commands: figma-use daemon start.
8. For cases with Figma 126+ and no administrator privileges for patching, the daemon can start Figma with --remote-debugging-pipe; the daemon holds the pipe connection, and all commands are routed automatically. You can set FIGMA_BIN to customize the binary location.

Use cases

• AI agents automatically create and modify Figma designs (shapes, text, components, styles).
• Export designs as images or export them as Storybook stories.
• Through a comment-driven workflow, let agents respond to design review comments.
• Perform lint checks on designs in CI/CD.
• Find, compare, and diff nodes and frames in the design system.

Limitations

• Figma 126+ blocks remote debugging; figma-use can still be used via figma-use daemon start --pipe; alternatively, you can skip Figma entirely and use OpenPencil (an open-source design editor that can read and write .fig files, with built-in AI and P2P collaboration).
• stdin mode accepts only pure JSX and does not support variables and logic.
• Storybook export, Lint, and the comment-driven workflow are experimental features.
• Other features, fees, prices, platforms, effects, and other information are not yet provided.