f2c-mcp-server
The F2C MCP Server acts as a Model Context Protocol server for Figma, enabling seamless integration between designs and coding tools. It can:
Convert Figma design nodes into high-fidelity code in multiple formats (HTML/CSS, React with CSS Modules, or React with Tailwind CSS)
Provide Figma design context to AI coding tools like Cursor
Retrieve detailed file information with options for depth, version, geometry, branch data, and plugin data
Get images of specified Figma nodes in various formats (jpg, png, svg, pdf) with scale options
Fetch all image resources used as fills within a Figma file
Access metadata information for Figma files
Support Figma file URLs with fileKey and nodeId parameters
Converts Figma design elements to CSS code, allowing for high-fidelity representation of designs in web development
Enables AI coding assistants to access Figma design data, convert Figma design nodes to high-fidelity HTML/CSS markup, and provide Figma design context to AI coding tools
Links to the project repository for access to the source code and related resources
Provides package distribution through npm, with version tracking and dependency management
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@f2c-mcp-serverconvert this Figma design to React code"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
F2C MCP Server
Due to Figma REST API rate limits, if you are affected, please switch to @f2c/mcp-plugin for normal operation.
English | 简体中文
A Model Context Protocol server for Figma Design to Code using F2C.
Features
🎨 Pixel-Perfect HTML/CSS:F2C converts Figma designs to pixel-perfect HTML/CSS with precision.
⚛️ Multi-Framework Support:F2C generates React, CSS Modules, and Tailwind CSS code for fast development.
🧠 Figma Design Context:F2C integrates design context, ensuring compatibility with AI tools like Cursor.
🔗 Figma File URL Parsing:F2C converts design nodes via Figma URLs, streamlining workflows.
🖼️ Remote Image Localization:F2C automates downloading Figma images to local assets for efficiency.
Related MCP server: mcp-figma
How it works
Configure the Server in an MCP-supported IDE (e.g., Cursor, Trae).
recommended to use Comate AI IDE
Open your chat in IDE (e.g. agent mode in Cursor).
Paste a link to a Figma Node (Right-click any node in the Figma Layer panel to copy it).
Enter your requirements in the chat, such as fetching node data, downloading images, converting to code, etc.
Configuration and Development
See Configuration and Development
Data Privacy Notice
The logging tools integrated in this project are used solely for basic usage statistics and error log reporting. No sensitive information or user data is collected. All reported data is used exclusively to improve product quality and user experience.
FAQ
See FAQ
Credits
Thanks to:
Framelink Figma MCP Server Give Cursor and other AI-powered coding tools access to your Figma files with this Model Context Protocol server.
Cursor Talk to Figma MCP Allowing Cursor to communicate with Figma for reading designs and modifying them programmatically.
Figma MCP Server This server provides tools for viewing, commenting, and analyzing Figma designs directly through the ModelContextProtocol.
Available Tools
5 toolsfigma_get_file_dataC
Get detailed information about a Figma file
| Name | Required | Description | Default |
|---|---|---|---|
| branch_data | No | Specify whether to return branch data | |
| depth | No | Specify the depth of nodes to return | |
| fileKey | Yes | Unique identifier of the Figma file | |
| geometry | No | Specify whether to include geometry path data | |
| ids | Yes | List of node IDs to retrieve, comma separated | |
| personalToken | No | Your Figma personal access token | |
| plugin_data | No | Specify plugin data to return | |
| version | No | Specify the version to return |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure but only states what the tool does without mentioning permissions, rate limits, or output format. It lacks details on authentication needs (implied by 'personalToken' parameter but not explained), potential data size, or error handling, making it insufficient for safe and effective use.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, front-loaded sentence that directly states the tool's purpose without unnecessary words. It's appropriately sized for a simple retrieval tool, making it efficient and easy to parse.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the complexity of 8 parameters, no annotations, and no output schema, the description is incomplete. It doesn't address how the tool behaves, what the output includes, or usage context, leaving significant gaps for an AI agent to understand and invoke the tool correctly in a real-world scenario.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema description coverage is 100%, so the schema already documents all parameters thoroughly. The description adds no additional meaning beyond implying 'detailed information' relates to the parameters, but it doesn't explain how parameters like 'depth' or 'geometry' affect the output, resulting in a baseline score with minimal added value.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('Get') and resource ('detailed information about a Figma file'), making the purpose understandable. However, it doesn't differentiate from sibling tools like 'figma_get_file_meta' which might retrieve similar metadata, leaving some ambiguity about what distinguishes 'detailed information' from meta information.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is provided on when to use this tool versus alternatives. The description doesn't mention sibling tools or contexts where this tool is preferred, such as for retrieving node-specific data versus file metadata, leaving the agent without usage direction.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
figma_get_file_metaB
Get metadata information for a Figma file
| Name | Required | Description | Default |
|---|---|---|---|
| fileKey | Yes | Unique identifier of the Figma file | |
| personalToken | No | Your Figma personal access token |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It states it's a 'Get' operation, implying read-only, but doesn't clarify authentication needs (though the schema hints at 'personalToken'), rate limits, error handling, or what metadata is included. This leaves significant gaps for a tool with no annotation coverage.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, clear sentence with zero waste. It's appropriately sized and front-loaded, efficiently conveying the core purpose without unnecessary details.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's low complexity (2 parameters, no output schema, no annotations), the description is minimally adequate. It covers the basic purpose but lacks behavioral details and usage context, making it incomplete for optimal agent operation without additional inference.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema fully documents the two parameters ('fileKey' and 'personalToken'). The description adds no additional meaning beyond what the schema provides, such as examples or context for the parameters, but the baseline is 3 when schema coverage is high.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the verb ('Get') and resource ('metadata information for a Figma file'), making the purpose understandable. However, it doesn't differentiate from sibling tools like 'figma_get_file_data' or 'figma_get_images', which likely retrieve different types of file information, so it doesn't reach the highest score.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. It doesn't mention sibling tools or contexts where this metadata retrieval is preferred over other file-related operations, leaving the agent to infer usage based on tool names alone.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
figma_get_image_fillsB
Get all image resources in the specified Figma file
| Name | Required | Description | Default |
|---|---|---|---|
| fileKey | Yes | Unique identifier of the Figma file | |
| personalToken | No | Your Figma personal access token |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It states it's a 'Get' operation, implying read-only behavior, but doesn't clarify aspects like authentication needs (though 'personalToken' is in the schema), rate limits, error handling, or what 'image resources' entails (e.g., formats, metadata). This is a significant gap for a tool with no annotation coverage.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's purpose without any fluff or redundancy. It's appropriately sized and front-loaded, making it easy for an agent to parse quickly.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's moderate complexity (2 parameters, no output schema, no annotations), the description is minimally adequate. It covers the basic purpose but lacks details on usage guidelines, behavioral traits, and output expectations, which are needed for full contextual understanding. Without annotations or an output schema, the description should do more to compensate.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema description coverage is 100%, with clear descriptions for both parameters ('fileKey' and 'personalToken'), so the schema does the heavy lifting. The description adds no additional meaning beyond implying the tool operates on a 'specified Figma file', which aligns with the schema but doesn't provide extra context like file format or token usage details.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('Get') and resource ('all image resources in the specified Figma file'), making the purpose immediately understandable. However, it doesn't explicitly differentiate from sibling tools like 'figma_get_images' or 'figma_get_file_data', which might also retrieve image-related data, so it doesn't reach a perfect score.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. With sibling tools like 'figma_get_images' and 'figma_get_file_data' that might overlap in functionality, there's no indication of context, prerequisites, or exclusions, leaving the agent to guess based on tool names alone.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
figma_get_imagesC
Get images of Figma nodes
| Name | Required | Description | Default |
|---|---|---|---|
| fileKey | Yes | Unique identifier of the Figma file | |
| format | No | Image format, e.g., png, jpg, svg | |
| ids | Yes | Node IDs to get images for, comma separated | |
| personalToken | No | Your Figma personal access token | |
| scale | No | Image scale factor | |
| svg_include_id | No | Whether SVG includes ID | |
| svg_simplify_stroke | No | Whether to simplify SVG strokes | |
| use_absolute_bounds | No | Whether to use absolute bounds | |
| version | No | Specify the version to return |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. The description only states what the tool does ('Get images'), without mentioning authentication needs (implied by the personalToken parameter), rate limits, response format, or whether it's a read-only operation. For a tool with 9 parameters and no annotation coverage, this is inadequate.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence with zero waste. It's front-loaded and appropriately sized for the tool's complexity, making it easy to parse quickly without unnecessary elaboration.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (9 parameters, no annotations, no output schema), the description is incomplete. It doesn't address authentication, rate limits, error handling, or how the output is structured (e.g., image URLs or binary data). For a tool that likely involves API calls and image retrieval, more context is needed to guide effective use.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema description coverage is 100%, meaning all parameters are documented in the input schema. The description adds no additional meaning beyond the schema, such as explaining relationships between parameters (e.g., how 'scale' affects image quality) or usage examples. With high schema coverage, the baseline score of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description 'Get images of Figma nodes' clearly states the verb ('Get') and resource ('images of Figma nodes'), making the purpose immediately understandable. However, it doesn't differentiate from sibling tools like 'figma_get_image_fills' or 'figma_get_file_data', which also retrieve visual data from Figma files, so it lacks sibling differentiation.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. It doesn't mention context, prerequisites, or exclusions, leaving the agent to infer usage from the tool name and parameters alone. This is a significant gap given sibling tools like 'figma_get_image_fills' that might overlap in functionality.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
figma_to_codeB
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.
| 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 |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It mentions the transformation process but lacks details on behavioral traits such as rate limits, error handling, authentication requirements (though hinted by the 'personalToken' parameter), or output structure. This is inadequate for a tool with mutation-like behavior (conversion).
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is front-loaded with the core purpose in the first sentence, followed by specifics on extraction and transformation. It uses two concise sentences with zero wasted words, efficiently conveying the tool's functionality without redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the complexity of a conversion tool with no annotations and no output schema, the description is insufficient. It lacks details on behavioral aspects (e.g., authentication, rate limits), error cases, and the structure of the generated code. This leaves significant gaps for an AI agent to understand how to invoke and interpret results effectively.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema fully documents all four parameters. The description adds minimal value by mentioning the output formats ('HTML, React with CSS Modules, or React with Tailwind CSS'), which aligns with the 'format' parameter's enum, but does not provide additional semantics beyond what the schema already covers.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the specific action ('convert Figma designs into code'), the resource ('specified Figma nodes'), and the transformation ('HTML, React with CSS Modules, or React with Tailwind CSS'). It distinguishes from sibling tools like 'figma_get_file_data' by focusing on code generation rather than data/metadata retrieval.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage for automated design-to-code conversion but does not explicitly state when to use this tool versus alternatives like the sibling tools (e.g., 'figma_get_file_data' for raw data). No guidance on prerequisites or exclusions is provided, leaving the context somewhat open-ended.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
5 tool updates
v1.0.0- First observed
figma_get_file_data - First observed
figma_get_file_meta - First observed
figma_get_image_fills - First observed
figma_get_images - First observed
figma_to_code
TDQS
The tools have some overlap in purpose, particularly between 'figma_get_file_data' and 'figma_get_file_meta', which could cause confusion about which to use for general file information. However, descriptions help clarify distinctions, such as 'figma_get_image_fills' for image resources versus 'figma_get_images' for node images, and 'figma_to_code' has a unique conversion function.
All tool names follow a consistent 'figma_' prefix with snake_case and descriptive verb_noun patterns, such as 'get_file_data' and 'to_code'. There are no deviations in naming conventions, making the set predictable and easy to understand.
With 5 tools, the count is reasonable for a Figma-to-code server, covering data retrieval, image handling, and conversion. It's slightly under the ideal range for comprehensive coverage but well-scoped for core functionalities without being overwhelming.
The tool set covers key operations like retrieving file data, metadata, images, and converting to code, but there are notable gaps, such as missing update or delete operations for Figma files, and no tools for managing design components or handling user interactions, which limits full lifecycle coverage in the design-to-code domain.
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Connectors
Related MCP Servers
- AlicenseAqualityDmaintenanceAllow your AI coding agents to access Figma files & prototypes directly. You can DM me for any issues / improvements: https://x.com/jasonzhou1993 1. Access all figma pages 2. Access all figma components 3. Access figma prototype flows5367MIT
- FlicenseBqualityNot gradedmaintenanceA Model Context Protocol server that provides access to Figma API functionality, allowing AI assistants like Claude to interact with Figma files, comments, components, and team resources.184504-
- FlicenseBqualityDmaintenanceEnables AI assistants to interact with Figma files through the ModelContextProtocol, allowing viewing, commenting, and analyzing Figma designs directly in chat interfaces.5563213-
- -
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/f2c-ai/f2c-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server