Figma MCP
Path: .cursor/skills/figma-mcp/SKILL.md
Category: Design
Triggers: Figma, design implementation, Figma URLs
What It Does
Teaches the agent to use the Figma MCP server for extracting design context, generating code from frames, getting variables/styles, managing Code Connect mappings, and creating FigJam diagrams.
Key Tools
| Tool | Purpose |
|---|---|
get_design_context | Primary tool — extracts code + screenshot + contextual hints from a Figma frame |
get_screenshot | Visual capture of a design at any zoom level |
get_metadata | File-level metadata (pages, components, styles) |
generate_diagram | Create FigJam diagrams from text descriptions |
URL Parsing
The skill includes URL parsing rules for extracting fileKey and nodeId from Figma URLs:
| URL Pattern | Extraction |
|---|---|
figma.com/design/:fileKey/:fileName?node-id=:nodeId | Convert - to : in nodeId |
figma.com/design/:fileKey/branch/:branchKey/:fileName | Use branchKey as fileKey |
figma.com/make/:makeFileKey/:makeFileName | Use makeFileKey |
figma.com/board/:fileKey/:fileName | FigJam file — use get_figjam |
Design-to-Code Workflow
- Call
get_design_contextwith fileKey and nodeId - Receive React + Tailwind code enriched with hints
- Adapt to the project's stack — the output is a reference, not final code
- Check for existing components in
libs/ui/componentsthat match the design - Reuse project tokens and patterns rather than generating from scratch
MCP Server
All Figma operations use CallMcpTool with server: "user-figma-mcp".