figma-mcp

A Figma MCP server built on the Dedalus platform.

Connect Figma design components to code implementations, manage files and branches, and interact with Figma's design system through AI agents.

Features

• Get file metadata and traverse the full node tree
• Manage components — create, update, list, and search across files and teams
• Connect design components to code via Code Connect (React, HTML, SwiftUI, Compose)
• Publish, retrieve, and remove Code Connect mappings
• Browse file version history and create branches
• Access team-level published component libraries

---

Prerequisites

• Python 3.10+
• pip or uv
• A Figma account with a personal access token
• A Dedalus account

---

Quick Start

1. Configure Environment Variables

cp .env.example .env

Fill in your .env:

# Dedalus Platform
DEDALUS_AS_URL=https://as.dedaluslabs.ai
DEDALUS_API_KEY=<your-dedalus-api-key>
DEDALUS_API_URL=https://api.dedaluslabs.ai

# Figma personal access token
FIGMA_ACCESS_TOKEN=<your-figma-pat>

2. Install Dependencies

pip install -e .

3. Test Your Connection

python -m src.client --test-connection

4. Run the Server

python -m src.main

The server starts on port 8080. Test it with:

python -m src.client

---

Environment Variables

Variable	Description
DEDALUS_AS_URL	Dedalus authorization server URL (default: https://as.dedaluslabs.ai)
DEDALUS_API_KEY	Your Dedalus platform API key (dsk_*)
DEDALUS_API_URL	Dedalus API URL (default: https://api.dedaluslabs.ai)
FIGMA_ACCESS_TOKEN	Your Figma personal access token

---

Available Tools

Tool	R/W	Description
figma_get_file	R	Get file metadata and node tree
figma_get_file_versions	R	Get file version history
figma_create_branch	W	Create a file branch
figma_get_component	R	Get specific component nodes by ID
figma_get_components	R	Get all components in a file
figma_create_component	W	Create a new component
figma_update_component	W	Update component properties
figma_get_team_components	R	Get a team's published components
figma_search_components	R	Search for components in a team
figma_get_code_connect	R	Get Code Connect data for a file
figma_publish_code_connect	W	Publish Code Connect mappings
figma_unpublish_code_connect	W	Remove Code Connect mappings

---

Architecture

Figma uses a REST API with Bearer token authentication. All requests are dispatched through the Dedalus HTTP enclave, which injects the personal access token transparently.

src/
├── figma/
│   ├── config.py      # Connection definition (Bearer token)
│   ├── request.py     # REST dispatch + query-param helpers
│   └── types.py       # Typed dataclass models
├── tools/
│   ├── files.py       # File + version + branch tools
│   ├── components.py  # Component CRUD + team search
│   └── code_connect.py # Code Connect publish/get/unpublish
├── server.py          # MCPServer setup
├── main.py            # Server entrypoint
└── client.py          # Connection test + tool test client

---

Deploy to Dedalus

1. Log in to the Dedalus Dashboard.
2. Go to Add Server and connect this repository.
3. Enter FIGMA_ACCESS_TOKEN in the deployment environment variables.
4. Deploy.

---

Notes

• Figma personal access tokens do not expire automatically but can be revoked.
• Code Connect requires appropriate file permissions and Dev Mode access.
• Team component endpoints require the team ID (found in the Figma URL).
• Some features (Figma Make, private npm packages) may require a paid Figma plan.
• API rate limits apply — see Figma rate limits docs.