Figma Skill#

Installation#

For OpenClaw agents (ClawHub)#

bash

clawhub install figma

For Claude Code (MCP Server)#

bash

# Add Figma MCP (one-time, global)
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

# Or install the official Figma plugin (includes Skills)
claude plugin install figma@claude-plugins-official

For Codex CLI#

bash

codex mcp add figma --transport http https://mcp.figma.com/mcp

Environment#

Set FIGMA_TOKEN (Personal Access Token) in your environment or .env file. Generate at: https://www.figma.com/settings → Account → Personal access tokens

---

Quick Reference#

Two access methods#

MethodUse caseAuthREST API ( scripts/figma_api.py)Read file structure, components, export imagesFIGMA_TOKENMCP Server ( https://mcp.figma.com/mcp)Interactive design-to-code, write to canvasOAuth (auto)

---

1. REST API — Direct File Access#

Use scripts/figma_api.py to query Figma files directly. Supports full URLs or file keys.

Commands#

bash

# File structure
python3 scripts/figma_api.py pages <file_key_or_url>

# Frame tree (depth controls levels)
python3 scripts/figma_api.py tree <file_key> --node <page_id> --depth 3

# Published components (--group to aggregate by frame)
python3 scripts/figma_api.py components <file_key> --group

# Component sets
python3 scripts/figma_api.py component-sets <file_key>

# Styles
python3 scripts/figma_api.py styles <file_key>

# Export as PNG/SVG
python3 scripts/figma_api.py export <file_key> --nodes <id1>,<id2> --format png --scale 2

# Node JSON detail
python3 scripts/figma_api.py node <file_key> --node <node_id> --depth 4

# Current user info
python3 scripts/figma_api.py me

---

2. MCP Server — 14 Tools#

Read tools (any Figma plan)#

ToolPurposeget_design_contextDesign context → code (default React+Tailwind, customizable)get_variable_defsVariables and styles (colors, spacing, typography)get_metadataSparse XML: layer IDs, names, types, positions, sizesget_screenshotScreenshot of selectionget_code_connect_mapFigma node → code component mapping (needs Code Connect)search_design_systemSearch library components, variables, styleswhoamiAuthenticated user info

Write tools (beta free, needs Full seat + edit permission)#

ToolPurposeuse_figmaExecute Figma Plugin API JS: create/modify frames, components, variables, auto layoutgenerate_figma_designConvert live browser UI → editable Figma layerscreate_new_fileCreate new file in Draftsgenerate_diagramMermaid syntax → FigJam diagram

Helper tools#

ToolPurposecreate_design_system_rulesGenerate design system rules file for AI code generationadd_code_connect_mapAdd Figma node → code component mappingget_code_connect_suggestionsCode Connect mapping suggestions

Write limitations#

• 20KB response limit per call
• No image/asset import support
• Full seat required (Dev seat = read-only)
• Large changes: inspect first → incremental create/update → verify

---

3. Design-to-Code Workflow#

For Claude Code / Codex (via MCP)#

Step 1 — Provide the Figma frame URL in your prompt:

text

Using this Figma frame: https://www.figma.com/design/<key>?node-id=<id>
Generate React components using [your component library].

Step 2 — For large pages, ask the agent to inspect first:

text

1. Use get_metadata on the frame to understand the structure
2. Use search_design_system to find matching library components
3. Use get_design_context on each section to generate code

Step 3 — Write back to Figma (if editor permission):

text

Using this file: <url>, create a new page and build [description]
using existing components. Use auto layout.

For OpenClaw agents (via REST API)#

1. figma_api.py pages <url> → identify target page
2. figma_api.py tree <key> --node <page_id> → understand structure
3. figma_api.py export <key> --nodes <frame_id> → get screenshot
4. figma_api.py node <key> --node <frame_id> --depth 4 → get component details
5. Generate code using the structural data + screenshot

Best practices#

• Always specify frontend framework and component library in prompts
• Large pages: get_metadata overview first, then get_design_context per section
• Use get_screenshot for layout-sensitive components
• Rate limit: space REST API calls ≥500ms apart
• Keep depth ≤ 4 to avoid timeouts on large files

---

4. Asset Registry#

Register your Figma files in references/omada-assets.md for quick lookup. See references/guide-for-agents.md for the complete agent operation manual. See references/guide-for-humans.md for the human-facing usage guide.