Figma MCP Server

@karthiks3000

Repository

Basic information

About Figma MCP Server

Claude MCP Server to work with figma

#figma #mcp #server #design #ai

Figma MCP Server config

No standard config provided

This server doesn't expose a parseable MCP config block in its README. See the repository for install instructions.

Repository

Figma MCP Server tools

Tool list not available yet

This listing does not currently have a tool list to display. This does not mean the server has no tools; check its documentation for supported capabilities.

We auto-extract tools from the README. The maintainer can list them under a ## Tools heading to populate this section.

Overview

What is Figma MCP Server?

Figma MCP Server is a Model Context Protocol (MCP) server that allows Claude AI to extract design information from Figma files and create or update designs using the Figma plugin. It operates in two modes: Readonly Mode for extracting design data via a URL link and Write Mode for creating or updating designs by connecting with the Figma MCP plugin. It is built for developers and designers who want to interact programmatically with Figma through an AI assistant.

How to use Figma MCP Server?

Clone the repository, install dependencies with npm install, build with npm run build, then set the FIGMA_ACCESS_TOKEN environment variable. Start the server with npm start or for development use npm run dev. For write mode, the Figma MCP plugin must be installed in the Figma desktop app. Run unit tests with npm test and integration tests with npm run test:integration or npm run test:integration-js.

Key features of Figma MCP Server

Readonly Mode to extract file info, node details, and styles
Write Mode to create and update frames, shapes, and text
Comprehensive API covering components, variables, and responsive design
Unit and integration tests included for reliability
Plugin connection test to verify WebSocket communication

Use cases of Figma MCP Server

Extract design tokens (colors, text styles, effects) from a Figma file
Create new frames and components programmatically via Claude AI
Identify components, variants, and responsive design properties
Automate design updates by modifying node properties and fills
Test the full flow from design creation to data extraction

Frequently asked questions

What are the two modes of Figma MCP Server?

Readonly Mode extracts design information using a Figma URL link, while Write Mode creates or updates designs by connecting with the Figma MCP plugin.

What are the prerequisites?

Node.js 18 or higher, a Figma account with an access token, and the Figma MCP plugin installed in the Figma desktop app (required for write mode).

How do I configure and start the server?

Set the `FIGMA_ACCESS_TOKEN` environment variable, then run `npm start`. For development, use `npm run dev`.

What information can be extracted in readonly mode?

File information, node details, styles (colors, text, effects), assets, variables, component identification, variant detection, and responsive design detection.

What actions are supported in write mode?

Creating frames, shapes, text, components, and component instances; updating node properties; setting fills, strokes, and effects; and deleting nodes.

Comments

More Media & Design MCP servers

GPT Image 2.5 MCP

you.bot

Generate and edit images with GPT Image 2.5 for $0.029 each. A free you.bot key (not an OpenAI key) comes with 50 credits — about 17 images — and needs no credit card.

Generate Greetings

Create greetings and personalized PNG cards for 30 occasions in 15 languages, including Hindi, Greek and Hebrew. Free remote MCP with curated phrases, occasion-matched backgrounds and four styles, including motivational.

SceneF — California + Hawaii Movie Showtimes

SceneF

Built by movie lovers, for movie lovers and their assistants. SceneF puts every screen in California and Hawaii on one board — 33 regions, from San Francisco's single-screen neighborhood houses and nightly repertory cale

Treza

Treza Labs

Lets Claude, ChatGPT and other MCP clients build and run AI video pipelines on Treza, from script and generated shots to narration, captions and posting to YouTube or TikTok.

Caimera

Build and run AI product photography workflows from your AI assistant: on-model shots, catalog images, prints and edits, with results returned in chat.