109 tools that work with Figma: 56 MCP servers, 52 Agent Skills and 1 Claude Code plugin. 1 of the remote servers answered our live check, 0 worked without an API key, and 8 come from an official or verified publisher. Ranked by GitHub stars plus official, live and free-to-try signals.
Most common uses: Frontend, UI components & design-to-code (61), Design tools (Figma, Canva...) (42), Multi-agent, orchestration & workflows (3), Notes, docs & knowledge bases (2).
| Tool | Stars | Last update | License | |
|---|---|---|---|---|
| design-taste-frontend tasteskill 2.5.1, the anti-slop frontend skill. Builds professional company websites at the level of figma.com and x.ai: plain copy in a voice of its SkillInstall · skills CLI | 115,156 | MIT | ||
| design-extract Extract design tokens (color / typography / spacing) from imported source code, screenshots, or Figma exports into the canonical token bag token-map c SkillInstall · skills CLI | 107,550 | Apache-2.0 | ||
| figma-extract Pull a Figma file's node tree, design tokens, and embedded assets into the project cwd as a structured snapshot. SkillInstall · skills CLI | 107,550 | Apache-2.0 | ||
| understand-figma Analyze a Figma file via the Figma REST API and generate an interactive design knowledge graph (pages, screens, components, component sets, instances, SkillInstall · skills CLI | 92,567 | MIT | ||
| figma Figma design platform integration. Access design files, extract component information, read design tokens, and translate designs into code. Bridge the PluginAnthropic marketplace | 2,182 | — | ||
| Figma MCP Server The Figma MCP server brings Figma design context directly into your AI workflow. MCP serverVerified domain · mcp.figma.comRemoteSign-in needed | 2,182 | — | ||
| design-to-code Pixel-perfect Figma to React conversion using coderio. Generates production-ready code (TypeScript, Vite, TailwindCSS V4) with high visual fidelity. F SkillInstall · skills CLI | 33,495 | MIT | ||
| figma Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Tr SkillInstall · skills CLI | 33,495 | MIT | ||
| figma-implement-design Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and proje SkillInstall · skills CLI | 33,495 | MIT | ||
| qa-test-planner Generate comprehensive test plans, manual test cases, regression test suites, and bug reports for QA engineers. Includes Figma MCP integration for des SkillInstall · skills CLI | 33,495 | MIT | ||
| figma-code-connect-components Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to co SkillInstall · skills CLI | 28,730 | — | ||
| figma-create-design-system-rules Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set u SkillInstall · skills CLI | 28,730 | — | ||
| figma-create-new-file Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling use_fig SkillInstall · skills CLI | 28,730 | — | ||
| figma-generate-design Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write SkillInstall · skills CLI | 28,730 | — | ||
| figma-generate-library Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libra SkillInstall · skills CLI | 28,730 | — | ||
| figma-implement-design Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user me SkillInstall · skills CLI | 28,730 | — | ||
| figma-use **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill SkillInstall · skills CLI | 28,730 | — | ||
| io.github.GLips/Figma-Context-MCP Give your coding agent access to your Figma data. Implement designs in any framework in one-shot. MCP serverGitHub-verified authorLocal · npm | 16,201 | MIT | ||
| figma-designer Design inside Figma the way this designer does: real variables, text styles, auto layout and components, on a fixed visual system (Tailwind type and r SkillInstall · skills CLI | 15,477 | MIT | ||
| build-design Builds UI from a Figma file or a design image so it matches the design, using the project's existing tokens and components. SkillInstall · skills CLI | 12,135 | MIT | ||
| figma-code-connect Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma com SkillInstall · skills CLI | 7,451 | — | ||
| figma-create-new-file **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `create_new_file` tool call. NEVER call `create_new_file` directly without loadin SkillInstall · skills CLI | 7,451 | — | ||
| figma-design-to-code Use this skill when implementing a Figma design as code (design → code) — the read-FROM-Figma direction. Triggers: 'implement this Figma design', 'bui SkillInstall · skills CLI | 7,451 | — | ||
| figma-generate-diagram MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill SkillInstall · skills CLI | 7,451 | — | ||
| figma-generate-library Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libra SkillInstall · skills CLI | 7,451 | — | ||
| figma-implement-motion Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user menti SkillInstall · skills CLI | 7,451 | — | ||
| figma-swiftui SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design in SkillInstall · skills CLI | 7,451 | — | ||
| figma-use-figjam This skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using SkillInstall · skills CLI | 7,451 | — | ||
| figma-use-motion Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. SkillInstall · skills CLI | 7,451 | — | ||
| figma-use-slides This skill helps agents use Figma's use_figma MCP tool in the Slides context. Can be used alongside figma-use which has foundational context for using SkillInstall · skills CLI | 7,451 | — | ||
| figma Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Us SkillInstall · skills CLI | 7,167 | — | ||
| figma-implement-design Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and proje SkillInstall · skills CLI | 7,167 | — | ||
| card-design 社媒卡片视觉设计系统：提供配色、中文字体层级、满画幅布局、品类骨架和死空白/密度质检，避免模板化 PPT 与廉价 AI 感。 当用户说“卡片难看、优化视觉、封面/海报设计、排版配色、卡片填不满、AI 味重”时使用；所有 card-*、poster-hero 等视觉产出应把它作为设计规范，而非最终渲染 SkillInstall · skills CLI | 4,670 | Apache-2.0 | ||
| design-wizard Interactive design wizard that guides through a complete frontend design process with discovery, aesthetic selection, and code generation. Use for cre SkillInstall · skills CLI | 3,743 | MIT | ||
| figma-automation Automate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas. SkillInstall · skills CLI | 3,743 | MIT | ||
| moodboard-creator Create visual moodboards from collected inspiration with iterative refinement. Use after trend research or website analysis to synthesize design direc SkillInstall · skills CLI | 3,743 | MIT | ||
| figma-integration Keep Figma and code in sync. Map the 3-tier DTCG tokens to Figma Variables (collections + modes), sync in either direction, use the Figma MCP when con SkillInstall · skills CLI | 3,171 | MIT | ||
| form Visual designer — brand identity, color systems, typography, design tokens, and UI design. SkillInstall · skills CLI | 2,919 | MIT | ||
| ux-audit-walkthrough Minimalist UX/Interaction Audit Expert that deconstructs complex interactions through cognitive load and operational efficiency lenses. Use this skill SkillInstall · skills CLI | 1,286 | MIT | ||
| com.mcparmory/figma Export files, access design data, manage projects, comments, and team assets MCP serverVerified domain · mcparmory.comLocal · PyPI | 32 | — | ||
| figma-roundtrip Keeps a video motion-graphics kit and its editable Figma boards in sync - the creator designs and tweaks in Figma, Claude ports the changes into the R SkillInstall · skills CLI | 447 | — | ||
| io.github.TranHoaiHung/figma-ui-mcp Bidirectional Figma MCP — AI draws UI on Figma canvas, reads designs back MCP serverGitHub-verified authorLocal · npm | 266 | MIT | ||
| l1-ai-design-review L1 × AI 设计评审：对已完成的单页、局部 UI 设计稿进行小型迭代评审，识别影响面、状态遗漏、文案与一致性风险，并给出 P0/P1/P2 建议和验收清单。用户提供 Figma 链接、截图、前后设计稿或可评审原型，并要求设计走查、风险评审或开发前 UI 检查时使用；不用于设计前方案预检、完整多页 SkillInstall · skills CLI | 250 | — | ||
| ui-system Reuse existing UI primitives, CSS vars, and DESIGN.md patterns instead of inventing new buttons, colors, borders, shadows, or helpers — including when SkillInstall · skills CLI | 215 | MIT | ||
| paper-figure-to-figma Reconstruct research-figure images as editable Figma artwork or native PowerPoint figures. Draw, inspect actual previews and correct differences; work SkillInstall · skills CLI | 161 | MIT | ||
| ready→made MCP Deterministic Figma to Elementor, Gutenberg, Oxygen, Etch and HTML layouts for AI assistants. MCP serverVerified domain · levels.devRemote● LiveAPI key needed | 0 | — | ||
| figma-content-operator 用于处理涉及检查、读取、创建、编辑、导出或代码映射的 Figma 内容任务，也用于将 HTML/React/Vue 等网页复制到 Figma，尤其适用于当前选区、设计系统、Figma MCP、Drafito、Figwright 或需要避免 MCP 工具污染上下文的场景。当用户需要可批注 Figma SkillInstall · skills CLI | 147 | MIT | ||
| react-to-figma-make Use when 需要把现有 React、Vite、Next.js、V0 或 AI Studio 页面转换为 Figma Make 可导入的 .fig 资产，或补齐、更新、验证已有 Figma Make 导出壳和 canvas.fig。 SkillInstall · skills CLI | 147 | MIT | ||
| design-to-code Transforms screenshots, Figma frames, mockups, design images, and live public websites into high-fidelity, responsive, accessible, production-ready fr SkillInstall · skills CLI | 143 | MIT | ||
| figma-to-generateblocks Convert Figma designs to GenerateBlocks V2 format for WordPress SkillInstall · skills CLI | 142 | — | ||
| opendesigner Design systems and the pages built on them, one question at a time. Use for tokens, DESIGN.md, a landing page, an app or a redesign ("make it look pro SkillInstall · skills CLI | 140 | MIT | ||
| opendesigner-export Exports an OpenDesigner system to CSS variables, Tailwind, DTCG, Swift, Compose, Figma or Paper, and writes it into Figma or Paper when connected. Use SkillInstall · skills CLI | 140 | MIT | ||
| opendesigner-extend Changes an existing OpenDesigner system (an opendesigner/ folder), such as a new colour, rounder corners, dark mode or a component. Reads DESIGN.md, d SkillInstall · skills CLI | 140 | MIT | ||
| opendesigner-extract Learns a look from a website, screenshot, Figma file, repo CSS or brand book. Measures it, maps it to dials, or writes a taste index. Copies structure SkillInstall · skills CLI | 140 | MIT | ||
| opendesigner-illustrate Illustrations, stock photos and icons. Finds open-licence art, recolours it to the tokens and wires it in (empty states, onboarding, hero), with a lic SkillInstall · skills CLI | 140 | MIT | ||
| opendesigner-paint Original art painted in code in the brand's palette. A hero or launch film, a celebration loop, or a still in watercolour, pointillism, charcoal, sket SkillInstall · skills CLI | 140 | MIT | ||
| opendesigner-preflight A launch checklist for anything visual (page, video, deck, share image, UI) that catches the silly mistakes that look cheap or wrong. Use before any r SkillInstall · skills CLI | 140 | MIT | ||
| opendesigner-review Audits every draft of a built UI before it is shown, like a careful user. Every screen size and theme, scroll, hover, keyboard, motion, measured spaci SkillInstall · skills CLI | 140 | MIT | ||
| io.github.alvinindra/figma-mcp-rust Figma MCP server in Rust: plugin bridge, no API token, no rate limits, 73 tools. MCP serverGitHub-verified authorLocal · npm | 80 | MIT | ||
| io.github.aicanvas-me/aicanvas Design systems your AI agent builds with and you reshape, plus standalone React components. MCP serverGitHub-verified authorLocal · npm | 69 | MIT | ||
| io.github.themesberg/flowbite-mcp MCP server to convert Figma designs to Flowbite UI components in Tailwind CSS MCP serverGitHub-verified authorLocal · npm | 42 | MIT | ||
| app.zaklad/design-system Build and manage your design system with AI: tokens, themes, components, icons, Figma and code. MCP serverVerified domain · zaklad.appRemoteSign-in needed | — | — | ||
| Canvashand Figma MCP server and plugin: AI agents read and edit live Figma files, no Figma API token. MCP serverVerified domain · canvashand.comLocal · MCPB | 0 | — | ||
| Figma MCP Figma MCP: list frames in a file and fetch one frame's JSON and image safely. 2 tools. MCP serverVerified domain · scalably.ioLocal · npm | 0 | MIT | ||
| Whoogy Compare Figma designs against live websites and get visual + content QA reports, from inside Claude. MCP serverVerified domain · whoogy.comRemoteSign-in needed | 0 | MIT | ||
| figlens Offline Figma MCP server: layout, SVG assets, renders and revision diffs from saved .fig files MCP serverGitHub-verified authorLocal · npm | 21 | MIT | ||
| io.github.tunglt1810/figma-mcp-go Figma MCP server with full read/write access via plugin bridge — no API token or rate limits. MCP serverGitHub-verified authorLocal · npm | 20 | MIT | ||
| io.github.rudraptpsingh/figbridge Free, local MCP bridge for Figma — HTML, CSS, Tailwind, tokens, agent handoff bundles. MCP serverGitHub-verified authorLocal · npm | 16 | MIT | ||
| Brandsystem MCP — Brand Guidelines for AI Use existing brand guidelines with AI. Turn websites, PDFs, and Figma into a .brand runtime. MCP serverGitHub-verified authorLocal · npm | 15 | MIT | ||
| HTML to Figma — Design System Translate HTML prototypes into Figma using your design system's real components and tokens. MCP serverGitHub-verified authorLocal · npm | 15 | MIT | ||
| Mimic AI Builds Figma from your design system: real components and tokens, enforced, learning every build. MCP serverGitHub-verified authorLocal · npm | 15 | MIT | ||
| io.github.neozhehan/figma-edit-mcp Programmatically read, create, and modify Figma designs via MCP. MCP serverGitHub-verified authorLocal · npm | 14 | MIT | ||
| Figma MCP Server A local MCP server with full Figma REST API coverage. MCP serverGitHub-verified authorLocal · npm | 10 | — | ||
| io.github.let-sunny/canicode Analyze Figma designs for dev & AI readiness. 39 rules, scoring, HTML reports. MCP serverGitHub-verified authorLocal · npm | 10 | MIT | ||
| figmanage Let agents manage your Figma workspace. 102 tools for seats, teams, offboarding, and cleanup. MCP serverGitHub-verified authorLocal · npm | 9 | MIT | ||
| io.github.sunhome243/figma-mcp-express Compact Figma MCP with validated batch ops through a local plugin bridge. MCP serverGitHub-verified authorLocal · npm | 9 | MIT | ||
| designfit Validate AI-built front-ends against Figma by tokens and geometry, not pixels. MCP serverGitHub-verified authorLocal · npm | 8 | MIT | ||
| io.github.felixAnhalt/Figma-Context-MCP LLM-optimized Figma MCP server. MCP serverGitHub-verified authorLocal · npm | 7 | MIT | ||
| io.github.felixAnhalt/figma-to-code-mcp LLM-optimized Figma MCP server. MCP serverGitHub-verified authorLocal · npm | 7 | MIT | ||
| Anima MCP Server Connect AI coding agents to Anima Playground, Figma, and your design system. MCP serverGitHub-verified authorRemoteSign-in needed | 6 | — | ||
| io.github.kenneives/design-token-bridge-mcp Translate design tokens between Tailwind, Figma, CSS, Material 3, and SwiftUI MCP serverGitHub-verified authorLocal · npm | 5 | MIT | ||
| Figme MCP server that reads local Figma .fig files, fully offline MCP serverGitHub-verified authorLocal · npm | 3 | MIT | ||
| io.github.musepy/genable-mcp Write to Figma from any MCP client (Claude Code, Cursor). Complements the read-only official MCP. MCP serverGitHub-verified authorLocal · npm | 3 | MIT | ||
| io.github.kolganovr/mokido Write to a live Figma canvas, get a screenshot back, and roll back mistakes. Zero deps, free plan. MCP serverGitHub-verified authorLocal · npm | 2 | MIT | ||
| io.github.LucasGorgal/localfig The Figma desktop app as an MCP server: full Plugin API for AI agents. Local, no token, no quota. MCP serverGitHub-verified authorLocal · npm | 2 | MIT | ||
| Figma CodeKit MCP Figma to pixel-verified code: HTML/React/Tailwind + tokens, then a render + pixel-diff verify loop. MCP serverGitHub-verified authorLocal · npm | 1 | MIT | ||
| Figma MCP Server MCP server enabling AI assistants to interact with Figma designs via natural language commands MCP serverGitHub-verified authorLocal · npm | 1 | ISC | ||
| figma-mcp Figma to pixel-perfect code: deterministic HTML/React, then a render + pixel-diff verify loop. MCP serverGitHub-verified authorLocal · npm | 1 | MIT | ||
| figma-vault Figma designs pulled once into a local vault; AI agents read them offline with no rate limits MCP serverGitHub-verified authorLocal · npm | 1 | MIT | ||
| grafta Talk to any Figma file with your AI: ask what's in it, change it, or turn it into code. MCP serverGitHub-verified authorLocal · npm | 1 | MIT | ||
| io.github.compassalessandrolorenz/Figma-Context-MCP-AIR Figma MCP server for AI agents. 9 tools: design context, variables, screenshots, and FigJam. MCP serverGitHub-verified authorLocal · npm | 1 | MIT | ||
| io.github.ecestnrkl/figjam-mcp Query FigJam board context, source-cited answers and snapshot changes through five local MCP tools. MCP serverGitHub-verified authorLocal · npm | 1 | MIT | ||
| io.github.Joseph-Brendan/frame-relay MCP server for the Frame-Relay design kit: components, tokens and live Figma selections. MCP serverGitHub-verified authorLocal · npm | 1 | MIT | ||
| io.github.saiffmirza/kiyas AI design fidelity — compare Figma designs or screenshots against rendered UI. No API keys. MCP serverGitHub-verified authorLocal · npm | 1 | MIT | ||
| Layerbridge Read, edit and export the Figma file open in a local plugin. No REST API, no rate limits. MCP serverGitHub-verified authorLocal · npm | 1 | MIT | ||
| Driftcheck Compares a mobile app screen (Android or iOS Simulator) with its Figma design and suggests fixes. MCP serverGitHub-verified authorLocal · NuGet | 0 | MIT | ||
| Figma Vector MCP Let Claude create and edit fully editable vector nodes on the Figma canvas. MCP serverGitHub-verified authorLocal · npm | 0 | MIT | ||
| FigmaMCP Claude Code or Codex read and edit your open Figma file. Needs the free FigmaMCP Mac app. MCP serverGitHub-verified authorLocal · MCPB | 0 | — | ||
| io.github.a1245582339/figma-designer Give AI agents full read & write access to Figma — 50+ tools for design automation MCP serverGitHub-verified authorLocal · npm | — | — | ||
| io.github.arimunandar/figsnap-mcp The Figma file you have open, as MCP tools. Extract, edit, and keep a saved set. MCP serverGitHub-verified authorLocal · npm | 0 | MIT | ||
| io.github.duncanbottrill/deskhand Claude in your Figma file. Builds with your components, checks what it wrote. Runs on your computer. MCP serverGitHub-verified authorLocal · npm | — | — | ||
| io.github.jirayusueb/figma-mcp-rs Figma/FigJam MCP server with read/write via plugin — no API token, no limits. 78 tools. MCP serverGitHub-verified authorLocal · npm | 0 | MIT | ||
| io.github.Maher-Reven/asdesigned Diff a rendered UI element against its Figma source and get every drifted property with its delta. MCP serverGitHub-verified authorLocal · npm | 0 | MIT | ||
| io.github.MananSingh2001/figma-react An MCP server that converts Figma designs into React code. MCP serverGitHub-verified authorLocal · npm | — | — | ||
| io.github.nguyendinhphongdx/figma-bridge-mcp Bidirectional Figma MCP — AI draws UI on Figma canvas, reads designs back MCP serverGitHub-verified authorLocal · npm | 0 | MIT | ||
| io.github.nntoan/figma-mcp-rust Figma MCP server in Rust: plugin bridge, no API token, no rate limits, 73 tools. MCP serverGitHub-verified authorLocal · npm | 0 | MIT | ||
| io.github.tathagat22/plumb-mcp Two-way Figma MCP: extract + verify design-to-code, or generate on-brand Figma pages from a prompt. MCP serverGitHub-verified authorLocal · npm | — | — | ||
| io.github.vkhanhqui/figma-mcp-go Figma MCP server with full read/write access via plugin — no API token, no rate limits. 73 tools. MCP serverGitHub-verified authorLocal · npm | — | — | ||
| UI Design to Code Design-to-code artifact pipeline for UI screenshots, Figma node data, and visual review. MCP serverGitHub-verified authorLocal · npm | 0 | MIT |