| name | cowork-with-figma |
| description | Use when the user works with or mentions Figma designs, prototypes, mockups, UI specs, design tokens, or design-to-code workflows |
| argument-hint | [figma-url] |
| allowed-tools | Read, Glob, Grep, Bash, Agent, AskUserQuestion |
Figma Workflow
Design-to-code workflow for Claude Code via the official Figma MCP server.
Prerequisites
Requires globally installed Figma MCP server (named figma). If not set up, run /cowork-with:cowork-with-onboarding.
Design Context from URLs
When a Figma URL appears — in conversation, a Jira issue description, or a wiki page — use the explorer agent to extract design context automatically. Pass the full Figma URL directly to get_design_context; the tool extracts the relevant node.
Node ID format: Figma node IDs use colon separators: 23102:138594. If a URL contains a dash-formatted node (e.g., node-id=23102-138594), convert dashes to colons when passing nodeId to any tool: "23102:138594".
Tool Strategy
ALL MCP read tool calls MUST go through the `explorer` agent. The main model MUST NOT call any MCP read tool directly — always spawn the `explorer` agent to do it. This is mandatory because the explorer agent enforces correct parameter types and names.
Spawn via: Agent tool → name: "explorer" (the plugin ships agents/explorer.md — haiku model, read-only: MCP reads + codebase + git).
| Task | Who |
|---|
| Read design context, tokens, metadata | explorer agent |
| Take screenshots for visual reference | explorer agent |
| Inspect Code Connect mappings | explorer agent |
| Generate code from design context | Main model |
| Preview to user and get confirmation | Main model |
| Write to Figma (generate design, diagrams, Code Connect) | Main model |
MCP Tools
Read (explorer agent):
get_design_context — structured code from frames/components (React + Tailwind default)get_variable_defs — design tokens: colors, spacing, typographyget_code_connect_map — existing component-to-code mappingsget_code_connect_suggestions — detect unmapped componentsget_screenshot — visual reference of a selectionget_metadata — XML layer structure (lightweight; use for large files before calling get_design_context on specific nodes)get_figjam — FigJam diagram metadata and screenshotswhoami — current user info and plan details
Write (main model, after user confirmation):
generate_figma_design — capture running web UI as editable Figma design (code → Figma); confirm target file with user firstgenerate_diagram — create FigJam diagram from Mermaid syntax or natural languageadd_code_connect_map — create Code Connect mappings between components and codesend_code_connect_mappings — finalize suggested Code Connect mappingscreate_design_system_rules — generate rule file for consistent code output
Before applying generated code, you MUST use `AskUserQuestion` to present a structured confirmation. Show the design context source (Figma URL, frame name) and the generated code in the `markdown` preview field. Options: "Apply" (Recommended), "Edit", "Cancel". Do NOT write code from Figma designs without explicit user approval via this confirmation. This is NOT optional — text-based confirmation does NOT satisfy this gate. You MUST call the `AskUserQuestion` tool.
Cross-Skill Integration
- After reading design context, offer
/superpowers:brainstorming to explore implementation approaches before coding.
- If a Jira issue contains a Figma URL, auto-read the design context when working on that issue.
- If a wiki page references Figma designs, extract design context for implementation specifications.
- After implementing a design, suggest updating the related Jira issue via
/cowork-with:cowork-with-jira to track progress.
Limitations
The following are not available via MCP or have restrictions:
- Rate limits: Starter plan — 6 read calls/month; Professional+ with Dev/Full seats — per-minute limits. Write tools are exempt.
generate_figma_design: Rolling out, limited availability.- No direct Figma editing: Cannot create/modify individual components, layers, or styles.
- No comment management: Cannot read or write Figma comments.
- No version history: Cannot access file version history.
- No team/project management: Cannot manage teams, projects, or permissions.
