@andreaswissel/frametide
Advanced tools
A production-grade MCP (Model Context Protocol) server that extracts component properties and design information from Figma files, providing structured data for automated component library generation and maintenance.
🚀 Perfect for AI agents building design systems, generating component code, and maintaining design-code synchronization across any frontend framework.
# 1. Clone and install
git clone https://github.com/andreaswissel/frametide.git
cd frametide
npm install
# 2. Build everything
npm run build
# 3. Interactive setup (creates .env with your Figma token)
npm run setup
# 4. Test your connection
npm run health
# 5. Start the server
npm start
📝 Note: Modern Figma Variables require an Enterprise plan. The server works perfectly with legacy styles on all plan types.
/
├── src/ # Source code
│ ├── cli/ # CLI management tools
│ ├── extractors/ # Component & token extraction logic
│ ├── figma/ # Figma API integration
│ ├── services/ # Cache and core services
│ ├── utils/ # Security, logging, validation
│ └── __tests__/ # Test suite
├── USAGE.md # Integration examples
└── docker-compose.yml # Container orchestration
This MCP server bridges Figma designs and frontend development by providing LLM coding agents with structured access to design system information, component specifications, and visual properties from Figma files.
.env file or environment variables| Feature | Personal/Professional | Enterprise |
|---|---|---|
| Legacy Styles | ✅ Full support | ✅ Full support |
| Modern Variables | ❌ Not available | ✅ Full support |
| Component Extraction | ✅ Full support | ✅ Full support |
| Design Token Export | ✅ Styles only | ✅ Styles + Variables |
💡 Important: Figma's modern Variables API requires an Enterprise plan. The server gracefully falls back to legacy styles for other plan types.
# Test your Figma token and file access
npm run check-scopes
# Test with a specific file
npm run check-scopes YOUR_FILE_ID
# Validate file access
npm run cli validate-file --file YOUR_FILE_ID
| Document | Description |
|---|---|
| USAGE.md | Integration examples and usage patterns |
| Tool | Description | Natural Usage |
|---|---|---|
set-working-file | Set Figma file from URL | "Let's work on this file: [URL]" |
get-implementation-queue | Get components by status | "Show me what needs to be implemented" |
get-component-for-implementation | Full specs with framework hints | "Get implementation details for Button" |
update-component-status | Track implementation progress | "Mark Button as implemented" |
get-working-file-info | Session status and progress | "What's our current progress?" |
| Tool | Description | Use Case |
|---|---|---|
get-component | Extract detailed component properties | Generate component code |
list-components | Get all components from a file | Browse component library |
get-design-tokens | Extract design tokens (styles + variables*) | Build design system |
get-component-specification | Rich component specs for any framework | Advanced code generation |
check-component-changes | Monitor Figma changes | Automated updates |
*Variables require Figma Enterprise plan
Add to your claude_desktop_config.json:
{
"mcpServers": {
"figma": {
"command": "node",
"args": ["/absolute/path/to/frametide/dist/index.js"],
"env": {
"FIGMA_ACCESS_TOKEN": "your_token_here"
}
}
}
}
Config locations:
~/Library/Application Support/Claude/claude_desktop_config.json%APPDATA%/Claude/claude_desktop_config.jsonAdd to your workspace .vscode/settings.json:
{
"mcp.servers": {
"figma": {
"command": "node",
"args": ["/path/to/frametide/dist/index.js"],
"cwd": "${workspaceFolder}",
"env": {
"FIGMA_ACCESS_TOKEN": "your_token_here"
}
}
}
}
Required extensions:
Add to your project's .cursor/settings.json:
{
"mcp.servers": {
"figma": {
"command": "node",
"args": ["/path/to/frametide/dist/index.js"],
"cwd": "${workspaceFolder}",
"env": {
"FIGMA_ACCESS_TOKEN": "your_token_here"
}
}
}
}
Setup steps:
cd frametide && npm run build// 1. Agent: "Let's implement components from this Figma file: https://www.figma.com/design/abc123/Design-System"
await mcpClient.callTool('set-working-file', {
url: 'https://www.figma.com/design/abc123/Design-System'
});
// 2. Agent: "Show me what components need to be implemented"
const queue = await mcpClient.callTool('get-implementation-queue');
// 3. Agent: "Let's implement the Button component first"
const buttonSpec = await mcpClient.callTool('get-component-for-implementation', {
componentId: 'button-component-id',
targetFramework: 'react'
});
// 4. Agent generates React component code using the specification
// 5. Agent: "Mark the Button as implemented"
await mcpClient.callTool('update-component-status', {
componentId: 'button-component-id',
componentName: 'Button',
status: 'implemented',
framework: 'react'
});
# Clone repository
git clone <repository-url>
cd figma-mcp-server
# Set up environment
cp .env.example .env
# Edit .env with your FIGMA_ACCESS_TOKEN
# Run with Docker Compose
docker-compose up -d
# Check health
docker exec figma-mcp-server npm run health
The MCP server requires a Figma access token and other configuration via environment variables. When installed as an npm package, it will automatically load .env from your project root.
.env.example to .env in your project root:
cp node_modules/frametide/.env.example .env
# Or manually create .env and fill in your values
FIGMA_ACCESS_TOKEN=your-figma-access-token-here
Never commit your .env file with secrets to source control.
For more details, see .env.example.
# Run all tests
npm test
# Run with coverage
npm run test:coverage
# Run specific test
npm test -- --testNamePattern="cache"
# Health check
npm run health
# Test Figma connection
npm run cli test-connection
# Validate file access
npm run cli validate-file --file YOUR_FILE_ID
# Check if your file has published styles
npm run check-scopes YOUR_FILE_ID
# Common causes:
# 1. File has no published styles/tokens
# 2. Token lacks required permissions
# 3. Variables require Enterprise plan
❌ Figma Variables API not available - Enterprise plan required
💡 The file_variables:read scope is only available with Figma Enterprise plans
Solution: Upgrade to Figma Enterprise or use legacy styles
# Check remaining API quota
npm run cli test-connection
# The server has built-in rate limiting:
# - 1000 requests/hour (configurable)
# - Automatic backoff and retry
# Verify token and permissions
export FIGMA_ACCESS_TOKEN="your_token_here"
npm run check-scopes
# Check server logs
npm run dev # Shows detailed logging
We welcome contributions! Here's how to get started:
MIT License - see LICENSE file for details.
Made with ❤️ for the AI agent and design systems community
Report Bug
Request Feature
FAQs
MCP server for Figma design system extraction using TypeScript SDK
We found that @andreaswissel/frametide demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.
Research
Malicious versions of the Telnyx Python SDK on PyPI delivered credential-stealing malware via a multi-stage supply chain attack.
Security News
TeamPCP is partnering with ransomware group Vect to turn open source supply chain attacks on tools like Trivy and LiteLLM into large-scale ransomware operations.