Figma MCP Server

MCPOfficialOpen Source23.2

by sanjeev23oct • Frontend & UI

An MCP server that converts Figma designs into React-ready components and assets for pixel-perfect implementation.

Example Use Cases

1
Fetch and process Figma file content into a React-friendly component hierarchy (styles, layout, and component mapping).
2
Retrieve and manage image and SVG assets from Figma with configurable formats and scales for use in web projects.
3
Convert Figma auto-layout and styles into CSS or styled-components and generate TypeScript-safe outputs for React integration.

Description

This server connects to the Figma API, processes design files (styles, layout, components, and assets), and outputs data formatted for React applications. It converts Figma styles to CSS/styled-components, maps auto-layout to Flexbox, and retrieves image/SVG assets. Built in TypeScript and designed to be integrated with IDEs via the MCP protocol, it speeds up turning Figma designs into production-ready React code.

Capabilities(5 total)

Tools (5)

add_figma_file

Add a Figma file to your context

url:string*

view_node

Get a thumbnail for a specific node in a Figma file

file_key:string*node_id:string*

read_comments

Get all comments on a Figma file

file_key:string*

post_comment

Post a comment on a node in a Figma file

file_key:string*node_id:stringmessage:string*x:number*y:number*

reply_to_comment

Reply to an existing comment in a Figma file

file_key:string*comment_id:string*message:string*

Quick Actions

View on GitHub

Security

Scanned 1 month(s) ago

Risk Level

MINIMAL

Read-only data retrieval, no side effects

Trust Score

C60/100

10/17 checks passed

Scores are informational only and provided “as is” without warranty. AgentHotspot assumes no liability for actions taken based on these ratings.

Quick Stats

Service TypeMCP

Pricing ModelUnknown

Capabilities5 Tools / 0 Prompts / 0 Resources

Ownersanjeev23oct

CategoryFrontend & UI

DependenciesStandalone

Set Your Username