Skip to content
Use case

Turn Figma designs into code with an AI assistant

Design servers let a coding assistant look at the design instead of a screenshot of it. A Figma MCP server can read a frame's layout, text, colors, spacing, and component structure, then the model writes UI code that follows the real values. Designers also use these servers to rename layers, audit a file for inconsistent styles, or pull design tokens into a theme. Accuracy improves a lot when the file uses components and auto layout. Most servers need a personal access token, and Figma's own Dev Mode server runs locally from the desktop app.

841 matching serversRanked by trust score
Try it

Example prompts

Paste one into Claude, Cursor, or any MCP client once a matching server is installed.

  • Build this Figma frame as a React component with Tailwind classes.

  • List the colors and text styles used in this file and flag near-duplicates.

  • Export the spacing and color tokens from the design system page as CSS variables.

Top matches

MCP servers for Figma design

The 12 strongest of 841 matching servers. Servers that name the topic directly come first.

More in Design
  • Trust score 67 of 100, Good

    mokido

    by kolganovr · JavaScript

    Write to a live Figma canvas, get a screenshot back, and roll back mistakes. Zero deps, free plan.

    Registry
    2 stars—/wk weekly downloads— tools
  • Trust score 66 of 100, Good

    Figma to pixel-perfect code: deterministic HTML/React, then a render + pixel-diff verify loop.

    Registry
    1 stars—/wk weekly downloads— tools
  • Trust score 60 of 100, Good

    Author Rive; convert Lottie, After Effects, Animate and Figma into it; animate AI and pixel art.

    Registry
    — stars844/wk weekly downloads— tools
  • Trust score 55 of 100, Fair

    figma-mcp-bridge

    by kolganovr · JavaScript

    Write to a live Figma canvas, get a screenshot back, and roll back mistakes. Zero deps, free plan.

    Registry
    Deprecated
    2 stars31/wk weekly downloads15 tools
  • Driftcheck logo
    Trust score 55 of 100, Fair

    Compares a mobile app screen (Android or iOS Simulator) with its Figma design and suggests fixes.

    Registry
    — stars—/wk weekly downloads— tools
  • Trust score 55 of 100, Fair

    MCP server that reads local Figma .fig files, fully offline

    Registry
    — stars—/wk weekly downloads— tools
  • Trust score 55 of 100, Fair

    Figma MCP server with full read/write access via plugin bridge — no API token or rate limits.

    Registry
    — stars—/wk weekly downloads— tools
  • Trust score 55 of 100, Fair

    Bidirectional Figma MCP — AI draws UI on Figma canvas, reads designs back

    Registry
    — stars—/wk weekly downloads— tools
  • Trust score 55 of 100, Fair

    Figma designs pulled once into a local vault; AI agents read them offline with no rate limits

    Registry
    — stars—/wk weekly downloads— tools
  • Trust score 55 of 100, Fair

    Let agents manage your Figma workspace. 102 tools for seats, teams, offboarding, and cleanup.

    Registry
    — stars—/wk weekly downloads— tools
  • layernote logo
    Trust score 55 of 100, Fair

    layernote

    Unknown author

    Client feedback pinned on live sites, Figma frames, PDFs, images and video, for Claude and agents.

    RegistryRemote
    — stars—/wk weekly downloads— tools
  • Trust score 52 of 100, Fair

    Canva MCP

    Unknown author

    Create, search, edit, and export designs and assets from Canva.

    RegistryRemote
    — stars—/wk weekly downloads— tools
Setup

How to set it up

  1. Pick a server. mokido is the strongest match. Check its tools and the API keys it needs on its page.
  2. Copy the config for your client. Open the install guide for Claude Desktop, Claude Code, Cursor, or VS Code, and paste the generated block into the client's config file. The client guides show where each config file lives.
  3. Restart and try a prompt. Restart the client so it loads the server, then paste one of the example prompts above.
FAQ

Questions about Figma design

What is the best MCP server for Figma design?

mokido ranks first here with a trust score of 67/100, followed by Figma CodeKit MCP (66) and Polymation (60). Servers that name the topic directly come first, each group ordered by the public trust score, which nobody can pay for. See the methodology for how it is calculated.

How do I set up mokido in Claude or Cursor?

Open the install guide for Claude Desktop or Cursor, copy the generated config into the client's config file, add any API keys the server asks for, then restart the client. The client guides cover VS Code, Claude Code, Windsurf, and more.

Can I use a hosted server instead of installing one locally?

2 of the 12 servers listed here can connect remotely over HTTP, so there is nothing to run on your machine: layernote, Canva MCP. The rest run locally over stdio.

How many MCP servers can do this?

MCPpedia lists 841 published servers that match this use case. This page shows the 12 strongest matches; thin and duplicate listings are left out.

Keep exploring
All use cases