A
securityF
licenseA
qualityEnables seamless interaction with Figma via the Model Context Protocol, allowing LLM applications to access, manipulate, and track Figma files, components, and variables.
Last updated -
2
106
TypeScript
Generates CSS pseudo-code from Figma designs, including styling properties that represent the visual elements in the design.
Connects to Figma API to convert designs into pseudo-code structures and fetch design images. Enables extraction of semantic HTML content and design system components, providing LLMs with structured representation of Figma designs.
Creates React-like JSX component structures from Figma designs, representing the component hierarchy and properties in a format that resembles React components.
Figma MCP Server
MCP Server to convert Figma Design to pseudo-code like structure - simple yet efficient for LLMs to understand design context.
Features
- Connect to Figma API and get pseudo-code for the given Design. For visual context, can also fetch images.
- Supports generating pseudo-code for design system components & semantic HTML content.
- Just share Figma Design URL with MCP client and it will extract the file key and node ID automatically, calls the appropriate tools to fetch the pseudo-code and/or image.
Setup in MCP clients
For local development
Prerequisites
- Node.js (v22)
- npm
Install & Build
Development Setup
For development with hot reloading:
Usage
This Figma MCP Server provides two main tools for interacting with Figma designs:
Available MCP Tools
1. fetch_figma_node_image
Fetches a PNG image of a Figma node or frame and returns it as base64 data.
Description: Downloads a visual representation of any Figma design element (frame, component, layer, etc.) as a PNG image.
Parameters:
fileKey(string, required): The key of the Figma file. Can be found in Figma URLs likefigma.com/(file|design)/<fileKey>/...nodeId(string, required): The ID of the specific node to capture. Found as URL parameter likenode-id=<nodeId>
Returns: Base64-encoded PNG image and MIME type.
Example Use Cases:
- Getting visual context of design components
- Creating documentation with actual design screenshots
2. generate_pseudo_code_from_figma_frame
Generates JSX and CSS pseudo-code for a Figma design.
Description: Analyzes Figma design elements and generates corresponding Pseudo HTML + CSS code. The generated code includes semantic HTML structure, CSS properties, and Pseudo-React JSX components based on your figma component library.
Parameters:
fileKey(string, required): The key of the Figma file. Can be found in Figma URLs likefigma.com/(file|design)/<fileKey>/...nodeId(string, required): The ID of the frame/component to convert. Found as URL parameter likenode-id=<nodeId>
Returns: Formatted text containing:
- CSS styles
- JSX component structure
- Semantic HTML elements
- Clean, readable code formatting
Example Use Cases:
- Converting Figma designs to Pseudo - React components
- Providing a better code-like representation of figma design to LLM
- Integrates design system ( accuracy & quality depends on Figma component library )
- Rapid prototyping from designs
- Helper in Design-to-code workflow automation
Figma Links Example:
When sharing Figma designs, the URL contains the required parameters:
- File Key:
ABC123XYZ(the part after/design/or/file/) - Node ID:
1200(from thenode-idparameter, URL decoded)
Integration with MCP Clients
These tools are designed to work with MCP-compatible clients. Simply provide a Figma design URL, and the client can automatically extract the fileKey and nodeId to call the appropriate tools for fetching images and/or generating code.
Kudos:
- Inspired by Figma-Context-MCP
This server cannot be installed
A server that converts Figma designs into pseudo-code structures optimized for LLMs to understand design context, allowing easy extraction of visual elements and code-like representations from Figma files.
Related MCP Servers
- -securityAlicense-qualityA Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.Last updated -1246TypeScriptMIT License
- -securityFlicense-qualityA Model Context Protocol server that connects AI tools and LLMs to Figma designs, enabling them to extract design data, analyze design systems, and generate development documentation.Last updated -TypeScript
- -securityAlicense-qualityGives AI-powered coding tools like Cursor, Windsurf, and Cline access to Figma design files, enabling more accurate code generation directly from Figma designs.Last updated -44,047TypeScriptMIT License