figma-query
Token-efficient Figma MCP server providing tools for querying Figma files, exporting assets, and extracting design tokens and CSS properties.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@figma-queryQuery all button components in file abc123"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
figma-query
Token-efficient Figma MCP server with image export, query DSL, and design token support.
Installation
npm
npm install -g @standardbeagle/figma-queryOr use with npx:
npx @standardbeagle/figma-queryPython (uvx/pipx)
# Using uvx (recommended)
uvx figma-query
# Using pipx
pipx install figma-query
# Using pip
pip install figma-queryRelated MCP server: figma-mcp
Configuration
Environment Variables
FIGMA_ACCESS_TOKEN- Your Figma personal access token (required)FIGMA_EXPORT_DIR- Directory for file exports (default:./figma-export)
Claude Desktop / MCP Client
Add to your MCP configuration:
{
"mcpServers": {
"figma-query": {
"command": "npx",
"args": ["@standardbeagle/figma-query"],
"env": {
"FIGMA_ACCESS_TOKEN": "your-token-here"
}
}
}
}Or if installed globally:
{
"mcpServers": {
"figma-query": {
"command": "figma-query",
"env": {
"FIGMA_ACCESS_TOKEN": "your-token-here"
}
}
}
}Using uvx (Python):
{
"mcpServers": {
"figma-query": {
"command": "uvx",
"args": ["figma-query"],
"env": {
"FIGMA_ACCESS_TOKEN": "your-token-here"
}
}
}
}Tools
Export Tools
Tool | Description |
| Export entire file to nested folders (includes assets by default) |
| Export images/icons for specific nodes |
| Export design tokens to CSS/JSON/Tailwind |
| Download images by ref ID or render nodes as images |
Query Tools
Tool | Description |
| Query nodes with JSON DSL and data shaping |
| Full-text search across names, text, properties |
| Get file structure as ASCII tree with node IDs |
| List all components with usage stats |
| List all styles (color, text, effect, grid) |
Detail Tools
Tool | Description |
| Get full details for a specific node |
| Extract CSS properties for node(s) |
| Get design token references and resolved values |
Other Tools
Tool | Description |
| Generate annotated wireframe with node IDs |
| Compare exports or file versions |
| Help and status |
Projections
Use projections in the select array to get specific property groups:
Projection | Properties |
| id, name, type, visible |
| x, y, width, height |
| fills, strokes, effects, cornerRadius, opacity |
| layoutMode, padding, itemSpacing, constraints |
| fontFamily, fontSize, fontWeight, lineHeight |
| boundVariables |
| imageRefs (from fills/strokes/backgrounds), exportSettings |
| All properties |
Examples
Query all buttons
{
"file_key": "abc123",
"q": {
"from": ["COMPONENT"],
"where": { "name": { "$match": "Button*" } },
"select": ["@structure", "@css"]
}
}Get images from a node
{
"file_key": "abc123",
"q": {
"from": ["FRAME"],
"select": ["@structure", "@images"]
}
}Download image fills
{
"file_key": "abc123",
"image_refs": ["ref123", "ref456"],
"output_dir": "./images"
}License
MIT
This server cannot be deployed
Maintenance
Related MCP Connectors
The Figma MCP server brings Figma design context directly into your AI workflow.
- SupabaseOAuthcom.supabase
MCP server for interacting with the Supabase platform
MCP server for visual regression testing: triage a PR's UI diffs from your coding agent.
MCP server for Boson Protocol — on-chain agentic commerce for physical & digital goods.
Related MCP Servers
- AlicenseAqualityDmaintenanceMCP server for downloading images from Figma designs using access tokens. Supports multiple export formats and scale factors via a single tool.13 npmMIT
- AlicenseNot gradedqualityDmaintenanceRead-only Figma MCP server that enables design-to-code workflows by talking to the Figma REST API with a personal access token, for use with Claude Code and GitHub Copilot.1,978 npmMIT
- FlicenseBqualityCmaintenanceMCP server that fetches Figma data (file trees, nodes, images, components, styles, variables) and serves as a foundation for Flutter code generation.13-
- AlicenseNot gradedqualityAmaintenanceFigma MCP server with full read/write access via plugin bridge — no API token, no rate limits. 83 tools for design automation: styles, variables, components, prototypes, and content.13MIT