io.github.TranHoaiHung/figma-ui-mcp
NPM · FIGMA-UI-MCP · SCANNED AUG 3
Bidirectional Figma MCP — AI draws UI on Figma canvas, reads designs back
Available components
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. How we score →
Supply Chain Security86
- No malware found by supply-chain analysis.Pass
- Only part of the dependency tree could be resolved (94 of 98), so this covers what we could see, not the whole tree.Partial
- No install/post-install scripts declared.Pass
- Only part of the dependency tree could be resolved (94 of 98), so this covers what we could see, not the whole tree. View diagnostics → Partial
Provenance & Transparency97
- Source repository is publicly reachable at the declared URL. View diagnostics → Pass
- Cryptographically verified build provenance (signed, bound to TranHoaiHung/figma-ui-mcp). View diagnostics → Pass
- Clear OSI-approved license (MIT).Pass
- Actively maintained (last published 68 days ago).Pass
- Disclosure check failed: no security disclosure policy was found in the source repository. See how to fix → Fail
Schema Quality & AI Usability50
- AI-judged instruction clarity (good).Pass
- 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. See how to fix → Fail
- Usage-examples check failed: none of the tools include examples. See how to fix → Fail
Stability & Change Management27
- Stability observed for 8 of 30 days with no destabilising changes; credit accrues until the full window elapses.Partial
Tool Coverage100
- 100% of tools have a non-trivial description (not blank, and not just the tool's name).Pass
- 100% of tool parameters carry a description.Pass
Capabilities100
- Implements a supported MCP spec version (2025-11-25); the latest is 2026-07-28.Pass
Add this component to your MCP client. Where a client-specific snippet is available, pick your client below and copy it straight into your config; otherwise use the connection detail shown.
npm · figma-ui-mcp
claude mcp add tranhoaihung-figma-ui-mcp -- npx -y figma-ui-mcp
codex mcp add tranhoaihung-figma-ui-mcp -- npx -y figma-ui-mcp
{
"$schema": "https://opencode.ai/config.json",
"mcp": {
"tranhoaihung-figma-ui-mcp": {
"type": "local",
"command": [
"npx",
"-y",
"figma-ui-mcp"
],
"enabled": true
}
}
} openclaw mcp add tranhoaihung-figma-ui-mcp --command npx --arg -y --arg figma-ui-mcp
mcp_servers:
tranhoaihung-figma-ui-mcp:
command: "npx"
args: ["-y", "figma-ui-mcp"] {
"mcpServers": {
"tranhoaihung-figma-ui-mcp": {
"command": "npx",
"args": [
"-y",
"figma-ui-mcp"
]
}
}
} Every change we have recorded for this component, newest first. Security-relevant changes are always shown. ▲ marks a change for the better, ▼ a change for the worse; unmarked changes are neutral.
- 2 Aug 26 +56
- Install scripts: unverified → pass ▲ security
- Provenance: unverified → pass ▲ security
- Known CVEs: unverified → partial ▲ security
- Malware scan: unverified → pass ▲ security
- The attested source repository moved: TranHoaiHung/figma-ui-mcp security
- Dependency health: unverified → partial ▲ functional
- Maintenance: unverified → pass ▲ functional
- MCP protocol: unverified → pass ▲ functional
- Stability: unverified → 0.23 ▲ functional
- Schema quality: unverified → good ▲ functional
- License: unverified → pass ▲ functional
- Licence: MIT functional
- 31 Jul 26 −6
- We updated how we score, so this day's move reflects our rubric, not a change to the server See what changed → functional
- 30 Jul 26 −18
- Malware scan: pass → unverified ▼ security
- 27 Jul 26 42
First indexed and scored.
Diagnostic detail from the automated scan of this channel: what the scanner observed at each step, so you can see exactly where a check passed or failed. It is informational only and never changes the trust score.
Captured 3 Aug 2026 · Analysed npm/[email protected]
Provenance verified
Ecosystem: npm · Outcome: verified
Reason: verified
- Source repo:
- TranHoaiHung/figma-ui-mcp
- Certificate issuer:
- https://token.actions.githubusercontent.com
- Certificate SAN:
- https://github.com/TranHoaiHung/figma-ui-mcp/.github/workflows/release.yml@refs/heads/main
- Rekor log index:
- 1632985372
- Predicate type:
- https://slsa.dev/provenance/v1
- Subject digest:
- sha512:a2b607bbb7edbdaece10b38644150f9b254bdad418148a99370fc8c6d503d3c8fb226c5a809fea29f9881aaaf007992ea43e5cece1a89391e05b9600e
- Discovery method:
- attestation_endpoint
Dependencies 94 packages
94 packages in the resolved dependency tree · 94 deprecated · 29 stale.
The dependency tree was only partially resolved, so these counts may be incomplete.
The tools this component advertises to a client, with an estimated token cost for each. Expand a tool to see its parameters and schema. The per-tool counts are indicative and are not scored directly; the schema's total context footprint is one signal in Schema Quality & AI Usability.
figma_docs ~199
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.
| Name | Type | Req | Description |
|---|---|---|---|
| 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… |
No output schema declared.
No examples provided.
figma_read ~681
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.
| Name | Type | Req | Description |
|---|---|---|---|
| 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 | yes | ── 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. |
No output schema declared.
No examples provided.
figma_rules ~117
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.
| Name | Type | Req | Description |
|---|---|---|---|
| sessionId | string | — | Target a specific Figma file/tab. Omit to auto-select. |
No output schema declared.
No examples provided.
figma_status ~34
Check whether the Figma plugin bridge is connected. Always call this first to confirm the plugin is running before any other tool.
Input schema present but exposes no named parameters.
No output schema declared.
No examples provided.
figma_write ~339
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.
| Name | Type | Req | Description |
|---|---|---|---|
| code | string | yes | 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. |
No output schema declared.
No examples provided.