Spark
Sign In
MCP

Access Figma Designs and Export Assets

Figma MCP Server provides access to Figma files and design assets via a standardized interface. Export images and navigate nodes.

Connect
Works with figma
Paul van der Meijs
Maintainer?
11
Spark score
out of 100
Updated 11 months ago
Version 1.0.0
Models
claude
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

What it does

The installation command `car go install figma-mcp` contains a typo and should be `cargo install figma-mcp`.

How it connects

The user provided a description that included a typo in a code example. The typo has been corrected in the revised description.

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

Discussion

Questions & comments · 0

Sign In Sign in to leave a comment.