Skip to main content

​
Overview

The get_code MCP tool generates production-ready code from Figma designs. It extracts styles, assets, and structure from selected nodes and transforms them into JSX or Vue components.
This is an MCP (Model Context Protocol) tool used by AI assistants. For plugin development, see definePlugin.

​
Parameters

​
nodeId
string
Optional target node ID. Omit to use the current single selection when pulling the baseline snapshot.
​
preferredLang
'jsx' | 'vue'
Preferred output language to bias the snapshot. Falls back to the design’s hint/detected language, then JSX.
​
resolveTokens
boolean
default:false
Inline token values instead of references for quick renders. When false (default), returns token metadata so you can map into your theming system. When true, values are resolved per-node (mode-aware).

​
Response

​
code
string
required
Generated component code in the specified language.
​
lang
'vue' | 'jsx'
required
The actual output language used.
​
assets
AssetDescriptor[]
Array of asset metadata for images and vectors used in the code.
​
tokens
GetTokenDefsResult
Token definitions referenced in the code. Each key is a canonical CSS variable name (e.g., --color-primary). Only included when tokens are detected.
​
codegen
object
required
Code generation configuration used.
​
warnings
GetCodeWarning[]
Array of warnings about the generated code.

​
Example Request

{
  "nodeId": "123:456",
  "preferredLang": "jsx",
  "resolveTokens": false
}

​
Example Response

{
  "code": "<div className=\"container\" style={{ backgroundColor: 'var(--color-background)' }}>\n  <h1>Hello World</h1>\n</div>",
  "lang": "jsx",
  "assets": [
    {
      "hash": "a1b2c3d4",
      "url": "https://...",
      "mimeType": "image/png",
      "size": 12345,
      "width": 100,
      "height": 100
    }
  ],
  "tokens": {
    "--color-background": {
      "kind": "color",
      "value": "#ffffff"
    },
    "--spacing-md": {
      "kind": "number",
      "value": "1rem"
    }
  },
  "codegen": {
    "plugin": "default",
    "config": {
      "cssUnit": "rem",
      "rootFontSize": 16,
      "scale": 1
    }
  }
}

​
Usage Notes

Token Resolution StrategyWhen resolveTokens: false (recommended):
  • Code contains CSS variable references like var(--color-primary)
  • tokens object provides token metadata
  • Map tokens to your design system manually
When resolveTokens: true:
  • Values are inlined (mode-aware)
  • Useful for quick previews
  • May not match your token naming conventions
Selection Requirements
  • Select exactly one node or provide a single nodeId
  • The node must be visible
  • Large/deep trees may be truncated (check warnings)

​
Code Generation Pipeline

The tool follows this pipeline:
  1. Tree Building - Constructs visible node tree with depth limits
  2. Variable Mapping - Maps Figma variables to CSS tokens
  3. Asset Planning - Identifies images and vectors to export
  4. Style Collection - Extracts CSS styles from each node
  5. Asset Export - Generates optimized SVGs and raster images
  6. Rendering - Transforms tree into component markup
  7. Token Processing - Detects and transforms variable references
  8. Budget Validation - Ensures output fits within MCP payload limits

​
See Also

get_structure

Get node hierarchy and geometry

Transform Hooks

Customize code generation