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.
Related MCP server: Figma MCP Server
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