Skip to main content
TemPad Dev MCP exposes tools that allow agents to pull code, structure, and assets from Figma designs. All tools operate on the currently selected node or an explicitly provided nodeId.

​
get_code

Generate high-fidelity code output for a Figma selection, including markup, styles, assets, and design tokens.
​
nodeId
string
Target node ID to generate code for. If omitted, uses the current single selection in Figma.
​
preferredLang
'jsx' | 'vue'
Preferred output language. If omitted, TemPad Dev uses the design’s hint or detected language, falling back to JSX. Note that plugins may override this preference.
​
resolveTokens
boolean
default:"false"
When true, inlines token values for quick renders. When false (default), returns token metadata so you can map into your project’s theming system. Token resolution is mode-aware per node.

​
Response Schema

{
  code: string              // Generated markup
  lang: 'jsx' | 'vue'      // Actual language used (may differ from preferredLang)
  assets?: AssetDescriptor[] // Attached binary assets
  tokens?: {                // Design tokens (if resolveTokens is false)
    [name: string]: {
      kind: 'color' | 'number' | 'string' | 'boolean'
      value: string | Record<string, string> // Single mode or multi-mode values
    }
  }
  codegen: {               // Codegen configuration used
    plugin: string
    config: {
      cssUnit: 'px' | 'rem'
      rootFontSize: number
      scale: number
    }
  }
  warnings?: Array<{       // Warnings about truncation, inference, etc.
    type: string
    message: string
    data?: Record<string, unknown>
  }>
}

​
Asset Descriptor Schema

{
  hash: string        // Unique content hash (8 hex chars)
  url: string         // HTTP download URL
  mimeType: string    // e.g., 'image/png', 'image/svg+xml'
  size: number        // File size in bytes
  width?: number      // Image width in pixels (if applicable)
  height?: number     // Image height in pixels (if applicable)
}

​
Usage Example

// Fetch code for current selection
const result = await tools.get_code({
  preferredLang: 'jsx',
  resolveTokens: false
})

console.log(result.code)        // JSX/Vue markup
console.log(result.lang)        // Actual language used
console.log(result.assets)      // Array of asset descriptors
console.log(result.tokens)      // Token metadata

​
Warnings

The warnings array may include:
​
truncated
warning
Type: depth-capThe response was truncated due to depth limits. The data field includes a cappedNodes array with node IDs that were not fully expanded.Action: Call get_code again for each listed nodeId to retrieve the full subtree.
​
auto-layout
warning
Type: auto-layoutAuto-layout was inferred or uncertain. Layout may not be precise.Action: Use get_structure to confirm hierarchy and overlap with explicit geometry.
​
budget-exceeded
error
Type: Error (not a warning)The output exceeded the payload size limit (~4MB). The error message includes current consumption, limit, and overage.Action: Pass a smaller subtree nodeId to narrow scope, then retry.
Strip data-hint-* attributes from the generated code. These attributes are for agent reasoning only and should not appear in production code.

​
get_structure

Retrieve a compact structural and geometry outline for understanding node hierarchy, layout intent, and overlap.
​
nodeId
string
Target node ID to outline. If omitted, uses the current single selection.
​
options.depth
number
Limit traversal depth. If omitted, traverses the full tree (subject to safety caps).

​
Response Schema

{
  roots: OutlineNode[]  // Array of root nodes in the outline
}

type OutlineNode = {
  id: string           // Figma node ID
  name: string         // Node name
  type: string         // Node type (e.g., 'FRAME', 'TEXT', 'RECTANGLE')
  x: number            // X coordinate relative to parent
  y: number            // Y coordinate relative to parent
  width: number        // Width in pixels
  height: number       // Height in pixels
  children?: OutlineNode[]  // Child nodes (if any)
}

​
Usage Example

// Get structure for current selection
const structure = await tools.get_structure({})

// Get structure with depth limit
const limited = await tools.get_structure({
  options: { depth: 3 }
})

console.log(structure.roots[0].id)       // Root node ID
console.log(structure.roots[0].children) // Child nodes
Use get_structure when get_code warnings indicate auto-layout uncertainty or when you need explicit geometry for layout refactoring.

​
get_screenshot

This tool is not exposed by default. It may be enabled in future versions for visual verification of layering, overlap, masks, and effects.
Capture a rendered PNG screenshot of a node for visual verification.
​
nodeId
string
Target node ID to screenshot. If omitted, uses the current single selection.

​
Response Schema

{
  format: 'png'
  width: number         // Screenshot width in pixels
  height: number        // Screenshot height in pixels
  scale: number         // Render scale (e.g., 2 for @2x)
  bytes: number         // File size in bytes
  asset: AssetDescriptor // Asset with download URL
}

​
get_token_defs

This tool is not exposed by default. Use the tokens field from get_code responses instead.
Resolve canonical token names to literal values, optionally including all modes.
​
names
string[]
required
Array of canonical token names in CSS variable form (e.g., --color-primary). Must start with --.
​
includeAllModes
boolean
default:"false"
When true, includes all token modes (light, dark, etc.) instead of just the active mode.

​
Response Schema

{
  [canonicalName: string]: {
    kind: 'color' | 'number' | 'string' | 'boolean'
    value: string | Record<string, string> // Single mode or multi-mode map
  }
}

​
get_assets

This is a hub-only tool not exposed to agents. Asset URLs are included directly in get_code and get_screenshot responses.
Resolve asset hashes to downloadable URLs and metadata.
​
hashes
string[]
required
Array of asset hashes (8 hex characters) from tool responses.

​
Response Schema

{
  assets: AssetDescriptor[]  // Resolved assets
  missing: string[]          // Hashes that were not found
}

​
Error Handling

All tools may return these error codes:
​
NO_ACTIVE_EXTENSION
error
No TemPad Dev extension is connected or active.Troubleshooting:
  • Open TemPad Dev panel in Figma and enable MCP
  • Click the MCP badge to activate the tab if multiple tabs are open
  • Keep the Figma tab active while running MCP tools
​
INVALID_SELECTION
error
The selection is invalid or empty.Action: Select exactly one visible node, or pass a valid nodeId.
​
NODE_NOT_VISIBLE
error
The target node is not visible (hidden layer or outside viewport).Action: Ensure the node is visible and not in a collapsed group.
​
EXTENSION_TIMEOUT
error
The extension did not respond within the timeout period (default 15 seconds).Action: Try a smaller selection or increase TEMPAD_MCP_TOOL_TIMEOUT.
​
EXTENSION_DISCONNECTED
error
The extension disconnected during the operation.Action: Refresh the Figma tab and ensure MCP is enabled.

​
Best Practices

Start with get_code

Use get_code as your primary source of truth for design implementation. It provides complete markup, styles, assets, and configuration.

Use get_structure for clarity

When get_code warnings mention auto-layout inference, call get_structure to verify hierarchy and positioning.

Handle depth-cap warnings

If truncation warnings appear, make additional get_code calls for each capped node ID to retrieve the full subtree.

Download assets immediately

Asset URLs are ephemeral. Download bytes from asset.url as soon as you receive them and store them in your project’s asset pipeline.
For best results pairing MCP with coding agents, install the TemPad Dev agent skill which provides workflows for translating designs into production-ready UI code.

Build docs developers (and LLMs) love

Get started for freeTalk to us