Skip to main content
Glama

Generate Code from Figma

codegen-figma_to_code

Convert a Figma design to production-ready code.

This tool generates code from Figma designs, supporting multiple frameworks and styling options.

Authentication: Requires X-Figma-Token header with your Figma personal access token.

Inputs:

  • fileKey: Figma file key extracted from the URL. For example, from "https://figma.com/design/abc123XYZ/MyDesign", the fileKey is "abc123XYZ".

  • nodesId: Array of Figma node IDs to convert. Extract from the URL's node-id parameter, replacing "-" with ":". For example, from "?node-id=1-2", the nodeId is "1:2".

  • framework: Target framework (react, html). Detect from the user's project to match their existing stack.

  • styling: CSS approach (tailwind, plain_css). Detect from the user's project to match their existing styling system.

  • language: TypeScript or JavaScript. Detect from the user's project.

  • uiLibrary: Optional UI component library (mui, antd, shadcn). Detect from the user's project if they use one of the supported libraries.

  • assetsBaseUrl: Base path for assets in generated code

Returns:

  • files: Generated code files as a record of {path: {content, isBinary}}

  • assets: Array of {name, url} for images/assets that need to be downloaded from Figma

  • tokenUsage: Approximate token count for the generation

  • snapshotsUrls: Record of {nodeId: url} with screenshot URLs for each requested node

  • guidelines: IMPORTANT Instructions for using the generated code effectively

Asset Handling: The generated code references assets at the assetsBaseUrl path. You must download the assets from the returned URLs and place them at your assetsBaseUrl location. For example, if assetsBaseUrl is "./assets" and an asset is named "logo.png", the code will reference "./assets/logo.png".

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
fileKeyYesFigma file key extracted from the Figma URL. For example, from "figma.com/design/abc123XYZ/MyDesign", the file key is "abc123XYZ"
nodesIdYesArray of Figma node IDs to generate code for. You can find node IDs in the Figma URL after selecting elements, e.g., "0:1", "123:456"
stylingNoCSS styling approach for the generated code. Defaults to Tailwindtailwind
languageNoProgramming language for the generated code. Defaults to TypeScripttypescript
frameworkNoTarget framework for the generated code. Defaults to Reactreact
uiLibraryNoUI component library or code style to use. Options: "mui" (Material UI), "antd" (Ant Design), "shadcn" (shadcn/ui), "clean_react" (production-ready React with semantic HTML, accessibility, and interactivity - no UI library). If not specified, generates plain React/HTML.
assetsBaseUrlNoBase URL or path for assets in generated code. For example, "./assets" will produce paths like "./assets/logo.png"./assets

Schema Changelog

Changes observed during successful MCP inspections.

  1. Changed1 schema field changed
    • changedInput schema / $schema
      Previous value: -"http://json-schema.org/draft-07/schema#"New value: +"https://json-schema.org/draft/2020-12/schema"
  2. First observed

TDQS

A4.5/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations declare readOnlyHint=true and destructiveHint=false, and the description reinforces this by explaining it converts designs into files. It also discloses the authentication requirement (X-Figma-Token) and the asset-download behavior, which are behavioral details beyond the schema. It stops short of rate limits or failure modes, but the key side effects and prerequisites are covered.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Purpose is front-loaded in a single sentence. The description is organized into labeled sections (Authentication, Inputs, Returns, Asset Handling), which makes it easy to scan. It is somewhat longer than strictly necessary, but every section adds distinct value; no filler or repetition of the input schema.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Even though there is no output schema, the description enumerates the return aspects (generated code files, assets list, usage guidelines) and explains how to handle assets by downloading them from the returned URLs. It also states the auth requirement upfront. For a code-generation tool of this complexity, this is a complete picture an agent needs to invoke it correctly.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters5/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema descriptions already cover the parameters well (with defaults and examples), giving a baseline of 3. The tool description goes further by teaching the agent how to extract fileKey from a URL and how to convert '-' to ':' for node IDs, plus recommending detection from the user's project to pick framework, styling, and language. This is actionable guidance that materially improves parameter selection.

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 opening line states a specific verb and object ('Convert a Figma design to production-ready code') that precisely captures the tool's function. The description continues with concrete parameter explanations)Skip. Among the sibling tools (artifact-create, design_system-get_manifest, etc.), this one is clearly the Figma-to-code converter, so there is no ambiguity about its unique role.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides clear context for when the tool is used (when a Figma design should become code) and gives practical instructions for parameter selection, notably 'Detect from the user's project' for framework, styling, and language. It does not explicitly name alternative tools or state exclusion conditions, but sibling names make the distinction obvious.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Try in Browser

Glama MCP Gateway

Add one secure layer between your agents and this server.