Access Figma Designs and Export Assets
Figma MCP Server gives AI assistants standardized access to Figma files, nodes, and exported design assets with depth control.
Why it matters
Integrate with Figma to programmatically access design files, extract structures, and export design assets in various formats. This enables automated workflows for design-to-development handoffs and asset management.
Outcomes
What it gets done
Retrieve Figma file structures and node information.
Parse Figma URLs to extract file keys.
Export design elements as PNG, JPG, SVG, or PDF.
Manage traversal depth to control response size and prevent token limits.
Install
Add it to your toolbox
Run in your project directory:
curl -fsSL https://spark.entire.vc/get/vb-figma | bash Capabilities
Tools your agent gets
Extract file key from Figma URL
Retrieve file structure with depth control
Retrieve specific nodes with depth control
Export images from nodes in PNG, JPG, SVG, or PDF formats
Authentication test for Figma API access
Overview
Figma MCP Server
Figma MCP Server gives AI assistants standardized access to Figma files and design assets: reading file and node structure with depth control, and exporting assets as PNG, JPG, SVG, or PDF. Use it when an AI assistant needs to read a Figma file's structure or export design assets without going through the Figma UI.
What it does
Figma MCP Server is an MCP server, written in Rust, that provides access to Figma files and design assets through a standardized interface. It lets an AI assistant retrieve file structures, navigate specific components within a file, and export design assets as PNG, JPG, SVG, or PDF, with depth control to keep responses within token limits.
When to use - and when NOT to
Use it when an AI assistant needs to read a Figma file's structure, pull specific nodes or components, or export design assets for use elsewhere, for example generating code from a design, auditing components, or pulling icons and images out of a file. It requires a Figma personal access token from Figma's Developer Settings, so it needs at minimum read access to the files in question. Because deep file traversal can produce very large responses, the depth parameter is meant to be tuned deliberately rather than always maxed out; start shallow and increase it only when you need to go further into the tree.
Capabilities
- File access: retrieve Figma file structures with depth control (get_file)
- Node navigation: access specific components within a file, also with depth control (get_file_nodes)
- Image export: export design assets in PNG, JPG, SVG, or PDF formats (export_images)
- URL parsing: extract a file key from any Figma URL, including /file/ and /design/ URL formats and URLs carrying a node-id (parse_figma_url)
- Authentication check (get_me) and built-in usage instructions (help)
- Exported images are exposed as MCP resources with base64-encoded content, addressable at figma://file/{file_key}/node/{node_id}.{format}, and listable and readable like any other MCP resource
The depth parameter controls how much of the tree is returned: depth=1, the default, returns pages only for files or direct children for nodes; depth=2 adds top-level objects or grandchildren; depth=3 and above traverses deeper and should be used carefully to avoid oversized responses.
How to install
Install from crates.io:
cargo install figma-mcp
Or build from source:
git clone https://github.com/paulvandermeijs/figma-mcp.git
cd figma-mcp
cargo build --release
Get a Figma token from Figma's Developer Settings, export it as FIGMA_TOKEN, then run figma-mcp, or cargo run --release if built from source. The typical workflow is to call parse_figma_url to extract a file key from a Figma URL, then use that key with the other tools, adjusting the depth parameter to control response size.
Who it's for
Developers and designers building AI workflows that need programmatic access to Figma files - reading structure, pulling specific components, or exporting assets - without going through the Figma UI or writing direct Figma REST API calls. It is released under the MIT License.
Source README
Figma MCP Server
A Model Context Protocol (MCP) server that provides access to Figma files and
design assets through a standardized interface.
Features
- File Access: Retrieve Figma file structures with depth control
- Node Navigation: Access specific components within files
- Image Export: Export design assets in PNG, JPG, SVG, or PDF formats
- URL Parsing: Extract file keys from Figma URLs
- Depth Management: Control response size to prevent token limits
- Resource Support: Exported images are available as MCP resources with
base64-encoded content
Installation
Option 1: Install from crates.io (Recommended)
cargo install figma-mcp
Option 2: Build from source
git clone https://github.com/paulvandermeijs/figma-mcp.git
cd figma-mcp
cargo build --release
Quick Start
Get your Figma token from
Developer SettingsSet environment variable:
export FIGMA_TOKEN="your_token_here"Run the server:
# If installed via cargo install figma-mcp # If built from source cargo run --release
Usage
Workflow
- Use
parse_figma_urlto extract file key from any Figma URL - Use file key with other tools to access file data
- Use depth parameter to control response size
Available Tools
parse_figma_url- Extract file key from Figma URLsget_file- Get file structure (with depth control)get_file_nodes- Get specific nodes (with depth control)export_images- Export images from nodesget_me- Test authenticationhelp- Usage instructions
Resources
Exported images are automatically available as MCP resources:
- List resources to see all exported images
- Read resources to get base64-encoded image data
- Resource URIs:
figma://file/{file_key}/node/{node_id}.{format}
Depth Parameter
- depth=1 (default): Pages only (files) or direct children (nodes)
- depth=2: Pages + top-level objects or children + grandchildren
- depth=3+: Deeper traversal (use carefully)
Supported URLs
https://www.figma.com/file/FILE_ID/filenamehttps://www.figma.com/design/FILE_ID/filename- URLs with node IDs:
?node-id=1%3A2
Development
cargo test # Run tests
RUST_LOG=info cargo run # Run with logging
FAQ
Common questions
Discussion
Questions & comments · 0
Sign In Sign in to leave a comment.