AdYour product here, seen by people installing AI tools every day
AI Plugin Index
Sponsor slots open: 12 of 12, from $249 a month

design

Figma MCP servers and skills

There are 135 ways to connect Figma to Claude, ChatGPT, Cursor and other AI assistants; these are the 100 with the highest scores. The most used is Figma-Context-MCP (16k GitHub stars).

Best Figma MCP servers, compared →

Most used

Figma-Context-MCPGLips
94

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

AAA Local 56k/wk
Figma Console MCP southleft
91

The most comprehensive MCP server for Figma — design tokens, variables, components, write tools, version history diff, accessibility audits, FigJam, Slides, and more. Local (WebSocket Desktop Bridge plugin) and Cloudflare Workers (paired + remote) modes.

AAA Local 9.7k/wk
Figma Developer MCP Ncds GLips
91

Model Context Protocol server for Figma integration

AAB Local 16k
Figma Developer MCP Misa GLips
91

Model Context Protocol server for Figma integration

AAB Local 16k
Figma MCP Server figma
90

The Figma MCP server brings Figma design context directly into your AI workflow.

AFA Remote 2.1k
Figma MCP Bridge gethopp
86

MCP server that bridges Figma plugin data to AI tools without hitting API rate limits

AAA Local 3.3k/wk

MCP servers (58)

  1. 1Figma-Context-MCP GLips · DesignGive your coding agent access to your Figma data. Implement designs in any framework in one-shot.AAA4 days ago56k/wk94
  2. 2Figma Console MCP southleft · DesignThe most comprehensive MCP server for Figma — design tokens, variables, components, write tools, version history diff, accessibility audits, FigJam, Slides, and more. Local (WebSocket Desktop Bridge plugin) and Cloudflare Workers (paired + remote) modes.AAA18 days ago9.7k/wk91
  3. 3Figma Developer MCP Ncds GLips · DesignModel Context Protocol server for Figma integrationAAB4 days ago★ 16k91
  4. 4Figma Developer MCP Misa GLips · DesignModel Context Protocol server for Figma integrationAAB4 days ago★ 16k91
  5. 5Figma MCP Server figma · DesignThe Figma MCP server brings Figma design context directly into your AI workflow.AFAyesterday★ 2.1k90
  6. 6Figma MCP Bridge gethopp · DesignMCP server that bridges Figma plugin data to AI tools without hitting API rate limitsAAA9 days ago3.3k/wk86
  7. 7Opentabs Plugin Figma opentabs-dev · DesignOpenTabs plugin for FigmaAAB3 days ago★ 98984
  8. 8figma-ui-mcp TranHoaiHung · DesignBidirectional Figma MCP — AI draws UI on Figma canvas, reads designs backAAB9 days ago917/wk82
  9. 9Figma Rust MCP BuiHung1612 · DesignClaude Code to Figma — Bidirectional MCP bridge. AI draws UI on Figma canvas, reads designs back. Works with Claude, Cursor, VS Code, Windsurf, Antigravity. No API key needed.AAC7 days ago691/wk80
  10. 10Dsh Figma MCP lubanqihao9875 · DesignDSH 的 Figma MCP 一键连接插件，对话中粘贴链接，Agent 即可读写节点/图层/变量/样式，生成 React/Vue 代码，OAuth 安全登录，Token 本机存储，内置工作流指令和 Skill 引导使用AAC3 days ago738/wk80
  11. ADYour product hereThis row is seen by people browsing Figma tools. Book it from $249 a month.See prices →
  12. 11Figma MCP Server planetabhi · DesignA local MCP server with full Figma REST API coverage.AFD2 days ago4.0k/wk77
  13. 12figma-mcp-rust alvinindra · DesignFigma MCP server in Rust: plugin bridge, no API token, no rate limits, 73 tools.AAB8 days ago★ 6876
  14. 13figma-mcp-go tunglt1810 · DesignFigma MCP server with full read/write access via plugin bridge — no API token or rate limits.AAD6 days ago219/wk73
  15. 14Figma Reader LeoGCode · DesignRead-only Figma access for AI agents without plugin or API token, as an MCP server or a CLI: local .fig decoding, or logged-in figma.com over CDPAAC4 days ago74/wk73
  16. 15Figma-Context-MCP felixAnhalt · DesignLLM-optimized Figma MCP server.BAD1 month ago467/wk71
  17. 16figma-edit-mcp neozhehan · DesignProgrammatically read, create, and modify Figma designs via MCP.AACyesterday50/wk70
  18. 17figma-mcp-express sunhome243 · DesignCompact Figma MCP with validated batch ops through a local plugin bridge.BAC2 months ago64/wk68
  19. 18Figma Bridge Clovis500c · DesignLocal MCP bridge that lets any AI agent design in the Figma desktop app, with no rate limits.AAC7 days ago43/wk67
  20. 19MCP Figma thirdstrandstudio · DesignMCP server for figmaDAC8 months ago4.0k/wk66
  21. 20HTML to Figma — Design System miapre · DesignTranslate HTML prototypes into Figma using your design system's real components and tokens.AAC11 days ago★ 1464
  22. 21figma-vault NBhey · DesignFigma designs pulled once into a local vault; AI agents read them offline with no rate limitsAAC22 days ago31/wk64
  23. 22figma mcparmory · DesignExport files, access design data, manage projects, comments, and team assetsCFC5 months ago★ 3262
  24. 23figma-mcp-bridge kolganovr · DesignWrite to a live Figma canvas, get a screenshot back, and roll back mistakes. Zero deps, free plan.AAC4 days ago24/wk61
  25. 24Figma Clipboard Design MCP ducaoya · DesignTurns Figma clipboard data (layers, layout, fills, text, vector paths) into a local MCP server for AI: view-seat friendly, zero API quota, zero deps.AFC20 days ago40/wk61
  26. 25Figma Connector I2olanD · DesignLocal MCP server for ai.to.design — render AI-generated HTML/CSS as native, editable Figma designs from Claude, Cursor, Codex or any MCP client.FC51/wk59
  27. 26Figma MCP Server 1yhy · DesignMCP server for Figma design integration with AI coding toolsDAC10 months ago191/wk59
  28. 27MCP Figma pipeworx-io · DesignFigma MCP PackAAD24 days ago26/wk58
  29. 28Figma Dev Tools zxl1006492122 · DesignFigma Dev Tools MCP Server v1.4.21 - Bridge Figma designs to code with AI-powered token extraction, framework-agnostic structured data, React/Vue/HTML component generation, asset downloads, XSS security protection, smart hierarchy fixing, SVG inline rendeAC20/wk58
  30. 29Figma Context MCP tianmuji · DesignModel Context Protocol server for Figma integration with smart position infoDAC11 months ago105/wk57
  31. 30Figma Wire adhamhaithameid · DesignWire any AI coding agent to Figma: probe/repair the local Dev Mode MCP server across harnesses (ZCode, Claude Code, Codex, Cursor, Windsurf, VS Code, Gemini CLI), parse share links, and call Figma MCP tools from plain bash — no MCP client required.AAC21 days ago12/wk54
  32. 31Figma MCP ChimbuezeDavid · DesignEnterprise Model Context Protocol (MCP) server & companion plugin for AI-driven UI/UX design & prototyping in FigmaAAC23 days ago12/wk54
  33. 32figma-to-code-mcp felixAnhalt · DesignLLM-optimized Figma MCP server.BAD1 month ago★ 751
  34. 33Figma MCP Server pdogra1299 · DesignMCP server for Figma REST API — PAT-based auth, designed to help AI agents build pixel-perfect UI from Figma designsDFC6 months ago87/wk50
  35. 34MCP Figma sethford · DesignAI-powered Figma MCP server for Cursor, GitHub Copilot, Windsurf and other AI assistantsFC807/wk47
  36. 35Figma MCP Server tothienbao6a0 · DesignThe most comprehensive Figma MCP server. Access Figma design data, generate comprehensive design systems, and empower AI-driven workflows.FAD16 months ago44/wk47
  37. 36Figma MCP mjd · DesignModelContextProtocol server for FigmaFD1.2k/wk47
  38. 37MCP Figma noahcn · DesignFigma MCP server for accessing Figma APIFD1.3k/wk45
  39. 38Figma MCP mmtr-tech · DesignModel Context Protocol server for read-only Figma REST API (files, images, comments)AC9/wk45
  40. 39Figma MCP Connect aritra0 · DesignFigma MCP installer for Cursor, Claude Code, Codex Desktop, Codex IDE extension, Codex CLI, VS Code, Gemini CLI, and Claude Desktop.BC14/wk44
  41. 40Figma MCP hapins · DesignA Model Context Protocol server for Figma API integration, enabling seamless interaction with Figma files and componentsFFC21 months ago41/wk44
  42. 41figma-mcp-go vkhanhqui · DesignFigma MCP server with full read/write access via plugin — no API token, no rate limits. 73 tools.FC389/wk42
  43. 42Figma MCP chatflowdev · DesignModelContextProtocol server for FigmaFD55/wk42
  44. 43Figma Capture MCP oldtree924 · DesignMCP server for capturing webpages using Figma's HTML-to-design featureAC13/wk41
  45. 44AI Figma MCP sethford · DesignAI-powered Figma MCP server for Cursor, GitHub Copilot, Windsurf and other AI assistantsFC139/wk41
  46. 45Figma MCP Full Server Echoxiawan · DesignA Model Context Protocol (MCP) server for Figma API integration with Claude Desktop. Extract images, styles, SVG data, and design elements from Figma files.FAC13 months ago21/wk41
  47. 46Figma CodeKit MCP Mehmoodqureshi · DesignFigma to pixel-perfect code: deterministic HTML/React, then a render + pixel-diff verify loop.AAC5 days ago★ 139
  48. 47figma-mcp Mehmoodqureshi · DesignFigma to pixel-perfect code: deterministic HTML/React, then a render + pixel-diff verify loop.AAC5 days ago★ 139
  49. 48Fro Claude To Figma romulobin · DesignBridge your own Claude Code to your own Figma. Claude designs real nodes on your canvas via an MCP server + a localhost WebSocket relay + a Figma plugin. No accounts, no cloud, localhost-only.FC7/wk35
  50. 49Shedytee MCP Figma Augmentcode Integration chatflowdev · DesignFigma MCP Server integration for Augment CodeAD9/wk34
  51. 50Figma MCP scalably-io · DesignFigma MCP: list frames in a file and fetch one frame's JSON and image safely. 2 tools.AAC6 days ago★ 033
  52. 51Figma MCP Stdio liusisiasisi · DesignA Model Context Protocol serverFD12/wk32
  53. 52Figma MCP Server oabolade · DesignMCP server enabling AI assistants to interact with Figma designs via natural language commandsDAC7 months ago★ 129
  54. 53figma-mcp-rust nntoan · DesignFigma MCP server in Rust: plugin bridge, no API token, no rate limits, 73 tools.AAD18 days ago★ 028
  55. 54Figma-Context-MCP-AIR compassalessandrolorenz · DesignFigma MCP server for AI agents. 9 tools: design context, variables, screenshots, and FigJam.DAD6 months ago★ 127
  56. 55figma-mcp-rs jirayusueb · DesignFigma/FigJam MCP server with read/write via plugin — no API token, no limits. 78 tools.BAC1 month ago★ 027
  57. 56Figma pipeworx-io · DesignFigma MCP PackAAD24 days ago★ 027
  58. 57Figma URL Shape sadri-dridi · DesignParse a Figma file URL. Path discarded.AFD27 days ago★ 025
  59. 58Figma MCP Ncds nhn-commerce-fe · DesignModel Context Protocol server for Figma integrationFD9/wk24

Skills (42)

  1. 1figma-implement-design pixel-point · DesignUse to translate inspected Figma structure into a production-ready Toolcraft generated app.BAA1 month ago★ 93075
  2. 2figma-designer divinevideo · DesignAnalyze Figma designs and translate them into Flutter code using existing divine_ui components and VineTheme. Use when implementing UI from Figma mockups or when checking if a component already exists before building new. Invoke with /figma-designer.AABtoday★ 26674
  3. 3t-figma-assets timzaak · DesignDownload image/video assets from Figma, convert them to WebP/MP4, place them in the target project, and write the asset mapping manifest.AAByesterday★ 9366
  4. 4ralph-figma rubenmarcus · DesignExtract Figma designs and build them as code with ralph-starterBAB1 month ago★ 10858
  5. 5design-os-figma-craft jangtrinh · DesignPick and verify idiomatic Figma constructions when building or editing a canvas via the external figma-agent CLI. Use before building (choose auto-layout, component, and variable structure) and after building (run the construction lints).AFCtoday★ 4855
  6. 6figma-to-flutter bladeofgod · Design适用：读取 Figma 或根据节点实现 Flutter UI，包括 Token 反查、Auto Layout、组件 Variant、Asset 和视觉验证。不适用：替代产品决策，或从像素推断设计稿不可见的数据行为。触发词：Figma URL、node-id、design-to-code、视觉还原、Auto Layout、design token。BAB1 month ago★ 11553
  7. 7figma-to-flutter bladeofgod · Design适用：读取 Figma 或根据节点实现 Flutter UI，包括 Token 反查、Auto Layout、组件 Variant、Asset 和视觉验证。不适用：替代产品决策，或从像素推断设计稿不可见的数据行为。触发词：Figma URL、node-id、design-to-code、视觉还原、Auto Layout、design token。BAB1 month ago★ 11553
  8. 8plan-figma bladeofgod · Design将一个或多个 Figma 设计拆成符合架构的任务卡，不做实现BAC1 month ago★ 11550
  9. 9figma-mcp-frontend me-cedric · DesignUse Figma MCP design context to implement frontend screens, design systems, components, and styles.AAC2 days ago★ 1450
  10. 10figma-skill podo · DesignConnects to Figma API, discovers Community resources matching the project, extracts design tokens, and generates framework-specific code for 7 frameworks.BAC1 month ago★ 2549
  11. 11figma-illustration-import egov-moldova · DesignUse when a Figma design requires a custom multi-layer illustration rather than a standard single-glyph icon. Check for an existing `mud-illustration-*` component first, then extract the Figma node, create a reusable Stencil illustration component, add stories, and verify it visually in Storybook.AACtoday★ 445
  12. 12figma-compose-builder manikantagarikipati · DesignMulti-agent orchestrator that translates Figma designs into Jetpack Compose for this repo's :app module (or examples/). Coordinates screen/state consolidation, string and image resolution, component mapping, code generation, and build validation. Use when a developer provides Figma node links and asks for a Compose screen to be generated.AFC15 days ago★ 1044
  13. 13figma-themejson-style-variations lightspeedwp · DesignExtract WordPress style variation mappings from a Figma design. Use when the user provides a Figma node URL or ID for style variation designs and needs structured notes about variation-specific token changes, surfaces, typography, or component styling differences.ACCtoday★ 2043
  14. 14figma-themejson-custom-color-tokens lightspeedwp · DesignExtract semantic custom color tokens for a WordPress theme from a Figma variables table. Use when the user provides a Figma node URL or ID for semantic color variables and needs normalized `settings.custom.color` token paths, likely palette mappings, and notes about dark-mode parity.ACCtoday★ 2043
  15. 15Figma Export Automator agentskillexchange · DesignExports assets from Figma files using the Figma REST API v1. Extracts component sets, design tokens (colors, typography, spacing), and renders frames as SVG/PNG. Generates CSS custom properties from styles.AABtoday★ 5442
  16. 16Give coding agents Figma layout context through MCP agentskillexchange · DesignConfigure Framelink's Figma MCP server so coding agents can fetch clean design layout context from Figma files before implementing UI.AABtoday★ 5442
  17. 17palugada-figma-to-code yudistirosaputro · DesignTRIGGER when implementing UI from a Figma design, link, or file key — use the figma-bridge MCP (free-plan safe), never the raw API or palugada design for node content.CAC3 months ago★ 1039
  18. 18ui-figma-sync TechsioCZ · DesignKeep @techsio/ui-kit and Figma in sync: Code Connect (*.figma.ts) mappings, Figma variable naming/aliasing, and the token export pipeline. Use after a component's public API or visuals changed. Invoke explicitly with $ui-figma-sync.AAC5 days ago★ 239
  19. 19figma-sync bighardperson · DesignRead Figma files, extract design tokens, generate React Native Expo TS or Web React + Tailwind code, write back to Figma, and diff local models against Figma for minimal patches. Triggers: "pull figma", "sync figma", "figma to code", "push to figma", "diff figma", "extract design tokens", "generate from figma", "preview figma changes"CFB5 months ago★ 6239
  20. 20figma-plugin-flow-review sobakapav · DesignUse when designing, reviewing, or implementing the desengine Figma plugin flow, including selection capture, manifest network access, plugin UI, local endpoint transport, and Figma-to-desktop handoff.BAC2 months ago★ 337
  21. 21figma-generate-design jhy0285 · DesignBuild or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.AAC2 days ago★ 537
  22. 22gd-figma-migration galyarderlabs · DesignDefault reference pipeline for the figma-migration taskKind — figma-extract → token-map → generate → critique.AAC9 days ago★ 837
  23. 23figma-use skeletorflet · DesignRun Figma Plugin API scripts for canvas writes, inspections, variables, and design-system work. Prerequisite for every other Figma skill in this catalogue.CAC5 months ago★ 4835
  24. 24figma-generate-library skeletorflet · DesignBuild or update a professional-grade design system library in Figma from a codebase. Useful for keeping the Figma source of truth in sync with shipped components.CAC5 months ago★ 4835
  25. 25figma-implement-design nxxxsooo · DesignTranslate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent.BAC2 months ago★ 634
  26. 26figma-implement-design feimacode · DesignTranslate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent.AAC3 days ago★ 432
  27. 27figma-code-connect-components gabrielmoreira · DesignConnect Figma design components to code components using Code Connect so design-system updates flow into the codebase automatically.AACtoday★ 1932
  28. 28figma-implement-design lza6 · DesignUse when a Figma file or frame is the authoritative implementation source and production UI must reproduce its tokens, component variants, auto-layout, interaction states, and responsive breakpoints through the project’s established primitives. This is source-to-code translation; post-build acceptance and inventing a visual language are separate work.AAC12 days ago★ 832
  29. 29figma whchoi98 · DesignConnect Figma designs to code components - generate design system rules, map UI components to Figma designs, maintain design-code consistency. Use when mentioning Figma, design to code, UI mockup, or design system.DFC6 months ago★ 2029
  30. 30figma-mcp-design-system-delivery srednoff888-art · DesignUse when Figma MCP supplies approved design context, components, variables, Code Connect mappings, or an editable Figma canvas for design-system delivery. Convert intent into accessible, project-native UI without treating generated code or canvas writes as automatically approved.AAC5 days ago★ 129
  31. 31ui-figma Mesteriis · DesignRoutes Figma creation, editing, inspection, connection, components, or motion to the matching Figma workflow.AAC17 days ago★ 027
  32. 32bmad-wds-figma-integration alexoviedo999 · DesignCode-to-Figma and Figma-to-code workflows for design review and visual iterationBAC2 months ago★ 126
  33. 33figma-create-new-file testground-lab · DesignCreate a new blank Figma Design or FigJam file. Useful as the first step in scripted design-system or workshop workflows.AAC14 days ago★ 026
  34. 34figma-generate-library testground-lab · DesignBuild or update a professional-grade design system library in Figma from a codebase. Useful for keeping the Figma source of truth in sync with shipped components.AAC14 days ago★ 026
  35. 35code-to-figma Mesteriis · DesignRoutes code-to-Figma work to original native Code Connect or design-generation skills with owner scope rules.AAC17 days ago★ 026
  36. 36figma-read tim80411 · DesignThis skill should be used when the user provides a "Figma link", "Figma URL", "figma.com/design" URL, or asks to "read Figma", "analyze Figma design", "extract Figma layout", or wants to understand a Figma design for development context.BAC2 months ago★ 025
  37. 37figma-generate-design zunairvf-sys · DesignBuild or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.BAC1 month ago★ 024
  38. 38figma-generate-library zunairvf-sys · DesignBuild or update a professional-grade design system library in Figma from a codebase. Useful for keeping the Figma source of truth in sync with shipped components.BAC1 month ago★ 024
  39. 39figma-code-connect-components jeanavila997-ux · DesignConnect Figma design components to code components using Code Connect so design-system updates flow into the codebase automatically.CFC3 months ago★ 324
  40. 40tokens-to-figma-sync geekhoo · DesignUse when pushing a DTCG design-token directory into Figma as variable collections — "sync tokens to Figma", "push design tokens to Figma variables", "mirror the token system in Figma". Code→Figma one-way. Not for extracting tokens from Figma (use derive-design-system) or migrating code (use apply-design-system).AFCtoday★ 024
  41. 41figma-foundation cosmicdreams · DesignExplain, rebuild or diagnose the library's pages, variables and Foundations pages (Color, Typography, Spacing & Layout, Elevation & Shape, Brand Voice & Language). Run as part of design-lab:run; use alone to refresh foundations after tokens or published copy change. Not for components (design-lab:figma-component).AFCyesterday★ 024
  42. 42figma-create-new-file JoseMorales7 · DesignAlways use this skill when the user wants to create a new Figma Design, FigJam, or Slides file. You MUST invoke this skill BEFORE every `create_new_file` tool call.AFCtoday★ 024

Questions

Is there an official Figma MCP server?

Check the publisher on each listing: servers published by Figma itself are the official ones. The most used Figma server here is Figma-Context-MCP by GLips.

How do I connect Figma to Claude?

Pick a server below, open its page and copy the install command for Claude Code, or the config block for Claude Desktop. Most Figma servers need an API key or token from your Figma account.