MCP Tools
codebase_to_figma
Turn a code component into a reusable Figma component or component-set.
Takes a component expressed as HTML with inline styles and creates a matching Figma component on the canvas. If you include multiple sibling elements tagged with data-variant="Key=Value" attributes, the tool builds a component-set with those variants — for example sibling buttons marked data-variant="Size=Small" and data-variant="Size=Large" become a single Button component with a Size property. The tool accepts HTML and inline styles only, so transform JSX, Vue, Svelte, or any other framework source to plain HTML first (or ask your AI to do it for you). When a design system has been confirmed in the plugin, matching color, spacing, typography, and radius values are reused as the same design-system tokens already in your Figma file.
Parameters
| Name | Type | Required | Description |
|---|---|---|---|
| sourceCode | string | Required | The component as HTML with inline styles. Use multiple sibling elements with data-variant="Key=Value" attributes to declare a component-set. |
| name | string | Required | Name for the resulting Figma component. |
| useDesignSystem | boolean | Optional | When true, reuses confirmed design-system tokens wherever the code's values match. Defaults to true. Default: true. |
Example prompt
Tips
- If your component is JSX, Vue, or Svelte, ask your AI to convert it to HTML with inline styles before calling this tool.
- To create variants, place sibling elements with data-variant="Property=Value" attributes (e.g. data-variant="State=Default" and data-variant="State=Hover").
- Confirm your design system in the plugin first — matching colors, spacing, and typography in your code will then reuse the same Figma styles.