name

figma

description

Figma design asset reading, code generation, and MCP integration. Covers REST API direct calls and MCP Server capabilities for design-to-code workflows. **Use when**: (1) Reading Figma file structure, components, styles, variables (2) Generating frontend code from design files (React/Vue/HTML) (3) Writing back to Figma canvas via MCP Server (create/modify frames, components, variables) (4) Extracting design tokens (colors, spacing, typography) for code implementation (5) User mentions "Figma", "design file", "component library", "design to code", "UI implementation" (6) Integrating with Claude Code / Codex for Design-to-Code workflows

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

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 me

2. 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 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)

figma_api.py pages <url> → identify target page
figma_api.py tree <key> --node <page_id> → understand structure
figma_api.py export <key> --nodes <frame_id> → get screenshot
figma_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_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.