figma-mcp-server

# Figma MCP Server > Skill by [ara.so](https://ara.so) — MCP Skills collection. The Figma MCP server connects AI coding agents directly to Figma, enabling you to generate code from designs, extract design tokens, leverage Code Connect mappings, and write native Figma content back to the canvas. This skill teaches agents how to work with Figma files through the Model Context Protocol. ## What It Does - **Generate code from Figma frames** — Select any frame and get structured code (React + Tailwind by default, adaptable to any framework) - **Extract design context** — Pull variables, components, styles, and layout data - **Code Connect integration** — Reference actual component implementations from your codebase - **Write to canvas** (beta) — Create and modify frames, components, variables, and auto layout directly in Figma - **Import from web** (rolling out) — Convert web pages into Figma designs ## Installation ### VS Code (requires GitHub Copilot) 1. Press `⌘ Shift P` → search `MCP:Add Server` 2. Select `HTTP` 3. Enter URL: `https://mcp.figma.com/mcp` 4. Enter server ID: `figma` 5. Choose global or workspace scope Verify in `mcp.json`: ```json { "servers": { "figma": { "type": "http", "url": "https://mcp.figma.com/mcp" } } } ``` Test: Open agent mode (`⌥⌘B` or `⌃⌘I`) and type `#get_design_context` ### Cursor **Recommended:** Install the Figma plugin (includes MCP + skills): ``` /add-plugin figma ``` **Manual:** 1. Open **Cursor → Settings → Cursor Settings → MCP** 2. Click **+ Add new global MCP server** 3. Add: ```json { "mcpServers": { "figma": { "url": "https://mcp.figma.com/mcp" } } } ``` ### Claude Code **Recommended:** Install official plugin: ```bash claude plugin install figma@claude-plugins-official ``` **Manual:** ```bash claude mcp add --transport http figma https://mcp.figma.com/mcp ``` Authenticate: ```bash # Inside claude CLI /mcp auth figma ``` ### Gemini CLI ```bash gemini extensions install https://github.com/figma/mcp-server-guide ``` Authenticate: ```bash gemini # Then inside CLI: /mcp auth figma ``` ### Other Editors Any tool supporting Streamable HTTP can connect using: ```json { "mcpServers": { "figma": { "url": "https://mcp.figma.com/mcp" } } } ``` ## Rate Limits - **Starter/View/Collab seats:** 6 tool calls per month - **Dev/Full seats (Pro/Org/Enterprise):** Per-minute limits (same as Tier 1 Figma REST API) - **Write operations:** Exempt from rate limits during beta ## Core Tools ### `get_design_context` Fetches structured design data (React + Tailwind representation) from a Figma node. **Usage:** ``` Copy Figma frame URL → paste in prompt: "Implement this design: https://www.figma.com/design/FILE_ID?node-id=123-456" ``` The agent extracts the `node-id` and calls the tool automatically. **Explicit trigger:** ``` "Use get_design_context to fetch the design at this URL" ``` ### `get_screenshot` Returns a visual snapshot of the selected node. **Usage:** ``` "Get a screenshot of this Figma component" ``` Always pair with `get_design_context` for complete context. ### `get_variable_defs` Extracts design tokens (colors, spacing, typography) from a selection. **Usage:** ``` "Get the variable names and values used in this frame" "Extract design tokens from this Figma file" ``` **Example output structure:** ```javascript { "colors": { "primary": "#3B82F6", "secondary": "#10B981" }, "spacing": { "sm": "8px", "md": "16px", "lg": "24px" }, "typography": { "headingLarge": { "fontFamily": "Inter", "fontSize": "32px", "fontWeight": "700" } } } ``` ### `get_metadata` Fetches high-level node structure without full content (useful when responses are truncated). **Usage:** ``` "Get the metadata for this Figma file" "Show me the node structure" ``` Use to discover node IDs, then fetch specific nodes with `get_design_context`. ### Write Tools (beta, remote server only) - **`create_frame`** — Create new frames - **`create_component`** — Define reusable components - **`update_auto_layout`** — Modify layout properties - **`create_variable`** — Add design tokens **Example flow:** ``` "Create a component in Figma for a primary button with our design system tokens" ``` Agent will: 1. Fetch variables with `get_variable_defs` 2. Use `create_component` to build the button 3. Apply tokens via `create_variable` if needed ## Working With Figma URLs Figma URLs contain the node identifier. Agents parse this automatically: **Frame URL format:** ``` https://www.figma.com/design/abc123?node-id=45-678 ``` **The agent extracts:** - `file_id`: `abc123` - `node_id`: `45-678` **Prompt patterns:** ``` "Implement this design: [paste URL]" "Generate code for https://www.figma.com/design/..." "Use Code Connect for this component: [URL]" ``` ## Code Connect Integration Code Connect maps Figma components to your actual component implementations. When configured, agents generate code using your real components instead of generic markup. **Setup:** 1. Install Code Connect in your repo 2. Link components to Figma in your codebase 3. Figma MCP automatically detects and uses mappings **Example mapping (React):** ```javascript // Button.figma.tsx import figma from '@figma/code-connect'; import { Button } from './Button'; figma.connect(Button, 'https://www.figma.com/design/abc123?node-id=12-34', { props: { variant: figma.enum('Variant', { Primary: 'primary', Secondary: 'secondary' }), size: figma.enum('Size', { Small: 'sm', Large: 'lg' }) }, example: ({ variant, size }) => ( <Button variant={variant} size={size}> Click me </Button> ) } ); ``` **Agent behavior with Code Connect:** Without: ```jsx <button className="bg-blue-500 px-4 py-2 rounded"> Click me </button> ``` With: ```jsx import { Button } from '@/components/ui/Button'; <Button variant="primary" size="md"> Click me </Button> ``` **Prompt:** ``` "Use Code Connect to implement this button component" "Generate code using our actual component library" ``` ## Real-World Workflows ### Implement a Feature Flow ``` "Implement this checkout flow using our existing components: https://www.figma.com/design/xyz?node-id=100-200 Use components from src/components/checkout Follow our Next.js page structure Use our design tokens for spacing and colors" ``` Agent will: 1. Call `get_design_context` for the frame 2. Call `get_variable_defs` for tokens 3. Call `get_screenshot` for visual reference 4. Check Code Connect for component mappings 5. Generate code using your conventions ### Extract Design System Tokens ``` "Extract all color, spacing, and typography variables from this design system: https://www.figma.com/design/tokens?node-id=1-1 Generate a TypeScript tokens file for Tailwind config" ``` **Agent response:** ```typescript // tokens.ts export const tokens = { colors: { primary: { 50: '#eff6ff', 500: '#3b82f6', 900: '#1e3a8a' }, secondary: { 500: '#10b981' } }, spacing: { xs: '4px', sm: '8px', md: '16px', lg: '24px', xl: '32px' }, typography: { display: { fontFamily: 'Inter', fontSize: '48px', fontWeight: '700', lineHeight: '1.2' }, body: { fontFamily: 'Inter', fontSize: '16px', fontWeight: '400', lineHeight: '1.5' } } } as const; ``` ### Create Components in Figma (Write to Canvas) ``` "Create a primary button component in Figma using our design system tokens. Should have three variants: small, medium, large. Use our primary blue and standard corner radius." ``` Agent will: 1. Fetch existing variables 2. Call `create_component` with proper structure 3. Apply auto layout 4. Link to variables ### Sync Design and Code ``` "This Card component has been updated in code (src/components/Card.tsx). Update the Figma component to match: - Add elevation prop - Support optional image - Update spacing to use 16px instead of 12px" ``` Agent reads your code, then calls write tools to update Figma. ## Configuration and Rules ### Project-Level Instructions Add to your project's agent instructions file (`.cursorrules`, `.clinerules`, etc.): ```yaml ## Figma MCP Integration ### Required workflow 1. Always run get_design_context first for the exact node 2. If truncated, use get_metadata → then re-fetch specific nodes 3. Run get_screenshot for visual reference 4. Download assets as needed 5. Translate React + Tailwind output to our framework ### Framework conventions - Use Next.js App Router structure - Components go in src/components/ui/ - Use our Stack and Box layout primitives - Import design tokens from @/lib/tokens ### Styling - Use Tailwind classes via className - Reference design tokens: colors.primary.500 - Never hardcode spacing — use token variables ### Code Connect - Always check for Code Connect mappings - Reuse existing components from src/components/ - Match prop names to our component API ### File organization - One component per file - Export as named export - Include TypeScript types - Add JSDoc for complex props ### Never hardcode - Colors → use tokens.colors.* - Spacing → use tokens.spacing.* - Typography → use tokens.typography.* ``` ### Asset Handling Images returned by `get_design_context` are base64-encoded: ```javascript // Agent pattern for assets const assetData = designContext.images[0]; if (assetData.startsWith('data:image')) { // Write to file fs.writeFileSync( `public/assets/${nodeName}.png`, Buffer.from(assetData.split(',')[1], 'base64') ); } ``` **Rule for agents:** ``` When Figma MCP returns images: 1. Decode base64 data 2. Save to public/assets/ with semantic names 3. Reference via relative path in code 4. Use Next.js Image component with proper sizing ``` ## Framework Translation Default output is React + Tailwind. Translate to your stack in the prompt: **SwiftUI:** ``` "Generate SwiftUI code from this Figma frame" ``` **Vue + Tailwind:** ``` "Convert this to Vue 3 composition API with Tailwind" ``` **React Native:** ``` "Generate React Native StyleSheet code for this design" ``` **Chakra UI:** ``` "Use Chakra UI components for this layout" ``` **Custom design system:** ``` "Use our design system components from @company/ui-kit Available components: Button, Card, Stack, Text, Input Import from @company/ui-kit" ``` ## Troubleshooting ### Agent not picking right tool **Problem:** Generic code generated instead of using variables. **Solution:** ``` "Use get_variable_defs to extract design tokens first, then generate code referencing those tokens" ``` ### Truncated responses **Problem:** `get_design_context` returns incomplete data. **Solution:** ``` "Use get_metadata to see the node structure, then fetch only the specific child nodes I need" ``` ### Missing Code Connect mappings **Problem:** Components not reused even though Code Connect is set up. **Solution:** 1. Verify Code Connect files are in repo 2. Check figma.connect() URLs match exact node IDs 3. Prompt: "Check for Code Connect mappings before generating code" ### Wrong component structure **Problem:** Auto layout not translating correctly. **Fix in Figma:** 1. Use Auto Layout with clear direction (horizontal/vertical) 2. Set explicit padding and gap values