Framelink MCP for Figma

by FramelinkConnectorWrite code

Lets your coding agent read Figma layout and style data to build the design you point at

About Framelink MCP for Figma

Framelink MCP for Figma is a connector that gives your coding agent structured data from Figma designs, so it can build UI that matches a design more closely than it can from a screenshot.

For People who use a coding agentUsers of an agent or editor with MCP

Made by Framelink

Framelink publishes the server as an open-source project on GitHub and documents it at framelink.ai.

Stars: ★ 16k
License: MIT
Cost: Usage-based
Level: Intermediate
Runs: Local

Overview

Framelink MCP for Figma is a connector that gives your coding agent structured data from your Figma designs. You paste a link to a Figma file, frame or group, and the agent receives the layout, styles and text instead of a screenshot, then writes the UI from it. It can also save the images and icons in a design to a folder on your computer. It suits people who turn Figma designs into working pages with a coding agent.

The agent works from the design's real layout data rather than a screenshot, which the author says makes the result match the design more closely.

Try these first

Start with the first one: it is a small task you can check easily.

Here is a Figma link: [Figma frame link]. Describe its layout, colours and text in words. Do not write code.First try · read-only
Build this Figma frame as a page in [framework]: [Figma frame link].writes files
Download the images and icons from this frame into [folder]: [Figma frame link].writes files
List the colours and fonts used in this Figma group: [Figma group link].

Example prompts written by Agent Flows Hub.

Capabilities

From the creator's documentation.

Toolset	What your agent can do	Access
get_figma_data	Returns layout, style and text data for a Figma file, or one frame or group in it	Read
download_figma_images	Saves images and icons from a design into a folder on your computer	Read + write files
Link input	Takes a Figma file key and an optional node id, which the agent reads from the link you paste	Read
Output format	Design data comes back as a compact tree, YAML or JSON; the format is set once when the server starts, not per request	Read
Usage telemetry	Sends anonymous usage events by default; opt out with FRAMELINK_TELEMETRY=off or DO_NOT_TRACK	Sends usage data

Good to know

You have a design in Figma and want your coding agent to build it. Paste the link to a file, frame or group; the server returns the layout, style and text data so the agent can write the matching UI in the framework you use.

Limits

Setup needs a Figma personal access token created with the scopes the quickstart lists; a token made with the default scopes does not have what the server needs.
The server reads from the Figma API, so it needs a network connection and a link to a file your token can open.
Figma sets the request limits, and they depend on your seat and on the plan of the file's owner; going over them returns 429 errors, so regular use needs a Dev or Full seat.
Anonymous usage telemetry is on by default (one event per tool call: timing, response shape, errors; Figma credentials scrubbed). Turn it off with FRAMELINK_TELEMETRY=off or DO_NOT_TRACK.

Notes by Agent Flows Hub (original project name: Figma-Context-MCP), written from the creator's documentation, not from running it ourselves. Framelink quickstart · Framelink MCP tools · Framelink configuration · Framelink troubleshooting · Figma REST API rate limits · Figma-Context-MCP README

Stuck setting it up?

Tell us what happened. We take a look first; if it needs paid work, you get an estimate before anything starts.

Get help

How to start

Open your AI agentClaude Code, Codex, Cursor or another agent that supports MCP.
Paste the install requestIt asks your agent to read the official instructions, tell you what it will connect to and wait for your OK.
Give it a first taskPaste a link to one small frame and ask the agent to describe its layout and colours in words, without writing any code.

Steps follow the creator's instructions. The request tells your agent to read them first and wait for your OK.

Before you start

An AI agent that supports MCP, such as Claude Code, Codex or Cursor.
A Figma account and a personal access token with the scopes the quickstart lists
A Figma plan with a Dev or Full seat for regular use
Node.js 20.20 or newer
It connects to the internet. Your agent will show you what before installing.
Pay per use. The AI service it calls charges for what you use.

Details

Made by: Framelink
License: MIT Terms
Works with: Claude Code, Codex, Cursor, OpenCodeAs stated by the creator
Runs on: Your computer

View source Official docs Report a problem

For AI agents

This page as a Markdown install brief:

/en/library/framelink-figma-mcp/install.md

Other connectors

Gamma MCP Lets your AI assistant create, edit and export Gamma presentations, docs and webpages
GitDiagram Turns any public GitHub project into a clickable diagram of how its parts fit together
GitMCP Gives your AI assistant the current docs and code of any GitHub project from one URL
Google Workspace MCP Lets your AI agent work in Gmail, Calendar, Drive, Docs, Sheets and other Google apps
Granola MCP Lets your AI assistant search and answer questions from your Granola meeting notes
ha-mcp for Home Assistant Lets your AI assistant control, build and fix automations in your Home Assistant

See all 57 connectors · An MCP server is missing or disconnected

GitHub