- name
- figma
- description
- |
Figma Skill
Installation
For OpenClaw agents (ClawHub)
clawhub install figmaFor Claude Code (MCP Server)
# 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-officialFor Codex CLI
codex mcp add figma --transport http https://mcp.figma.com/mcpEnvironment
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
| Method | Use case | Auth |
|---|---|---|
REST API (scripts/figma_api.py) | Read file structure, components, export images | FIGMA_TOKEN |
MCP Server (https://mcp.figma.com/mcp) | Interactive design-to-code, write to canvas | OAuth (auto) |
1. REST API — Direct File Access
Use scripts/figma_api.py to query Figma files directly. Supports full URLs or file keys.
Commands
# 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 me2. MCP Server — 14 Tools
Read tools (any Figma plan)
| Tool | Purpose |
|---|---|
get_design_context | Design context → code (default React+Tailwind, customizable) |
get_variable_defs | Variables and styles (colors, spacing, typography) |
get_metadata | Sparse XML: layer IDs, names, types, positions, sizes |
get_screenshot | Screenshot of selection |
get_code_connect_map | Figma node → code component mapping (needs Code Connect) |
search_design_system | Search library components, variables, styles |
whoami | Authenticated user info |
Write tools (beta free, needs Full seat + edit permission)
| Tool | Purpose |
|---|---|
use_figma | Execute Figma Plugin API JS: create/modify frames, components, variables, auto layout |
generate_figma_design | Convert live browser UI → editable Figma layers |
create_new_file | Create new file in Drafts |
generate_diagram | Mermaid syntax → FigJam diagram |
Helper tools
| Tool | Purpose |
|---|---|
create_design_system_rules | Generate design system rules file for AI code generation |
add_code_connect_map | Add Figma node → code component mapping |
get_code_connect_suggestions | Code 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:
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:
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 codeStep 3 — Write back to Figma (if editor permission):
Using this file: <url>, create a new page and build [description]
using existing components. Use auto layout.For OpenClaw agents (via REST API)
figma_api.py pages <url>→ identify target pagefigma_api.py tree <key> --node <page_id>→ understand structurefigma_api.py export <key> --nodes <frame_id>→ get screenshotfigma_api.py node <key> --node <frame_id> --depth 4→ get component details- Generate code using the structural data + screenshot
Best practices
- Always specify frontend framework and component library in prompts
- Large pages:
get_metadataoverview first, thenget_design_contextper section - Use
get_screenshotfor 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.