Design to code

figma_get_component_for_development

Component data for implementing it in code: the tree with variable bindings, sizes, auto layout and text properties, plus a ready reconstruction specification. Call it on requests like 'build this' or 'make a React component'. When the plugin is running the data comes from it — it is fresher than REST. For metadata alone figma_get_component is enough, for a picture use figma_get_component_image.

Parameter	Type	Required	Default	Description
nodeId	string	yes	—	Node id, for example '1:234'.
fileUrl	string?	—	null	Link to the file. Needed only when the plugin is not running.
depth	integer	—	4	Tree traversal depth.

JSON Schema

{
  "type": "object",
  "properties": {
    "nodeId": {
      "description": "Node id, for example \u00271:234\u0027.",
      "type": "string"
    },
    "fileUrl": {
      "description": "Link to the file. Needed only when the plugin is not running.",
      "type": [
        "string",
        "null"
      ],
      "default": null
    },
    "depth": {
      "description": "Tree traversal depth.",
      "type": "integer",
      "default": 4
    }
  },
  "required": [
    "nodeId"
  ]
}

figma_get_component_for_development_deep

The same as figma_get_component_for_development, but with a deep breakdown through the plugin: states, reactions, slots, Dev Mode annotations. Slower and heavier — take it when the plain breakdown was not enough. Requires the plugin.

Parameter	Type	Required	Default	Description
nodeId	string	yes	—	Node id.

JSON Schema

{
  "type": "object",
  "properties": {
    "nodeId": {
      "description": "Node id.",
      "type": "string"
    }
  },
  "required": [
    "nodeId"
  ]
}

figma_extract_style_values

Pulls token-like values out of the DESIGN — colors, typography, spacing, radii — and collapses duplicates. Works on any Figma plan, unlike figma_get_variables. A good starting point when the file has no variables yet. Not to be confused with figma_ds_extract_tokens: that one mines tokens from the CODEBASE.

Parameter	Type	Required	Default	Description
fileUrl	string?	—	null	Link to the Figma file. Optional if the file has already been used.
nodeId	string?	—	null	Id of the root node. Empty means the whole file.
depth	integer	—	8	Traversal depth.

JSON Schema

{
  "type": "object",
  "properties": {
    "fileUrl": {
      "description": "Link to the Figma file. Optional if the file has already been used.",
      "type": [
        "string",
        "null"
      ],
      "default": null
    },
    "nodeId": {
      "description": "Id of the root node. Empty means the whole file.",
      "type": [
        "string",
        "null"
      ],
      "default": null
    },
    "depth": {
      "description": "Traversal depth.",
      "type": "integer",
      "default": 8
    }
  }
}

figma_check_design_parity

Compares a component in Figma with what is implemented in code. codeSpec is JSON with what you read out of the sources: {"fills":[…],"fontSize":14,"paddingLeft":16,"variants":[…]}. Returns a conformance score and the list of mismatches on both sides. Read the component code first.

Parameter	Type	Required	Default	Description
nodeId	string	yes	—	Id of the component node in Figma.
codeSpec	string	yes	—	Code-side data as a JSON string.
fileUrl	string?	—	null	Link to the file. Needed only when the plugin is not running.

JSON Schema

{
  "type": "object",
  "properties": {
    "nodeId": {
      "description": "Id of the component node in Figma.",
      "type": "string"
    },
    "codeSpec": {
      "description": "Code-side data as a JSON string.",
      "type": "string"
    },
    "fileUrl": {
      "description": "Link to the file. Needed only when the plugin is not running.",
      "type": [
        "string",
        "null"
      ],
      "default": null
    }
  },
  "required": [
    "nodeId",
    "codeSpec"
  ]
}

figma_generate_component_doc

Assembles component documentation in Markdown: contents, variants, colors, typography, spacing, the Figma description and the annotations. codeInfo is optional JSON with data from the sources (props, CVA variants, file paths); it lands in the code section.

Parameter	Type	Required	Default	Description
nodeId	string	yes	—	Id of the component node.
fileUrl	string?	—	null	Link to the file. Needed only when the plugin is not running.
codeInfo	string?	—	null	Code-side data as a JSON string.

JSON Schema

{
  "type": "object",
  "properties": {
    "nodeId": {
      "description": "Id of the component node.",
      "type": "string"
    },
    "fileUrl": {
      "description": "Link to the file. Needed only when the plugin is not running.",
      "type": [
        "string",
        "null"
      ],
      "default": null
    },
    "codeInfo": {
      "description": "Code-side data as a JSON string.",
      "type": [
        "string",
        "null"
      ],
      "default": null
    }
  },
  "required": [
    "nodeId"
  ]
}