figma_to_code
Extract Figma node IDs and convert designs into HTML, React with CSS Modules, or React with Tailwind CSS using MCP server f2c-mcp-server to automate design-to-code workflows.
Instructions
Convert Figma designs into code. This tool extracts specified Figma nodes and transforms them into HTML, React with CSS Modules, or React with Tailwind CSS, facilitating automated design-to-code conversion.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| fileKey | Yes | The unique identifier for a Figma file. Can be found in the Figma file URL, such as: https://www.figma.com/file/XXXXXXXXXXXX/, where XXXXXXXXXXXX is the fileKey. | |
| format | No | The output code format: 'html' for pure HTML and CSS code, 'react-cssmodules' for React components with CSS modules, 'react-tailwind' for React components using Tailwind CSS. | html |
| ids | Yes | List of Figma node IDs to convert, separated by commas. These can be obtained in Figma by selecting elements, right-clicking and choosing 'Copy/Paste as' → 'Copy ID'. | |
| personalToken | No | Your Figma personal access token |