Skip to main content
Extract structured design context from a Figma file or frame for code generation. Returns layout hierarchy, styles, components, and design tokens as YAML optimized for React + Tailwind output.

​
Tool details

FieldValue
Nameextract_figma_design
GroupFigma

​
Playground

​
Input schema

Input schema
{
  "type": "object",
  "properties": {
    "project_reference": {
      "type": "string",
      "description": "Project ID or slug"
    },
    "figma_url": {
      "type": "string",
      "description": "Figma file URL or file key (e.g., \"https://www.figma.com/design/ABC123/...\")"
    },
    "node_id": {
      "type": "string",
      "description": "Specific node/frame ID (overrides node-id from URL)"
    },
    "depth": {
      "type": "number",
      "description": "Max tree depth to traverse (default: 10 for specific nodes, 2 for full files)"
    }
  },
  "required": [
    "project_reference",
    "figma_url"
  ],
  "additionalProperties": false,
  "description": "Input schema for the extract_figma_design tool.",
  "$schema": "http://json-schema.org/draft-07/schema#"
}

​
Output schema

This tool does not publish an output schema.