# io.github.TranHoaiHung/figma-ui-mcp (npm · figma-ui-mcp)

Bidirectional Figma MCP — AI draws UI on Figma canvas, reads designs back

- Trust score: 74/100 (medium)
- Change this week: +32
- Registry status: active
- Liveness: live
- Owner verified: no
- Last scored: 2026-08-03

## Components

- npm · `figma-ui-mcp`: 74/100 (this document), [markdown](https://verifymcp.io/servers/tranhoaihung-figma-ui-mcp/figma-ui-mcp.md), [page](https://verifymcp.io/servers/tranhoaihung-figma-ui-mcp/figma-ui-mcp)

## Channel facts

- Registry: `npm`
- Package: `figma-ui-mcp`
- Version: `2.5.26`
- Transport: `stdio`

## Trust breakdown

How this component scores in each security and reliability category. Every signal is checked automatically from public evidence about the published package, including repeated runs of it in an isolated sandbox, and we only credit what we can confirm. Scores are 0–100 per category. Scoring method: https://verifymcp.io/docs/scoring (what has changed: https://verifymcp.io/docs/scoring/changelog)

Scored 2026-08-03.

- **Supply Chain Security**: 86/100
  - No malware found by supply-chain analysis.
  - Only part of the dependency tree could be resolved (94 of 98), so this covers what we could see, not the whole tree.
  - No install/post-install scripts declared.
  - Only part of the dependency tree could be resolved (94 of 98), so this covers what we could see, not the whole tree.
- **Provenance & Transparency**: 97/100
  - Source repository is publicly reachable at the declared URL.
  - Cryptographically verified build provenance (signed, bound to TranHoaiHung/figma-ui-mcp).
  - Clear OSI-approved license (MIT).
  - Actively maintained (last published 68 days ago).
  - Disclosure check failed: no security disclosure policy was found in the source repository.
- **Schema Quality & AI Usability**: 50/100
  - AI-judged instruction clarity (good).
  - Context-footprint check failed: tool/resource definitions use about 1370 tokens (~274/item across 5 items; 5 tools + 0 resources), over budget; trim descriptions and params.
  - Usage-examples check failed: none of the tools include examples.
- **Stability & Change Management**: 27/100
  - Stability observed for 8 of 30 days with no destabilising changes; credit accrues until the full window elapses.
- **Tool Coverage**: 100/100
  - 100% of tools have a non-trivial description (not blank, and not just the tool's name).
  - 100% of tool parameters carry a description.
- **Capabilities**: 100/100
  - Implements a supported MCP spec version (2025-11-25); the latest is 2026-07-28.

## Install

### Claude

```bash
claude mcp add tranhoaihung-figma-ui-mcp -- npx -y figma-ui-mcp
```

### Codex

```bash
codex mcp add tranhoaihung-figma-ui-mcp -- npx -y figma-ui-mcp
```

### opencode

```json
{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "tranhoaihung-figma-ui-mcp": {
      "type": "local",
      "command": [
        "npx",
        "-y",
        "figma-ui-mcp"
      ],
      "enabled": true
    }
  }
}
```

### OpenClaw

```bash
openclaw mcp add tranhoaihung-figma-ui-mcp --command npx --arg -y --arg figma-ui-mcp
```

### Hermes

```yaml
mcp_servers:
  tranhoaihung-figma-ui-mcp:
    command: "npx"
    args: ["-y", "figma-ui-mcp"]
```

### Other

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

## Changelog

Every change recorded for this component, newest first. Days that predate change tracking, or that we cannot explain, say so: "we were watching and nothing happened" and "we were not watching" are different claims.

### 2026-08-02 (score 74, +56)

- [security improvement] Install scripts: unverified → pass
- [security improvement] Provenance: unverified → pass
- [security improvement] Known CVEs: unverified → partial
- [security improvement] Malware scan: unverified → pass
- [security] The attested source repository moved: TranHoaiHung/figma-ui-mcp
- [functional improvement] Dependency health: unverified → partial
- [functional improvement] Maintenance: unverified → pass
- [functional improvement] MCP protocol: unverified → pass
- [functional improvement] Stability: unverified → 0.23
- [functional improvement] Schema quality: unverified → good
- [functional improvement] License: unverified → pass
- [functional] Licence: MIT

### 2026-07-31 (score 18, −6)

- [functional] We updated how we score, so this day's move reflects our rubric, not a change to the server

### 2026-07-30 (score 24, −18)

- [security regression] Malware scan: pass → unverified

### 2026-07-27 (score 42)

First indexed and scored.

## MCP tools (5)

### `figma_status` (~34 tokens)

Check whether the Figma plugin bridge is connected. Always call this first to confirm the plugin is running before any other tool.

### `figma_write` (~339 tokens)

Execute JavaScript code to CREATE or MODIFY designs in Figma. ⚠️ MANDATORY: Call figma_docs BEFORE writing any design code. Skipping figma_docs causes hardcoded colors, wrong sizing, broken layouts, and low-quality UI. Use the `figma` proxy object — all methods return Promises, use async/await. Operations: create, modify, delete, clone, group, ungroup, flatten, resize, set_selection, set_viewport, batch (multiple ops in one call). Design Tokens: createVariableCollection, createVariable, setVariableValue, addVariableMode, renameVariableMode, removeVariableMode, applyVariable, setFrameVariableMode, clearFrameVariableMode, createPaintStyle, createTextStyle, createComponent. Prototyping: setReactions, getReactions, removeReactions (click/hover/press → navigate/overlay/swap with Smart Animate transitions). Scroll: setScrollBehavior (overflowDirection: NONE/HORIZONTAL/VERTICAL/BOTH). Variants: setComponentProperties, swapComponent, getComponentProperties. Component property definitions (master-side, required for instance text overrides to recalc auto-layout): addComponentProperty (TEXT/BOOLEAN/INSTANCE_SWAP), bindComponentPropertyToText, removeComponentProperty. The code runs in a sandboxed VM: no access to require, process, fs, fetch, or network.

Input parameters:

- `code` (string, required): JavaScript using figma.create(), figma.modify(), figma.setPage(), etc.
- `sessionId` (string): Target a specific Figma file/tab when multiple are connected. Omit to auto-select.

### `figma_read` (~681 tokens)

READ design data from Figma — extract node trees, colors, typography, spacing, and screenshots. Use to understand an existing design before generating code, or to inspect what's on the canvas.

Input parameters:

- `depth` (string): Tree depth for get_design/get_selection. Number (default 10) or 'full' for unlimited. Higher = more detail but larger output.
- `detail` (string): Detail level for get_design/get_selection: 'minimal' (~5% tokens), 'compact' (~30%), 'full' (default, 100%). Use minimal for large files.
- `format` (string): Image format for export_image: 'png' (default) or 'jpg'.
- `includeHidden` (boolean): Include invisible nodes (visible:false) in results. Default false — hidden layers are skipped to reduce noise.
- `nodeId` (string): Target node ID (optional — omit to use current selection).
- `nodeName` (string): Target node name (alternative to nodeId).
- `operation` (string, required): ── Design-to-code (use these for code generation) ── get_design_context: AI-optimized payload for a node — flex layout, token-resolved colors, typography with style names, component instances with va…
- `scale` (number): Export scale for screenshot (default 1).
- `sessionId` (string): Target a specific Figma file/tab when multiple are connected. Omit to auto-select.

### `figma_docs` (~199 tokens)

Get the API reference and design rules for figma_write. Call with no args first — returns quick-start guide + critical rules. Then load specific sections as needed: section='rules' (design principles, token rules, layer order, component-first), section='layout' (auto-layout, button/card/badge/progress/mobile rules), section='api' (create/modify/delete/clone/batch/read operations + workflow), section='tokens' (variables, multi-mode, paint styles, text styles), section='icons' (loadImage, loadIcon, loadIconIn, icon libraries, coloring, sizing). Always call figma_docs BEFORE any figma_write code.

Input parameters:

- `section` (string): Which section to load. Omit (or null) for quick-start + critical rules. Load layout before any auto-layout work. Load api for full operation reference. Load tokens for variable/multi-mode work. Load…

### `figma_rules` (~117 tokens)

Generate a design system rule sheet from the current Figma file — aggregates color tokens, typography styles, variables (all modes), and component catalog into a single markdown block. Equivalent to official Figma MCP's create_design_system_rules. Call once at the start of a design-to-code session to give the AI full context: what tokens to use, what text styles exist, which components are available. Re-run when the design system changes.

Input parameters:

- `sessionId` (string): Target a specific Figma file/tab. Omit to auto-select.

## Diagnostics

Captured diagnostic sections: Provenance, Dependencies. The full working is on the page: https://verifymcp.io/servers/tranhoaihung-figma-ui-mcp/figma-ui-mcp#diagnostics

## Score history

- 2026-08-03: 74
- 2026-08-02: 74
- 2026-08-01: 18
- 2026-07-31: 18
- 2026-07-30: 24
- 2026-07-28: 42
- 2026-07-27: 42

## Links

- npm package: https://www.npmjs.com/package/figma-ui-mcp
- Socket report: https://socket.dev/npm/package/figma-ui-mcp
- Repository: https://github.com/TranHoaiHung/figma-ui-mcp
- Changelog RSS feed: https://verifymcp.io/servers/tranhoaihung-figma-ui-mcp/figma-ui-mcp/changelog.xml
- Changelog JSON feed: https://verifymcp.io/servers/tranhoaihung-figma-ui-mcp/figma-ui-mcp/changelog.json
- HTML version of this page: https://verifymcp.io/servers/tranhoaihung-figma-ui-mcp/figma-ui-mcp