Figma 的 AI 扩展

让 AI 读取 Figma 设计上下文；支持的工作流也可把设计内容写回画布。

Connect AI coding agents to Anima Playground, Figma, and your design system.

Use existing brand guidelines with AI. Turn websites, PDFs, and Figma into a .brand runtime.

Figma MCP 服务器与插件：AI 智能体可读取并编辑实时 Figma 文件，无需 Figma API 令牌。

Your team's design feedback from Figma, Jira and Notion: ask, search, read, reply, mark done.

Design System Manager for shadcn/ui: tokens, fonts, radius, components, icons, blocks, Figma sync.

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

Figma MCP Pack

Figma to pixel-verified code: HTML/React/Tailwind + tokens, then a render + pixel-diff verify loop.

Figma MCP: list frames in a file and fetch one frame's JSON and image safely. 2 tools.

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

MCP server enabling AI assistants to interact with Figma designs via natural language commands

A local MCP server with full Figma REST API coverage.

Parse a Figma file URL. Path discarded.

Let Claude create and edit fully editable vector nodes on the Figma canvas.

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

Translate HTML prototypes into Figma using your design system's real components and tokens.

Read, edit and export the Figma file open in a local plugin. No REST API, no rate limits.

Search 286 episodes of product management wisdom from top leaders at Figma, Airbnb, Linear.

Builds Figma from your design system: real components and tokens, enforced, learning every build.

Proxy MCP for Playwright, Figma, DevTools, Shopify Dev, Context7 — fewer tokens, caching

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

Compare Figma designs against live websites and get visual + content QA reports, from inside Claude.

Sync Lightroom, Figma, Dropbox & Canva assets to WordPress and Shopify via natural language.

导出文件、访问设计数据、管理项目、评论和团队资产

Validate AI-built front-ends against Figma by tokens and geometry, not pixels.

Offline Figma MCP server: layout, SVG assets, renders and revision diffs from saved .fig files

使用Figma MCP服务器从Figma获取设计上下文、截图、变量和资源，并将Figma节点转换为生产代码。当任务涉及Figma URL、节点ID、设计到代码的实现，或Figma MCP设置与故障排查时触发。

使用Figma MCP服务器从Figma获取设计上下文、截图、变量和资源，并将Figma节点转换为生产代码。当任务涉及Figma URL、节点ID、设计到代码的实现，或Figma MCP设置与故障排查时触发。

使用Code Connect映射工具将Figma设计组件连接到代码组件。适用于用户说“code connect”、“将此组件连接到代码”、“映射此组件”、“将组件链接到代码”、“创建code connect映射”，或希望在Figma设计与代码实现之间建立映射时。如需通过`use_figma`写入画布，请使用`figma-use`。

为用户代码库生成自定义设计系统规则。当用户说“创建设计系统规则”、“为我的项目生成规则”、“设置设计规则”、“自定义设计系统指南”，或希望为 Figma 到代码的工作流建立项目特定约定时使用。需要 Figma MCP 服务器连接。

创建一个新的空白 Figma 文件。当用户想要创建新的 Figma 设计或 FigJam 文件，或需要在调用 use_figma 之前新建文件时使用。必要时通过 whoami 处理套餐解析。用法——/figma-create-new-file [editorType] [fileName]（例如 /figma-create-new-file figjam My Whiteboard）

当任务涉及将应用页面、视图或多区块布局转换为 Figma 设计时，将此技能与 figma-use 配合使用。触发场景：'写入 Figma'、'从代码在 Figma 中创建'、'将页面推送到 Figma'、'把这个应用/页面在 Figma 中构建出来'、'创建屏幕'、'在 Figma 中构建落地页'、'更新 Figma 屏幕以匹配代码'。当用户希望从代码或描述在 Figma 中构建或更新完整页面、屏幕或视图时，这是首选的工作流技能。通过 search_design_system 发现设计系统组件、变量和样式，导入它们，并使用设计系统令牌而非硬编码值逐区块增量组装屏幕。

Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.

将 Figma 设计转换为可投入生产的应用代码，实现 1:1 视觉还原。当需要根据 Figma 文件实现 UI 代码、用户提到“实现设计”“生成代码”“实现组件”、提供 Figma URL，或要求构建与 Figma 规格一致的组件时使用。若需通过 `use_figma` 写入 Figma 画布，请使用 `figma-use`。

借助 Figma MCP 工作流（设计上下文、截图、素材和项目约定转换），将 Figma 节点转换为视觉上 1:1 还原的生产级代码。当用户提供 Figma URL 或节点 ID，或要求实现必须与 Figma 规格一致的设计或组件时触发。需要可用的 Figma MCP 服务器连接。

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

**MANDATORY prerequisite** — 你必须在每次调用`use_figma`工具之前调用此技能。绝不要在未先加载此技能的情况下直接调用`use_figma`。跳过它会导致常见且难以调试的失败。当用户想要执行写操作或需要在Figma文件上下文中执行JavaScript的唯一读操作时触发——例如创建/编辑/删除节点、设置变量或令牌、构建组件和变体、修改自动布局或填充、将变量绑定到属性，或以编程方式检查文件结构。

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

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

Local Figma MCP server: frames to Flutter, SwiftUI, React and HTML code, and design in Figma.

Talk to any Figma file with your AI: ask what's in it, change it, or turn it into code.

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

An MCP server that converts Figma designs into React code.

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

Give AI agents full read & write access to Figma — 50+ tools for design automation

Figma MCP server in Rust: plugin bridge, no API token, no rate limits, 73 tools.

Figma MCP server for AI agents. 9 tools: design context, variables, screenshots, and FigJam.

LLM-optimized Figma MCP server.

LLM-optimized Figma MCP server.