# dannote/figma-use [Health: Active]

**Category:** 📐 Architecture & Design  
**Repository:** https://github.com/dannote/figma-use  
**GitHub Stars:** 614  
**npm Downloads (last month):** 3143  
**Views:** 4  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/dannote-figma-use

## Description
Full Figma control: create shapes, text, components, set styles, auto-layout, variables, export. 80+ tools.

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

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

## Documentation

## 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:

```bash
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.

_Full upstream README: https://allmcps.com/mcp/dannote-figma-use/readme_