Figma Skill

Installation

For OpenClaw agents (ClawHub)

clawhub install figma

For 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-official

For Codex CLI

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

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 me

2. MCP Server — 14 Tools

Read tools (any Figma plan)

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

Helper tools

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 code

Step 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)

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.