How do I enable remote debugging in Figma?

Start Figma with the --remote-debugging-port=9222 argument on your OS.

Can I use JSX with logic or variables?

No, stdin JSX must be pure without variables or logic; use .figma.tsx files for components and conditions.

What happens if Figma blocks remote debugging?

You can use the daemon mode with --pipe or switch to OpenPencil for offline editing.

How do I insert icons?

Use the create icon command with Iconify icon names; no manual downloads required.

Figma Use

figmaclijsxdesignicons

CLI and JSX interface to create and modify Figma designs programmatically with 80+ commands and JSX rendering.

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

We couldn’t automatically confirm this listing starts correctly

We ran the install command below 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 4d ago.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "dannote-figma-use": {
      "command": "npx",
      "args": [
        "-y",
        "figma-use"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Overview

This tool provides a command-line interface and JSX-based declarative syntax to control Figma design files, enabling creation and styling of shapes, text, components, layouts, and exports. It supports imperative commands for single operations and declarative JSX input for complex UI structures. It is useful when you need to automate or script Figma design modifications beyond what the official plugin allows, including component sets and icon integration.

Use cases

Create and style frames, shapes, text, and icons in Figma via CLI

Render complex UI layouts in Figma using JSX syntax

Export Figma nodes to JSX code for reuse or versioning

Define and instantiate reusable components and variants programmatically

Compare Figma nodes as JSX diffs for design changes

Key features

Imperative CLI commands for Figma object creation and styling

Declarative JSX rendering of Figma layouts and components

Support for 80+ design operations including auto-layout and variables

Icon insertion from Iconify without manual downloads

Export Figma nodes to JSX and Storybook stories

Component and variant definition with typed props

Capabilities & Tool Schemas

Inspect callable tools, capabilities, and parameters exposed to AI agents by Figma Use.

Extracted Tool Capabilities

Imperative CLI commands for Figma object creation and styling

Declarative JSX rendering of Figma layouts and components

Support for 80+ design operations including auto-layout and variables

Icon insertion from Iconify without manual downloads

Export Figma nodes to JSX and Storybook stories

Component and variant definition with typed props

Documentation Overview

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.

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 '<Frame style={{display: "grid", cols: "1fr 1fr", gap: 16}}>
  <Frame style={{bg: "#3B82F6", h: 100}} />
  <Frame style={{bg: "#10B981", h: 100}} />
</Frame>' | 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 <Frame><Text> is natural for them — no special training, no verbose schemas.

Demo

▶️ Button components

▶️ Tailwind UI calendar

Installation

Terminal

npm install -g figma-use

Or run directly without installing:

Terminal

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 '<Frame style={{p: 24, gap: 16, flex: "col", bg: "#FFF", rounded: 12}}>
  <Text style={{size: 24, weight: "bold", color: "#000"}}>Card Title</Text>
  <Text style={{size: 14, color: "#666"}}>Description</Text>
</Frame>' | 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

<Frame style={{ flex: 'row', gap: 8 }}>
  <Icon icon="mdi:home" size={24} color="#3B82F6" />
  <Icon icon="lucide:star" size={32} color="#F59E0B" />
</Frame>

Browse 150k+ icons: icon-sets.iconify.design

Images

Load images from URL:

tsx

<Image src="https://example.com/photo.jpg" w={200} h={150} />

Export to JSX

Convert any Figma node back to JSX:

server.ts

figma-use export jsx 123:456 --pretty

Output:

server.ts

import { Frame, Icon, Text } from 'figma-use/render'
export default function SaveButton() {
  return (
    <Frame name="SaveButton" w={120} h={44} bg="#1FAFBB" rounded={8} flex="row" gap={8}>
      <Icon name="lucide:save" size={18} color="#FFFFFF" />
      <Text size={16} color="#FFFFFF">
        Save
      </Text>
    </Frame>
  )
}

Match vector shapes to Iconify icons automatically:

Terminal

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:

server.ts

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:

server.ts

import { defineComponent, Frame, Text } from 'figma-use/render'

const Card = defineComponent(
  'Card',
  <Frame style={{ p: 24, bg: '#FFF', rounded: 12 }}>
    <Text style={{ size: 18, color: '#000' }}>Card</Text>
  </Frame>
)

export default () => (
  <Frame style={{ gap: 16, flex: 'row' }}>
    <Card />
    <Card />
    <Card />
  </Frame>
)

Variants

ComponentSet with all combinations:

server.ts

import { defineComponentSet, Frame, Text } from 'figma-use/render'

const Button = defineComponentSet(
  'Button',
  {
    variant: ['Primary', 'Secondary'] as const,
    size: ['Small', 'Large'] as const
  },
  ({ variant, size }) => (
    <Frame
      style={{
        p: size === 'Large' ? 16 : 8,
        bg: variant === 'Primary' ? '#3B82F6' : '#E5E7EB',
        rounded: 8
      }}
    >
      <Text style={{ color: variant === 'Primary' ? '#FFF' : '#111' }}>
        {variant} {size}
      </Text>
    </Frame>
  )
)

export default () => (
  <Frame style={{ gap: 16, flex: 'col' }}>
    <Button variant="Primary" size="Large" />
    <Button variant="Secondary" size="Small" />
  </Frame>
)

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:

tsx

<Frame
  style={{
    display: 'grid',
    cols: '1fr 1fr 1fr', // 3 equal columns
    rows: 'auto auto', // 2 rows
    gap: 16
  }}
>
  <Frame style={{ bg: '#FF6B6B' }} />
  <Frame style={{ bg: '#4ECDC4' }} />
  <Frame style={{ bg: '#45B7D1' }} />
  <Frame style={{ bg: '#96CEB4' }} />
  <Frame style={{ bg: '#FFEAA7' }} />
  <Frame style={{ bg: '#DDA0DD' }} />
</Frame>

Supports px, fr, and auto/hug. Separate gaps with colGap and rowGap.

In CLI:

bash

figma-use set layout <id> --mode GRID --cols "100px 1fr 100px" --rows "auto" --gap 16

Variables as Tokens

Bind colors to Figma variables by name. The hex value is a fallback:

server.ts

import { defineVars, Frame, Text } from 'figma-use/render'

const colors = defineVars({
  bg: { name: 'Colors/Gray/50', value: '#F8FAFC' },
  text: { name: 'Colors/Gray/900', value: '#0F172A' }
})

export default () => (
  <Frame style={{ bg: colors.bg }}>
    <Text style={{ color: colors.text }}>Bound to variables</Text>
  </Frame>
)

In CLI, use var:Colors/Primary or $Colors/Primary in any color option.

Diffs

Compare two frames and get a patch:

bash

figma-use diff create --from 123:456 --to 789:012

diff

--- /Card/Header #123:457
+++ /Card/Header #789:013
@@ -1,5 +1,5 @@
 type: FRAME
 size: 200 50
 pos: 0 0
-fill: #FFFFFF
+fill: #F0F0F0
-opacity: 0.8
+opacity: 1

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:

bash

figma-use diff visual --from 49:275096 --to 49:280802 --output diff.png

Before	After	Diff

Inspection

Page tree in readable form:

Code

$ figma-use node tree
[0] frame "Card" (1:23)
    400×300 at (0, 0) | fill: #FFFFFF | layout: col gap=16
  [0] text "Title" (1:24)
      "Hello World" | 24px Inter Bold

Export any node or screenshot with one command.

Arrange

Tidy up canvas layout — especially useful after agents create multiple frames at the same position:

bash

figma-use arrange                              # Grid-arrange all top-level nodes
figma-use arrange --mode row --gap 60          # Horizontal row
figma-use arrange --mode squarify --gap 60     # Smart packing for mixed sizes

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:

bash

figma-use path get <id>
figma-use path set <id> "M 0 0 L 100 100 Z"
figma-use path scale <id> --factor 1.5
figma-use path flip <id> --axis x

Query

Find nodes using XPath selectors:

bash

figma-use query "//FRAME"                              # All frames
figma-use query "//FRAME[@width < 300]"                # Narrower than 300px
figma-use query "//COMPONENT[starts-with(@name, 'Button')]"  # Name starts with
figma-use query "//FRAME[contains(@name, 'Card')]"     # Name contains
figma-use query "//SECTION/FRAME"                      # Direct children
figma-use query "//SECTION//TEXT"                      # All descendants
figma-use query "//*[@cornerRadius > 0]"               # Any node with radius

Full XPath 3.1 support — predicates, functions, arithmetic, axes.

Analyze

Discovery tools for understanding design systems:

bash

# Find repeated patterns (potential components)
figma-use analyze clusters

# Color palette — usage frequency, variables vs hardcoded
figma-use analyze colors
figma-use analyze colors --show-similar    # Find colors to merge

Read the full README →View source on GitHub →

Related MCP Servers

View all in Architecture & Design View all alternatives

Adoption & maintenance

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

GitHub stars

597

Stargazers on the source repository.

npm downloads

2.1k

Package downloads in the last 30 days.

Last commit

2mo ago

Most recent push to the default branch.

Install check

Inconclusive

Didn't respond in our test window — often a slow first install.

Directory activity

2 views

Config copies, upvotes, and views on AllMCPs.

Reviews

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

Frequently Asked Questions about Figma Use

No plugin installation is needed; it connects to Figma via remote debugging.

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 Preview

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>

Technical Specs & Signals

CategoryArchitecture & Design

PricingFree

52Quality signal: Good · 52/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools18/30

Adoption & activity11/15

Community engagement0/10

A guidance signal from public completeness & health data — not a user rating. New listings start lower and rise as they add docs, get verified, and grow adoption. Signals we can't observe for a listing are skipped, not counted against it.

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

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

★ Featured

Moxie Docs MCP

MCP & Agent Skills for Automated Documentation, and codebase conventions + context

Explore Server →

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to unlock edit access and the Official badge — proof is checked automatically, then reviewed by our team.

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 📐 Architecture & Design →Alternatives to Figma Use →Install in Claude Desktop Install in Cursor Install in VS Code

Figma Use

figmaclijsxdesignicons

CLI and JSX interface to create and modify Figma designs programmatically with 80+ commands and JSX rendering.

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

We couldn’t automatically confirm this listing starts correctly

We ran the install command below 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.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "dannote-figma-use": {
      "command": "npx",
      "args": [
        "-y",
        "figma-use"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Overview

Use cases

Create and style frames, shapes, text, and icons in Figma via CLI

Render complex UI layouts in Figma using JSX syntax

Export Figma nodes to JSX code for reuse or versioning

Define and instantiate reusable components and variants programmatically

Compare Figma nodes as JSX diffs for design changes

Key features

Imperative CLI commands for Figma object creation and styling

Declarative JSX rendering of Figma layouts and components

Support for 80+ design operations including auto-layout and variables

Icon insertion from Iconify without manual downloads

Export Figma nodes to JSX and Storybook stories

Component and variant definition with typed props

Capabilities & Tool Schemas

Inspect callable tools, capabilities, and parameters exposed to AI agents by Figma Use.

Extracted Tool Capabilities

Imperative CLI commands for Figma object creation and styling

Declarative JSX rendering of Figma layouts and components

Support for 80+ design operations including auto-layout and variables

Icon insertion from Iconify without manual downloads

Export Figma nodes to JSX and Storybook stories

Component and variant definition with typed props

Documentation Overview

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.

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 '<Frame style={{display: "grid", cols: "1fr 1fr", gap: 16}}>
  <Frame style={{bg: "#3B82F6", h: 100}} />
  <Frame style={{bg: "#10B981", h: 100}} />
</Frame>' | 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 <Frame><Text> is natural for them — no special training, no verbose schemas.

Demo

▶️ Button components

▶️ Tailwind UI calendar

Installation

Terminal

npm install -g figma-use

Or run directly without installing:

Terminal

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 '<Frame style={{p: 24, gap: 16, flex: "col", bg: "#FFF", rounded: 12}}>
  <Text style={{size: 24, weight: "bold", color: "#000"}}>Card Title</Text>
  <Text style={{size: 14, color: "#666"}}>Description</Text>
</Frame>' | 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

<Frame style={{ flex: 'row', gap: 8 }}>
  <Icon icon="mdi:home" size={24} color="#3B82F6" />
  <Icon icon="lucide:star" size={32} color="#F59E0B" />
</Frame>

Browse 150k+ icons: icon-sets.iconify.design

Images

Load images from URL:

tsx

<Image src="https://example.com/photo.jpg" w={200} h={150} />

Export to JSX

Convert any Figma node back to JSX:

server.ts

figma-use export jsx 123:456 --pretty

Output:

server.ts

import { Frame, Icon, Text } from 'figma-use/render'
export default function SaveButton() {
  return (
    <Frame name="SaveButton" w={120} h={44} bg="#1FAFBB" rounded={8} flex="row" gap={8}>
      <Icon name="lucide:save" size={18} color="#FFFFFF" />
      <Text size={16} color="#FFFFFF">
        Save
      </Text>
    </Frame>
  )
}

Match vector shapes to Iconify icons automatically:

Terminal

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:

server.ts

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:

server.ts

import { defineComponent, Frame, Text } from 'figma-use/render'

const Card = defineComponent(
  'Card',
  <Frame style={{ p: 24, bg: '#FFF', rounded: 12 }}>
    <Text style={{ size: 18, color: '#000' }}>Card</Text>
  </Frame>
)

export default () => (
  <Frame style={{ gap: 16, flex: 'row' }}>
    <Card />
    <Card />
    <Card />
  </Frame>
)

Variants

ComponentSet with all combinations:

server.ts

import { defineComponentSet, Frame, Text } from 'figma-use/render'

const Button = defineComponentSet(
  'Button',
  {
    variant: ['Primary', 'Secondary'] as const,
    size: ['Small', 'Large'] as const
  },
  ({ variant, size }) => (
    <Frame
      style={{
        p: size === 'Large' ? 16 : 8,
        bg: variant === 'Primary' ? '#3B82F6' : '#E5E7EB',
        rounded: 8
      }}
    >
      <Text style={{ color: variant === 'Primary' ? '#FFF' : '#111' }}>
        {variant} {size}
      </Text>
    </Frame>
  )
)

export default () => (
  <Frame style={{ gap: 16, flex: 'col' }}>
    <Button variant="Primary" size="Large" />
    <Button variant="Secondary" size="Small" />
  </Frame>
)

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:

tsx

<Frame
  style={{
    display: 'grid',
    cols: '1fr 1fr 1fr', // 3 equal columns
    rows: 'auto auto', // 2 rows
    gap: 16
  }}
>
  <Frame style={{ bg: '#FF6B6B' }} />
  <Frame style={{ bg: '#4ECDC4' }} />
  <Frame style={{ bg: '#45B7D1' }} />
  <Frame style={{ bg: '#96CEB4' }} />
  <Frame style={{ bg: '#FFEAA7' }} />
  <Frame style={{ bg: '#DDA0DD' }} />
</Frame>

Supports px, fr, and auto/hug. Separate gaps with colGap and rowGap.

In CLI:

bash

figma-use set layout <id> --mode GRID --cols "100px 1fr 100px" --rows "auto" --gap 16

Variables as Tokens

Bind colors to Figma variables by name. The hex value is a fallback:

server.ts

import { defineVars, Frame, Text } from 'figma-use/render'

const colors = defineVars({
  bg: { name: 'Colors/Gray/50', value: '#F8FAFC' },
  text: { name: 'Colors/Gray/900', value: '#0F172A' }
})

export default () => (
  <Frame style={{ bg: colors.bg }}>
    <Text style={{ color: colors.text }}>Bound to variables</Text>
  </Frame>
)

In CLI, use var:Colors/Primary or $Colors/Primary in any color option.

Diffs

Compare two frames and get a patch:

bash

figma-use diff create --from 123:456 --to 789:012

diff

--- /Card/Header #123:457
+++ /Card/Header #789:013
@@ -1,5 +1,5 @@
 type: FRAME
 size: 200 50
 pos: 0 0
-fill: #FFFFFF
+fill: #F0F0F0
-opacity: 0.8
+opacity: 1

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:

bash

figma-use diff visual --from 49:275096 --to 49:280802 --output diff.png

Before	After	Diff

Inspection

Page tree in readable form:

Code

$ figma-use node tree
[0] frame "Card" (1:23)
    400×300 at (0, 0) | fill: #FFFFFF | layout: col gap=16
  [0] text "Title" (1:24)
      "Hello World" | 24px Inter Bold

Export any node or screenshot with one command.

Arrange

Tidy up canvas layout — especially useful after agents create multiple frames at the same position:

bash

figma-use arrange                              # Grid-arrange all top-level nodes
figma-use arrange --mode row --gap 60          # Horizontal row
figma-use arrange --mode squarify --gap 60     # Smart packing for mixed sizes

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:

bash

figma-use path get <id>
figma-use path set <id> "M 0 0 L 100 100 Z"
figma-use path scale <id> --factor 1.5
figma-use path flip <id> --axis x

Query

Find nodes using XPath selectors:

bash

figma-use query "//FRAME"                              # All frames
figma-use query "//FRAME[@width < 300]"                # Narrower than 300px
figma-use query "//COMPONENT[starts-with(@name, 'Button')]"  # Name starts with
figma-use query "//FRAME[contains(@name, 'Card')]"     # Name contains
figma-use query "//SECTION/FRAME"                      # Direct children
figma-use query "//SECTION//TEXT"                      # All descendants
figma-use query "//*[@cornerRadius > 0]"               # Any node with radius

Full XPath 3.1 support — predicates, functions, arithmetic, axes.

Analyze

Discovery tools for understanding design systems:

bash

# Find repeated patterns (potential components)
figma-use analyze clusters

# Color palette — usage frequency, variables vs hardcoded
figma-use analyze colors
figma-use analyze colors --show-similar    # Find colors to merge

Read the full README →View source on GitHub →

Related MCP Servers

View all in Architecture & Design View all alternatives

Adoption & maintenance

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

GitHub stars

597

Stargazers on the source repository.

npm downloads

2.1k

Package downloads in the last 30 days.

Last commit

2mo ago

Most recent push to the default branch.

Install check

Inconclusive

Didn't respond in our test window — often a slow first install.

Directory activity

2 views

Config copies, upvotes, and views on AllMCPs.

Reviews

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

Frequently Asked Questions about Figma Use

No plugin installation is needed; it connects to Figma via remote debugging.

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 Preview

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>

Technical Specs & Signals

CategoryArchitecture & Design

PricingFree

52Quality signal: Good · 52/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools18/30

Adoption & activity11/15

Community engagement0/10

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

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

★ Featured

Moxie Docs MCP

MCP & Agent Skills for Automated Documentation, and codebase conventions + context

Explore Server →

Own this project?

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 📐 Architecture & Design →Alternatives to Figma Use →Install in Claude Desktop Install in Cursor Install in VS Code