MCP server for converting Figma designs to production-ready code (HTML, React with CSS Modules, React with Tailwind)
F2C MCP provides 5 tools with complete input schemas and descriptions, but quality is uneven. Tool names follow verb_noun convention (get_code, get_image, figma_to_code, figma_get_file_data, figma_get_images). Descriptions range from adequate (get_code: 280 chars) to verbose (get_image: 380 chars). All tools have typed parameters with enums for format/scale constraints. However, output schemas are entirely undocumented, no response structure is defined anywhere in the source. Error handling is absent; no guidance on retryability, user-fixable vs fatal errors, or recovery paths. Parameter descriptions are functional but lack dependency hints (e.g., 'personalToken is optional but required if not set in environment'). The personalToken parameter appears in all tools but is marked optional with a vague note 'The parameters are not required when the tool is called', this is confusing and violates secret-injection pattern (should never be a parameter at all). No tool declares permissions or audit requirements.
Get detailed information about a Figma file
Get images of Figma nodes
Transform Figma designs into production-ready code. This tool converts selected Figma nodes into HTML,enabling seamless design-to-code workflow.
Generate UI code for a given node or the currently selected node in the Figma desktop app. Use the nodeId parameter to specify a node id. If no node id is provided, the currently selected node will be used. If a URL is provided, extract the node id from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be 1:2.
Generate an image for a given node or the currently selected node in the Figma desktop app. Use the nodeId parameter to specify a node id. If no node id is provided, the currently selected node will be used. If a URL is provided, extract the node id from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be 1:2. Also export Figma design images for visual verification and design fidelity validation. Essential for comparing generated code output against original designs, ensuring pixel-perfect implementation and catching visual discrepancies during the design-to-code process.
No output schemas documented. Tools return data but LLMs cannot plan downstream calls or extract fields. Violates pattern:tool and pattern:response-shaper.
personalToken exposed as optional parameter in all 5 tools. Violates pattern:secret-injection, credentials must use server-side injection, not tool params. Agent traces log all parameters, leaking secrets.
figma_get_file_data and figma_get_images have minimal descriptions (40 chars each). Insufficient for LLM tool selection. Descriptions must explain WHAT, WHEN, and WHY to use each tool.
Inferred effective spec: <=2025-11-25.
| Scored | Grade | Overall | Spec posture | Rubric |
|---|---|---|---|---|
| 2026-09-23 | D | 53 | <=2025-11-25 | v2 |
No error handling or recovery guidance. Tools provide no indication of retryability, user-fixable errors, or next steps on failure. Violates pattern:recovery-guide.
Naming ambiguity: figma_get_file_data vs figma_get_images vs get_image. LLMs may conflate figma_get_images (batch) with get_image (single). Violates review:name-clarity.