Log inSubmit server
Figma Use logo

Figma Use

by dannote

Controls Figma from the terminal or JSX to create, inspect, style, export, and compare design nodes.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Figma Use

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "dannote-figma-use": {
      "command": "npx",
      "args": [
        "-y",
        "figma-use"
      ]
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

We couldn’t confirm it starts correctly

We ran the install command but it didn't respond within our test window — this can mean a slow first-time install rather than a real problem.

npx -y figma-use

No response to initialize.

This is an experimental automated check and can have false negatives — missing environment variables, a slow cold install, etc. It doesn’t necessarily mean something’s wrong. Last checked 25d ago.

Overview

dannote/figma-use MCP server connects agent-driven workflows to Figma through a CLI that can create, inspect, modify, and export design content. It supports imperative commands as well as JSX rendering for frames, text, components, layouts, variables, icons, images, and vectors. Use it when an agent needs to make changes in Figma rather than only read files, including workflows that generate many coordinated design operations. Figma 126+ may require starting the daemon with the pipe transport instead of relying on remote debugging.

Use cases

  • Create structured Figma layouts from JSX
  • Modify existing nodes and apply design tokens
  • Export Figma components to JSX or Storybook
  • Compare frames and apply validated patches
  • Arrange generated frames on the canvas

Key features

  • Imperative CLI and declarative JSX rendering
  • Figma components, variants, auto-layout, and grid support
  • Node inspection, export, and visual diffs
  • Iconify icons and URL-based images
  • Vector path editing and canvas arrangement
  • Figma variable bindings

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked Today

Recent health check succeeded.

9/9 checks healthy over the last 79d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 10d ago via OSV.dev · figma-use (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars614Stargazers on the source repository.
npm downloads3.1kPackage downloads in the last 30 days.
Last commit3mo agoMost recent push to the default branch.
Install checkInconclusiveDidn't respond in our test window — often a slow first install.
Directory activity4 viewsConfig copies, upvotes, and views on AllMCPs.

How Figma Use works

What dannote/figma-use does

The dannote/figma-use MCP server provides an agent-facing path to control Figma through the figma-use command-line interface. It is designed for both individual node operations and larger, structured UI generation tasks. The CLI can create common node types, apply styles and layout settings, inspect the page tree, arrange top-level nodes, and export node content.

Its supported design elements include frames, rectangles, ellipses, text, lines, stars, polygons, vectors, groups, icons, and images. Styling examples include fills, corner radii, typography, spacing, flex layouts, CSS Grid-style layouts, and Figma variable bindings. Iconify names can be used for inserting icons, while remote image URLs can be used in JSX image elements.

How it works

The dannote/figma-use MCP server supports two authoring styles. Imperative commands perform one operation at a time, such as creating a frame or changing a node's layout. Declarative JSX describes a hierarchy of elements and renders it into Figma. JSX supplied through standard input must contain pure JSX without variables or logic; .figma.tsx files can define components, variants, and conditional behavior.

Component definitions create a master on the first call and instances afterward. Component sets can generate combinations of variant properties as a real Figma ComponentSet. Grid layouts accept column and row definitions using units such as pixels, fractions, and automatic sizing, with shared or separate gaps.

The CLI communicates with a Figma instance started with remote debugging enabled.

Setup and configuration

Install the package globally with npm:

Terminal
npm install -g figma-use

Alternatively, invoke it without a global installation using npx figma-use status. Start the desktop Figma application with remote debugging enabled, then run figma-use status to check the connection. The documented launch commands differ by macOS, Windows, and Linux.

Tools and capabilities

The dannote/figma-use MCP server covers a broad set of design operations, including:

  • Creating and editing nodes, text, fills, styles, components, variants, and auto-layout settings.
  • Rendering JSX into Figma and exporting nodes back to JSX.
  • Exporting component structures as Storybook stories; this feature is marked experimental.
  • Comparing nodes as JSX, producing structural patches, and generating visual diffs.
  • Reading node trees and exporting node data or screenshots.
  • Arranging canvas items in rows, grids, or size-aware packing layouts.
  • Reading, changing, translating, scaling, and flipping vector paths.
  • Binding colors to Figma variables by name, with hexadecimal fallback values.
  • Inserting Iconify icons and loading images from URLs.

Optional icon matching during JSX export uses the whaticon package and can prefer a specified Iconify set.

Limitations and notes

The stdin JSX mode does not support variables or application logic. Use a .figma.tsx file for components, variants, and conditions. Storybook export is experimental, and icon matching requires the optional whaticon dependency.

Remote-debugging behavior depends on the Figma version. For Figma 126 or newer, use the documented pipe-based daemon path when the normal debugging connection is blocked.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Figma Use

dannote/figma-use is an MCP server that connects agent workflows to Figma through a command-line interface and supports creating, styling, inspecting, rendering, exporting, and comparing design nodes. Its main capabilities include imperative CLI commands, JSX rendering, component and variant generation, layout editing, variable binding, vector operations, and visual diffs.

Install it with `npm install -g figma-use`, or run commands without a global install through `npx figma-use`. Start Figma with remote debugging enabled, then run `figma-use status` to verify the connection. The provided setup does not require installing a Figma plugin.

Use `figma-use daemon start --pipe` when Figma 126 or newer blocks remote debugging. Earlier setup instructions start Figma with `--remote-debugging-port=9222`, but the README specifically identifies the pipe-based daemon as the working path for the newer restriction.

Yes. Pipe JSX to `figma-use render --stdin` to render a declarative element tree into Figma. Standard-input mode accepts pure JSX only; use a `.figma.tsx` file when the design needs variables, components, variants, or conditions.

Yes. Run `figma-use export jsx <node-id>` to convert a Figma node to JSX, with `--pretty` available for formatted output. Optional icon matching uses the `whaticon` package and can prefer an Iconify collection such as Lucide.

Related MCP servers

All in Architecture & Design All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewFigma Use AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/dannote-figma-use?style=directory)](https://allmcps.com/mcp/dannote-figma-use)
HTML Embed
<a href="https://allmcps.com/mcp/dannote-figma-use"><img src="https://allmcps.com/api/badge/dannote-figma-use?style=directory" alt="Figma Use on AllMCPs" /></a>