How should figma-codegen-mcp be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this mcp.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

Crawler Summary

figma-codegen-mcp answer-first brief

MCP Server to convert Figma Design to pseudo-code like structure - simple yet efficient for LLMs to understand design context. Figma MCP Server MCP Server to convert Figma Design to pseudo-code like structure - simple yet efficient for LLMs to understand design context. Features - Connect to Figma API and get pseudo-code for the given Design. For visual context, can also fetch images. - Supports generating pseudo-code for design system components & semantic HTML content. - Just share Figma Design URL with MCP client and it will extract the f Published capability contract available. No trust telemetry is available yet. 5 GitHub stars reported by the source. Last updated 2/24/2026.

Freshness

Last checked 2/22/2026

Best For

Contract is available with explicit auth and schema references.

Not Ideal For

figma-codegen-mcp is not ideal for teams that need stronger public trust telemetry, lower setup complexity, or more explicit contract coverage before production rollout.

Evidence Sources Checked

editorial-content, capability-contract, runtime-metrics, public facts pack

Card Facts Snapshot Contract Trust

Claim this agent

Agent DossierGitHubSafety: 80/100

figma-codegen-mcp

MCPverified

Public facts

Change events

Artifacts

Freshness

Feb 22, 2026

Verifiededitorial-content1 verified compatibility signal5 GitHub stars

Published capability contract available. No trust telemetry is available yet. 5 GitHub stars reported by the source. Last updated 2/24/2026.

5 GitHub starsSchema refs publishedTrust evidence available

Trust score

Unknown

Compatibility

MCP

Freshness

Feb 22, 2026

Vendor

Toddle Edu

Artifacts

Benchmarks

Last release

1.0.11

Executive Summary

Key links, install path, and a quick operational read before the deeper crawl record.

Verifiededitorial-content

Summary

Published capability contract available. No trust telemetry is available yet. 5 GitHub stars reported by the source. Last updated 2/24/2026.

View Source

Setup snapshot

git clone https://github.com/toddle-edu/figma-mcp-server.git

1
Setup complexity is MEDIUM. Standard integration tests and API key provisioning are required before connecting this to production workloads.
2
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Evidence Ledger

Everything public we have scraped or crawled about this agent, grouped by evidence type with provenance.

Verifiededitorial-content

Vendor (1)

Vendor

Toddle Edu

profilemedium

Observed Feb 24, 2026Source link Provenance

Compatibility (2)

Protocol compatibility

MCP

contracthigh

Observed Feb 24, 2026Source link Provenance

Auth modes

mcp, api_key

contracthigh

Observed Feb 24, 2026Source link Provenance

Artifact (1)

Machine-readable schemas

OpenAPI or schema references published

contracthigh

Observed Feb 24, 2026Source link Provenance

Adoption (1)

Adoption signal

5 GitHub stars

profilemedium

Observed Feb 24, 2026Source link Provenance

Security (1)

Handshake status

UNKNOWN

trustmedium

Observed unknownSource link Provenance

Integration (1)

Crawlable docs

6 indexed pages on the official domain

search_documentmedium

Observed Apr 15, 2026Source link Provenance

Release & Crawl Timeline

Merged public release, docs, artifact, benchmark, pricing, and trust refresh events.

Self-declaredagent-index

Docs Update

Docs refreshed: Sign in to GitHub · GitHub

search_documentmedium

Fresh crawlable documentation was indexed for the official domain.

Observed Apr 15, 2026

Artifacts Archive

Extracted files, examples, snippets, parameters, dependencies, permissions, and artifact metadata.

Self-declaredGITHUB MCP

Extracted files

Examples

Snippets

Languages

typescript

Executable Examples

json

"Figma MCP Server": {
      "command": "npx",
      "args": ["-y", "figma-codegen-mcp", "--figma_api_key=<YOUR-FIGMA-PERSONAL-ACCESS-TOKEN>"]
    }

bash

git clone <repository-url>
cd figma-mcp-server
npm install
npm run build

bash

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env
# Edit .env and add your FIGMA_API_TOKEN

# Start development server with hot reloading
npm run dev

# Or build for production
npm run build

# Start production server
npm start

text

https://www.figma.com/design/ABC123XYZ/My-Design?node-id=1200%3A23&t=randomstring
                              ↑                          ↑
                          fileKey                      nodeId (URL encoded)

Docs & README

Full documentation captured from public sources, including the complete README when available.

Self-declaredGITHUB MCP

Docs source

GITHUB MCP

Editorial quality

ready

Full README

Figma MCP Server

MCP Server to convert Figma Design to pseudo-code like structure - simple yet efficient for LLMs to understand design context.

Features

Connect to Figma API and get pseudo-code for the given Design. For visual context, can also fetch images.
Supports generating pseudo-code for design system components & semantic HTML content.
Just share Figma Design URL with MCP client and it will extract the file key and node ID automatically, calls the appropriate tools to fetch the pseudo-code and/or image.

Setup in MCP clients

    "Figma MCP Server": {
      "command": "npx",
      "args": ["-y", "figma-codegen-mcp", "--figma_api_key=<YOUR-FIGMA-PERSONAL-ACCESS-TOKEN>"]
    }

For local development

Prerequisites

Node.js (v22)
npm

Install & Build

git clone <repository-url>
cd figma-mcp-server
npm install
npm run build

Development Setup

For development with hot reloading:

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env
# Edit .env and add your FIGMA_API_TOKEN

# Start development server with hot reloading
npm run dev

# Or build for production
npm run build

# Start production server
npm start

Usage

This Figma MCP Server provides two main tools for interacting with Figma designs:

Available MCP Tools

1. `fetch_figma_node_image`

Fetches a PNG image of a Figma node or frame and returns it as base64 data.

Description: Downloads a visual representation of any Figma design element (frame, component, layer, etc.) as a PNG image.

Parameters:

fileKey (string, required): The key of the Figma file. Can be found in Figma URLs like figma.com/(file|design)/<fileKey>/...
nodeId (string, required): The ID of the specific node to capture. Found as URL parameter like node-id=<nodeId>

Returns: Base64-encoded PNG image and MIME type.

Example Use Cases:

Getting visual context of design components
Creating documentation with actual design screenshots

2. `generate_pseudo_code_from_figma_frame`

Generates JSX and CSS pseudo-code for a Figma design.

Description: Analyzes Figma design elements and generates corresponding Pseudo HTML + CSS code. The generated code includes semantic HTML structure, CSS properties, and Pseudo-React JSX components based on your figma component library.

Parameters:

fileKey (string, required): The key of the Figma file. Can be found in Figma URLs like figma.com/(file|design)/<fileKey>/...
nodeId (string, required): The ID of the frame/component to convert. Found as URL parameter like node-id=<nodeId>

Returns: Formatted text containing:

CSS styles
JSX component structure
Semantic HTML elements
Clean, readable code formatting

Example Use Cases:

Converting Figma designs to Pseudo - React components
Providing a better code-like representation of figma design to LLM
Integrates design system ( accuracy & quality depends on Figma component library )
Rapid prototyping from designs
Helper in Design-to-code workflow automation

Figma Links Example:

When sharing Figma designs, the URL contains the required parameters:

https://www.figma.com/design/ABC123XYZ/My-Design?node-id=1200%3A23&t=randomstring
                              ↑                          ↑
                          fileKey                      nodeId (URL encoded)

File Key: ABC123XYZ (the part after /design/ or /file/)
Node ID: 1200 (from the node-id parameter, URL decoded)

Integration with MCP Clients

These tools are designed to work with MCP-compatible clients. Simply provide a Figma design URL, and the client can automatically extract the fileKey and nodeId to call the appropriate tools for fetching images and/or generating code.

Kudos:

Inspired by Figma-Context-MCP

Contract & API

Machine endpoints, protocol fit, contract coverage, invocation examples, and guardrails for agent-to-agent use.

Verifiedcapability-contract

Endpoints

Dossier API Snapshot API Contract API Trust API

Contract coverage

Status

ready

Auth

mcp, api_key

Streaming

Data region

global

Protocol support

MCP: verified

Requires: mcp, lang:typescript

Forbidden: none

Guardrails

Operational confidence: medium

Contract is available with explicit auth and schema references.

Trust confidence is not low and verification freshness is acceptable.

Protocol support is explicitly confirmed in contract metadata.

Invocation examples

curl -s "https://xpersona.co/api/v1/agents/mcp-toddle-edu-figma-mcp-server/snapshot"

curl -s "https://xpersona.co/api/v1/agents/mcp-toddle-edu-figma-mcp-server/contract"

curl -s "https://xpersona.co/api/v1/agents/mcp-toddle-edu-figma-mcp-server/trust"

Reliability & Benchmarks

Trust and runtime signals, benchmark suites, failure patterns, and practical risk constraints.

Missingruntime-metrics

Trust signals

Handshake

UNKNOWN

Confidence

unknown

Attempts 30d

unknown

Fallback rate

unknown

Runtime metrics

Observed P50

unknown

Observed P95

unknown

Rate limit

unknown

Estimated cost

unknown

No benchmark suites or observed failure patterns are available.

Media & Demo

Every public screenshot, visual asset, demo link, and owner-provided destination tied to this agent.

Missingno-media

No screenshots, media assets, or demo links are available.

Related Agents

Neighboring agents from the same protocol and source ecosystem for comparison and shortlist building.

Self-declaredprotocol-neighbors

GITLAB_AI_CATALOGgitlab-mcp

Rank

A Model Context Protocol (MCP) server for GitLab

Traction

No public download signal

Freshness

Updated 2d ago

MCP

GITLAB_PUBLIC_PROJECTSgitlab-mcp

Rank

A Model Context Protocol (MCP) server for GitLab

Traction

No public download signal

Freshness

Updated 2d ago

MCP

GITLAB_AI_CATALOGrmcp-openapi

Rank

Expose OpenAPI definition endpoints as MCP tools using the official Rust SDK for the Model Context Protocol (https://github.com/modelcontextprotocol/rust-sdk)

Traction

No public download signal

Freshness

Updated 2d ago

MCP

GITLAB_AI_CATALOGrmcp-actix-web

Rank

An actix_web backend for the official Rust SDK for the Model Context Protocol (https://github.com/modelcontextprotocol/rust-sdk)

Traction

No public download signal

Freshness

Updated 2d ago

MCP

Machine Appendix

Contract JSON

{
  "contractStatus": "ready",
  "authModes": [
    "mcp",
    "api_key"
  ],
  "requires": [
    "mcp",
    "lang:typescript"
  ],
  "forbidden": [],
  "supportsMcp": true,
  "supportsA2a": false,
  "supportsStreaming": false,
  "inputSchemaRef": "https://github.com/toddle-edu/figma-mcp-server#input",
  "outputSchemaRef": "https://github.com/toddle-edu/figma-mcp-server#output",
  "dataRegion": "global",
  "contractUpdatedAt": "2026-02-24T19:46:50.727Z",
  "sourceUpdatedAt": "2026-02-24T19:46:50.727Z",
  "freshnessSeconds": 4443203
}

Invocation Guide

{
  "preferredApi": {
    "snapshotUrl": "https://xpersona.co/api/v1/agents/mcp-toddle-edu-figma-mcp-server/snapshot",
    "contractUrl": "https://xpersona.co/api/v1/agents/mcp-toddle-edu-figma-mcp-server/contract",
    "trustUrl": "https://xpersona.co/api/v1/agents/mcp-toddle-edu-figma-mcp-server/trust"
  },
  "curlExamples": [
    "curl -s \"https://xpersona.co/api/v1/agents/mcp-toddle-edu-figma-mcp-server/snapshot\"",
    "curl -s \"https://xpersona.co/api/v1/agents/mcp-toddle-edu-figma-mcp-server/contract\"",
    "curl -s \"https://xpersona.co/api/v1/agents/mcp-toddle-edu-figma-mcp-server/trust\""
  ],
  "jsonRequestTemplate": {
    "query": "summarize this repo",
    "constraints": {
      "maxLatencyMs": 2000,
      "protocolPreference": [
        "MCP"
      ]
    }
  },
  "jsonResponseTemplate": {
    "ok": true,
    "result": {
      "summary": "...",
      "confidence": 0.9
    },
    "meta": {
      "source": "GITHUB_MCP",
      "generatedAt": "2026-04-17T06:00:14.283Z"
    }
  },
  "retryPolicy": {
    "maxAttempts": 3,
    "backoffMs": [
      500,
      1500,
      3500
    ],
    "retryableConditions": [
      "HTTP_429",
      "HTTP_503",
      "NETWORK_TIMEOUT"
    ]
  }
}

Trust JSON

{
  "status": "unavailable",
  "handshakeStatus": "UNKNOWN",
  "verificationFreshnessHours": null,
  "reputationScore": null,
  "p95LatencyMs": null,
  "successRate30d": null,
  "fallbackRate": null,
  "attempts30d": null,
  "trustUpdatedAt": null,
  "trustConfidence": "unknown",
  "sourceUpdatedAt": null,
  "freshnessSeconds": null
}

Capability Matrix

{
  "rows": [
    {
      "key": "MCP",
      "type": "protocol",
      "support": "supported",
      "confidenceSource": "contract",
      "notes": "Confirmed by capability contract"
    },
    {
      "key": "figma",
      "type": "capability",
      "support": "supported",
      "confidenceSource": "profile",
      "notes": "Declared in agent profile metadata"
    },
    {
      "key": "mcp",
      "type": "capability",
      "support": "supported",
      "confidenceSource": "profile",
      "notes": "Declared in agent profile metadata"
    },
    {
      "key": "design-to-code",
      "type": "capability",
      "support": "supported",
      "confidenceSource": "profile",
      "notes": "Declared in agent profile metadata"
    },
    {
      "key": "figma-to-code",
      "type": "capability",
      "support": "supported",
      "confidenceSource": "profile",
      "notes": "Declared in agent profile metadata"
    },
    {
      "key": "ai-figma-to-code",
      "type": "capability",
      "support": "supported",
      "confidenceSource": "profile",
      "notes": "Declared in agent profile metadata"
    },
    {
      "key": "figma-mcp",
      "type": "capability",
      "support": "supported",
      "confidenceSource": "profile",
      "notes": "Declared in agent profile metadata"
    },
    {
      "key": "pseudo-code",
      "type": "capability",
      "support": "supported",
      "confidenceSource": "profile",
      "notes": "Declared in agent profile metadata"
    },
    {
      "key": "prototyping",
      "type": "capability",
      "support": "supported",
      "confidenceSource": "profile",
      "notes": "Declared in agent profile metadata"
    },
    {
      "key": "cli",
      "type": "capability",
      "support": "supported",
      "confidenceSource": "profile",
      "notes": "Declared in agent profile metadata"
    }
  ],
  "flattenedTokens": "protocol:MCP|supported|contract capability:figma|supported|profile capability:mcp|supported|profile capability:design-to-code|supported|profile capability:figma-to-code|supported|profile capability:ai-figma-to-code|supported|profile capability:figma-mcp|supported|profile capability:pseudo-code|supported|profile capability:prototyping|supported|profile capability:cli|supported|profile"
}

Facts JSON

[
  {
    "factKey": "docs_crawl",
    "category": "integration",
    "label": "Crawlable docs",
    "value": "6 indexed pages on the official domain",
    "href": "https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar",
    "sourceUrl": "https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar",
    "sourceType": "search_document",
    "confidence": "medium",
    "observedAt": "2026-04-15T05:03:46.393Z",
    "isPublic": true
  },
  {
    "factKey": "protocols",
    "category": "compatibility",
    "label": "Protocol compatibility",
    "value": "MCP",
    "href": "https://xpersona.co/api/v1/agents/mcp-toddle-edu-figma-mcp-server/contract",
    "sourceUrl": "https://xpersona.co/api/v1/agents/mcp-toddle-edu-figma-mcp-server/contract",
    "sourceType": "contract",
    "confidence": "high",
    "observedAt": "2026-02-24T19:46:50.727Z",
    "isPublic": true
  },
  {
    "factKey": "auth_modes",
    "category": "compatibility",
    "label": "Auth modes",
    "value": "mcp, api_key",
    "href": "https://xpersona.co/api/v1/agents/mcp-toddle-edu-figma-mcp-server/contract",
    "sourceUrl": "https://xpersona.co/api/v1/agents/mcp-toddle-edu-figma-mcp-server/contract",
    "sourceType": "contract",
    "confidence": "high",
    "observedAt": "2026-02-24T19:46:50.727Z",
    "isPublic": true
  },
  {
    "factKey": "schema_refs",
    "category": "artifact",
    "label": "Machine-readable schemas",
    "value": "OpenAPI or schema references published",
    "href": "https://github.com/toddle-edu/figma-mcp-server#input",
    "sourceUrl": "https://xpersona.co/api/v1/agents/mcp-toddle-edu-figma-mcp-server/contract",
    "sourceType": "contract",
    "confidence": "high",
    "observedAt": "2026-02-24T19:46:50.727Z",
    "isPublic": true
  },
  {
    "factKey": "vendor",
    "category": "vendor",
    "label": "Vendor",
    "value": "Toddle Edu",
    "href": "https://github.com/toddle-edu/figma-mcp-server#readme",
    "sourceUrl": "https://github.com/toddle-edu/figma-mcp-server#readme",
    "sourceType": "profile",
    "confidence": "medium",
    "observedAt": "2026-02-24T19:43:14.176Z",
    "isPublic": true
  },
  {
    "factKey": "traction",
    "category": "adoption",
    "label": "Adoption signal",
    "value": "5 GitHub stars",
    "href": "https://github.com/toddle-edu/figma-mcp-server",
    "sourceUrl": "https://github.com/toddle-edu/figma-mcp-server",
    "sourceType": "profile",
    "confidence": "medium",
    "observedAt": "2026-02-24T19:43:14.176Z",
    "isPublic": true
  },
  {
    "factKey": "handshake_status",
    "category": "security",
    "label": "Handshake status",
    "value": "UNKNOWN",
    "href": "https://xpersona.co/api/v1/agents/mcp-toddle-edu-figma-mcp-server/trust",
    "sourceUrl": "https://xpersona.co/api/v1/agents/mcp-toddle-edu-figma-mcp-server/trust",
    "sourceType": "trust",
    "confidence": "medium",
    "observedAt": null,
    "isPublic": true
  }
]

Change Events JSON

[
  {
    "eventType": "docs_update",
    "title": "Docs refreshed: Sign in to GitHub · GitHub",
    "description": "Fresh crawlable documentation was indexed for the official domain.",
    "href": "https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar",
    "sourceUrl": "https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar",
    "sourceType": "search_document",
    "confidence": "medium",
    "observedAt": "2026-04-15T05:03:46.393Z",
    "isPublic": true
  }
]

figma-codegen-mcp answer-first brief

Executive Summary

Evidence Ledger

Release & Crawl Timeline

Artifacts Archive

Docs & README

Figma MCP Server

Features

Setup in MCP clients

For local development

Prerequisites

Install & Build

Development Setup

Usage

Available MCP Tools

1. fetch_figma_node_image

2. generate_pseudo_code_from_figma_frame

Figma Links Example:

Integration with MCP Clients

Kudos:

Contract & API

Reliability & Benchmarks

Media & Demo

Related Agents

1. `fetch_figma_node_image`

2. `generate_pseudo_code_from_figma_frame`