MCP Tools
figma_to_codebase
Pull a Figma component into your codebase as a structured payload your AI can turn into code.
Reads a component or component-set from Figma and returns a structured description — layout, styles, text, variants, and child structure — that your AI agent uses to write the component file. Your AI reads the payload and writes the code itself; the tool does not emit source code directly, which keeps the result aligned with your project's framework, conventions, and folder layout. If you have confirmed a design system in the plugin, matching colors, spacing, typography, and radius values come back as design-system token references, so code generated from Figma keeps the same tokens as code you later send back to Figma.
Parameters
| Name | Type | Required | Description |
|---|---|---|---|
| nodeId | string | Required | The Figma node ID of a COMPONENT or COMPONENT_SET to pull into your codebase. |
Example prompt
Try asking: Pull the Banner component from Figma into our repo as a React component.
Tips
- Select the component (or component-set) in Figma first so your AI can grab its node ID with get_selected_node.
- Confirm a design system in the plugin before pulling so the payload comes back with token references instead of raw hex values.
- Ask your AI to match the framework and file conventions of an existing component in your codebase for consistent output.