Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Give [Cursor](https://cursor.sh/) and other AI-powered coding tools access to your Figma files with this [Model Context Protocol](https://modelcontextprotocol.io/introduction) server.
When Cursor has access to Figma design data, it's **way** better at one-shotting designs accurately than alternative approaches like pasting screenshots.
## Demo
[Watch a demo of building a UI in Cursor with Figma design data](https://youtu.be/6G9yb-LrEqg)
[](https://youtu.be/6G9yb-LrEqg)
## How it works
1. Open your IDE's chat (e.g. agent mode in Cursor).
2. Paste a link to a Figma file, frame, or group.
3. Ask Cursor to do something with the Figma file—e.g. implement the design.
4. Cursor will fetch the relevant metadata from Figma and use it to write your code.
This MCP server is specifically designed for use with Cursor. Before responding with context from the [Figma API](https://www.figma.com/developers/api), it simplifies and translates the response so only the most relevant layout and styling information is provided to the model.
Reducing the amount of context provided to the model helps make the AI more accurate and the responses more relevant.
## Getting Started
Many code editors and other AI clients use a configuration file to manage MCP servers.
The `figma-developer-mcp` server can be configured by adding the following to your configuration file.
> NOTE: You will need to create a Figma access token to use this server. Instructions on how to create a Figma API access token can be found [here](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens).
### MacOS / Linux
```json
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
```
### Windows
```json
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "cmd",
"args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
```
Or you can set `FIGMA_API_KEY` and `PORT` in the `env` field.
If you need more information on how to configure the Framelink MCP for Figma, see the [Framelink docs](https://www.framelink.ai/docs/quickstart?utm_source=github&utm_medium=referral&utm_campaign=readme).
## Star History
## Learn More
The Framelink MCP for Figma is simple but powerful. Get the most out of it by learning more at the [Framelink](https://framelink.ai?utm_source=github&utm_medium=referral&utm_campaign=readme) site.
---
### Overview (`src/extractors/README.md`)
# Flexible Figma Data Extractors
This module provides a flexible, single-pass system for extracting data from Figma design files. It allows you to compose different extractors based on your specific needs, making it perfect for different LLM use cases where you want to optimize context window usage.
## Architecture
The system is built in clean layers:
1. **Strategy Layer**: Define what you want to extract
2. **Traversal Layer**: Single-pass tree walking with configurable extractors
3. **Extraction Layer**: Pure functions that transform individual node data
## Basic Usage
```typescript
import { extractFromDesign, allExtractors, layoutAndText, contentOnly } from "figma-mcp/extractors";
// Extract everything (equivalent to current parseNode)
const fullData = extractFromDesign(nodes, allExtractors);
// Extract only layout + text for content planning
const layoutData = extractFromDesign(nodes, layoutAndText, {
maxDepth: 3,
});
// Extract only text content for copy audits
const textData = extractFromDesign(nodes, contentOnly, {
nodeFilter: (node) => node.type === "TEXT",
});
```
## Built-in Extractors
### Individual Extractors
- `layoutExtractor` - Layout properties (positioning, sizing, flex properties)
- `textExtractor` - Text content and typography styles
- `visualsExtractor` - Visual appearance (fills, strokes, effects, opacity, borders)
- `componentExtractor` - Component instance data
### Convenience Combinations
- `allExtractors` - Everything (replicates current behavior)
- `layoutAndText` - Layout + text (good for content analysis)
- `contentOnly` - Text only (good for copy extraction)
- `visualsOnly` - Visual styles only (good for design systems)
- `layoutOnly` - Layout only (good for structure analysis)
## Creating Custom Extractors
```typescript
import type { ExtractorFn } from "figma-mcp/extractors";
// Custom extractor that identifies design system components
const designSystemExtractor: ExtractorFn = (node, result, context) => {
if (node.name.startsWith("DS/")) {
result.isDesignSystemComponent = true;
result.dsCategory = node.name.split("/")[1];
}
};
// Use it with other extractors
const data = extractFromDesign(nodes, [layoutExtractor, designSystemExtractor]);
```
## Filtering and Options
```typescript
// Limit traversal depth
const shallowData = extractFromDesign(nodes, allExtractors, {
maxDepth: 2,
});
// Filter to specific node types
const frameData = extractFromDesign(nodes, layoutAndText, {
nodeFilter: (node) => ["FRAME", "GROUP"].includes(node.type),
});
// Custom filtering logic
const buttonData = extractFromDesign(nodes, allExtractors, {
nodeFilter: (node) => node.name.toLowerCase().includes("button"),
});
```
## LLM Context Optimization
The flexible system is designed for different LLM use cases:
```typescript
// For large designs - extract incrementally
function extractForLLM(nodes, phase) {
switch (phase) {
case "structure":
return extractFromDesign(nodes, layoutOnly, { maxDepth: 3 });
case "content":
return extractFromDesign(nodes, contentOnly);
case "styling":
return extractFromDesign(nodes, visualsOnly, { maxDepth: 2 });
case "full":
return extractFromDesign(nodes, allExtractors);
}
}
```
## Benefits
1. **Single Tree Walk** - Efficient processing, no matter how many extractors
2. **Composable** - Mix and match extractors for your specific needs
3. **Extensible** - Easy to add custom extractors for domain-specific logic
4. **Type Safe** - Full TypeScript support with proper inference
5. **Context Optimized** - Perfect for LLM context window management
6. **Backward Compatible** - Works alongside existing parsing logic
## Migration Path
The new system works alongside the current `parseNode` function. You can:
1. Start using the new extractors for new use cases
2. Gradually migrate existing functionality
3. Keep the current API for general-purpose parsing
The `allExtractors` combination provides equivalent functionality to the current `parseNode` behavior.
---
--- METRICS ---
- Files Extracted: 2
- Estimated Token Budget: ~2059 tokens
- Canonical Reference: https://codewiki.google/github.com/GLips/Figma-Context-MCP
