Figma MCP server
AI & MCPSends Figma design context, variables and layout to your coding agent so it can write matching code.
The Figma MCP server connects Figma files to AI agents. It gives them the design context they need to generate code, and it can also write back to the canvas.
get_design_context returns design context and code for a layer or selection. The default output is React and Tailwind, but you can ask for another framework, including plain HTML and CSS. get_variable_defs lists the variables and styles used in a selection, such as colours, spacing and typography. get_screenshot captures a selection.
The remote server lives at https://mcp.figma.com/mcp and does not need the desktop app. The desktop server needs a Dev or Full seat on a Professional, Education, Organization, Government or Enterprise plan. Read calls are rate limited. For example, Dev and Full seats on Professional get up to 200 a day.
Good for
- Turning a Figma frame into HTML and CSS
- Pulling colour and spacing variables into custom properties
- Comparing built UI against a design screenshot
mcpaifigmadesign-tokens
More AI and MCP tools
See all →Dembrandt
AI & MCPExtracts a website's colours, type, spacing and CSS variables as design tokens, from the CLI or an MCP server.- Stars
- 3,945
- Last commit
- 6 days ago
- Licence
- MIT
CSS MCP Server
AI & MCPGives agents MDN CSS docs and compatibility data, and analyses your stylesheets for complexity and patterns.- Stars
- 338
- Last commit
- 1 year ago
- Licence
- ISC
Baseline MCP Server
AI & MCPTells your agent the Baseline status and browser support of web features, using Web Platform Dashboard data.- Stars
- 37
- Last commit
- 12 days ago
- Licence
- MIT
