Skip to main content
Glama

F2C MCP Server

MCP Server npm version npm downloads github node

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

  1. Configure the Server in an MCP-supported IDE (e.g., Cursor, Trae).

recommended to use Comate AI IDE

  1. Open your chat in IDE (e.g. agent mode in Cursor).

  2. Paste a link to a Figma Node (Right-click any node in the Figma Layer panel to copy it).

  3. 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 tools
figma_get_file_dataC

Get detailed information about a Figma file

ParametersJSON Schema
NameRequiredDescriptionDefault
branch_dataNoSpecify whether to return branch data
depthNoSpecify the depth of nodes to return
fileKeyYesUnique identifier of the Figma file
geometryNoSpecify whether to include geometry path data
idsYesList of node IDs to retrieve, comma separated
personalTokenNoYour Figma personal access token
plugin_dataNoSpecify plugin data to return
versionNoSpecify the version to return

TDQS

C2.9/5.0
Behavior2/5

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.

Conciseness5/5

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.

Completeness2/5

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.

Parameters3/5

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.

Purpose4/5

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.

Usage Guidelines2/5

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

ParametersJSON Schema
NameRequiredDescriptionDefault
fileKeyYesUnique identifier of the Figma file
personalTokenNoYour Figma personal access token

TDQS

B3.1/5.0
Behavior2/5

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.

Conciseness5/5

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.

Completeness3/5

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.

Parameters3/5

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.

Purpose4/5

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.

Usage Guidelines2/5

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

ParametersJSON Schema
NameRequiredDescriptionDefault
fileKeyYesUnique identifier of the Figma file
personalTokenNoYour Figma personal access token

TDQS

B3.1/5.0
Behavior2/5

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.

Conciseness5/5

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.

Completeness3/5

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.

Parameters3/5

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.

Purpose4/5

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.

Usage Guidelines2/5

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

ParametersJSON Schema
NameRequiredDescriptionDefault
fileKeyYesUnique identifier of the Figma file
formatNoImage format, e.g., png, jpg, svg
idsYesNode IDs to get images for, comma separated
personalTokenNoYour Figma personal access token
scaleNoImage scale factor
svg_include_idNoWhether SVG includes ID
svg_simplify_strokeNoWhether to simplify SVG strokes
use_absolute_boundsNoWhether to use absolute bounds
versionNoSpecify the version to return

TDQS

C2.9/5.0
Behavior2/5

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.

Conciseness5/5

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.

Completeness2/5

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.

Parameters3/5

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.

Purpose4/5

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.

Usage Guidelines2/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
fileKeyYesThe 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.
formatNoThe 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
idsYesList 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'.
personalTokenNoYour Figma personal access token

TDQS

B3.4/5.0
Behavior2/5

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.

Conciseness5/5

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.

Completeness2/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines3/5

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.

  1. 5 tool updatesv1.0.0
    • First observedfigma_get_file_data
    • First observedfigma_get_file_meta
    • First observedfigma_get_image_fills
    • First observedfigma_get_images
    • First observedfigma_to_code

TDQS

B3.2/5.0
Disambiguation3/5

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.

Naming Consistency5/5

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.

Tool Count4/5

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.

Completeness3/5

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

ActivityInactive
ResponsivenessUnresponsive

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

Latest Blog Posts

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