MCP Connector

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.

Works with figma

86
Spark score
out of 100
Updated Jul 2025
Version 1.0.0
Models
universal

Add to Favorites

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

01

Retrieve Figma file structures and node information.

02

Parse Figma URLs to extract file keys.

03

Export design elements as PNG, JPG, SVG, or PDF.

04

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

parse_figma_url

Extract file key from Figma URL

get_file

Retrieve file structure with depth control

get_file_nodes

Retrieve specific nodes with depth control

export_images

Export images from nodes in PNG, JPG, SVG, or PDF formats

get_me

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

  1. Get your Figma token from
    Developer Settings

  2. Set environment variable:

    export FIGMA_TOKEN="your_token_here"
    
  3. Run the server:

    # If installed via cargo install
    figma-mcp
    
    # If built from source
    cargo run --release
    

Usage

Workflow

  1. Use parse_figma_url to extract file key from any Figma URL
  2. Use file key with other tools to access file data
  3. Use depth parameter to control response size

Available Tools

  • parse_figma_url - Extract file key from Figma URLs
  • get_file - Get file structure (with depth control)
  • get_file_nodes - Get specific nodes (with depth control)
  • export_images - Export images from nodes
  • get_me - Test authentication
  • help - 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/filename
  • https://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.