MCP/Framelink Figma MCP

Framelink Figma MCP

Connect AI to the live Figma API to convert frames, layers, tokens, and components directly into code.

frontend•Design to Code & Figma AI

GitHub16k

License:MIT

VERIFIED

@Framelink

About this Server

Framelink connects AI coding assistants directly to the Figma REST API to fetch exact vector layer hierarchies, auto-layout parameters, design variables, and component metadata as structured data rather than imprecise visual pixels. By pasting any Figma frame URL into your editor chat, your assistant can inspect exact styling, color tokens, typography scales, and asset exports to generate production-ready React, Next.js, and CSS code with high fidelity.

Real-time Interaction

Direct low-latency RPC protocol communication with structured JSON schemas.

Scoped Sandboxing

Restricted capability bounds to prevent accidental modifications or leakage.

Security & Best Practices

Personal Access Token Security: Generate a dedicated Figma Personal Access Token with read-only permissions and store it locally.

Environment Variable Isolation: Keep your Figma API key inside editor configuration files or environment variables; never commit keys to public git repositories.

Scoped Read Access: The MCP server requests only the specific design node hierarchies requested in your prompt.

Zero Design Mutation: The integration performs read-only inspection and asset rendering without altering or deleting any canvas components in your source files.

When to Use (and When Not To)

Best For

•Landing pages and marketing websites with polished typography, complex visual layouts, and responsive spacing
•Dashboard UI and web applications with well-structured Figma auto-layout components and design libraries
•Design system implementations where Figma variables, colors, and radii map cleanly to Tailwind or CSS custom properties
•React and Next.js component development where extracting SVG vectors and exact dimensions accelerates delivery

Not For / Limitations

•Not pixel-perfect: Expect 70 to 90 percent accuracy. Complex interactive logic, backend data fetching, and state management still require developer implementation
•Figma API rate limits: Intensive automated crawling on massive Figma files can trigger Figma REST API rate limits; use specific frame node links rather than whole files
•Offline environments without internet connectivity to the Figma cloud API servers

Install & Setup

One-line terminal command

terminal command

$claude mcp add framelink -- npx -y figma-developer-mcp --figma-api-key=YOUR_KEY --stdio

Exposed Tools & Endpoints

5 tools

Functions your AI agent can invoke via this Model Context Protocol server

get_figma_file• callable tool

Retrieve top-level canvas frames, layer trees, and metadata from a Figma file URL or file key.

get_figma_node• callable tool

Inspect detailed layer properties, auto-layout flexbox attributes, fills, strokes, and typography for a specific frame ID.

get_figma_images• callable tool

Render and download high-resolution SVG, PNG, JPG, or PDF asset exports directly from Figma vector nodes.

get_figma_components• callable tool

Fetch reusable component set definitions, variant states, and property contracts from design library files.

get_design_tokens• callable tool

Extract Figma variables, theme collections, color modes, and spacing scales for direct CSS token generation.