Figma-Context-MCP

MCP.Pizza Chef: GLips

Paste a link to a Figma file, frame, or group, and your assistant reads the real layout and styling instead of guessing from a screenshot, then writes the matching code in whatever framework you use. It was built with Cursor in mind and works in other editors that support MCP. Setup is a short config snippet plus a Figma personal access token created in your account settings.

Coding

Images/Design

Use This MCP server To

Turn a Figma frame into working code in one go Match a design's exact spacing, colors, and fonts Rebuild a screen from my designer's file without eyeballing it Check which fonts and colors a design actually uses Implement a whole page from a link I paste in

README

Framelink Figma MCP Server

🌐 Available in: 한국어 (Korean) | 日本語 (Japanese) | 中文 (Chinese)

Give your coding agent access to your Figma data.
Implement designs in any framework in one-shot.

Give Cursor and other AI-powered coding tools access to your Figma files with this Model Context Protocol server.

When Cursor has access to Figma design data, it's way better at one-shotting designs accurately than alternative approaches like pasting screenshots.

See quickstart instructions →

Demo

Figma-Context-MCP FAQ

Do I need a Figma account?

Yes, and you create a personal access token in your Figma settings so the server can read your files.

Which apps does this work in?

It was designed for Cursor, and it works in other editors and assistants that support MCP.

Can I use this to build a page from a design?

Yes. Paste the Figma link and ask your assistant to implement it.

Is it free?

The server is free and open source. You still need whatever Figma plan gives you access to the file.

Why not just paste a screenshot instead?

A screenshot hides the real sizes and colors, while reading the file gives your assistant exact values.

How hard is setup?

A few lines pasted into your editor's config file, with your Figma token filled in.