Mcp-Figma

MCP - Figma

官方： Guide to the Dev Mode MCP Server – Figma Learn - Help Center

准备

• MCP Client：Claude Code/Cursor 等支持 MCP 的应用
• 下载 Figma Desktop app:  Download the Figma desktop app →

开启步骤

Enable the MCP Server

• 打开 Figma Desktop app，确保升级到最新版本
• 打开一个 Figma 链接
• 在左上角，打开 menu
• Under Preferences, select Enable Dev Mode MCP Server.

本地会启动一个 Server： http://127.0.0.1:3845/mcp ，用于后续的 mcp server 配置

Set up your MCP client

Claude Code

配置命令：

claude mcp add --transport http figma-dev-mode-mcp-server http://127.0.0.1:3845/mcp

验证和管理：

# 获取所有mcp
claude mcp list

# 获取详细
claude mcp get my-server

# 移除
claude mcp remove my-server

其他

https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server

Prompt your MCP client

有 2 种方式提示：

Selection-based

选中要实现的，写一段 promot

Link-based

• Copy the link to a frame or layer in Figma
• 写 prompt

Tools and usage suggestions

• get_code
• get_variable_defs
• get_code_connect_map
• get_image

Dev Mode MCP Server Settings

Enable tool get_image

• Use placeholders 使用占位符：跳过图片提取，改为添加通用占位符——如果您希望在代码中手动替换占位符，则此方法非常有用。否则，它会从您的文件中提取真实图片。

Enable code connect

在响应中包含 Code Connect 映射，因此生成的代码可以在可能的情况下重用来自连接的代码库的组件

MCP best practices

Structure your Figma file for better code

为你的设计意图提供最佳 Context，以便 MCP 和您的 AI 助手可以生成清晰、一致且与您的系统一致的代码。

Write effective prompts to guide the AI

MCP 为你的 AI 助手提供结构化的 Figma 数据，但最终结果取决于你的 prompt。好的 prompt 可以：

• Align the result with your framework or styling system
• Follow file structure and naming conventions
• Add code to specific paths (e.g. src/components/ui)
• Add or modify code in existing files instead of creating new ones
• Follow specific layout systems (e.g. grid, flexbox, absolute)

Examples:

• “Generate iOS SwiftUI code from this frame”
• “Use Chakra UI for this layout”
• “Use src/components/ui components”
• “Add this to src/components/marketing/PricingCard.tsx”
• “Use our Stack layout component”

把 prompt 想象成给队友的简报。明确的意图会带来更好的结果

Trigger specific tools when needed

MCP 支持不同的工具，每个工具都会为你的 AI 助手提供不同类型的结构化上下文。有时，助手不会自动选择正确的工具，尤其是在工具种类越来越多的情况下。如果结果不准确，请尝试在 prompt 中明确说明。

• get_code 提供 Figma 所选内容的结构化 React + Tailwind 表示。这是一个起点，您的 AI 助手可以根据您的提示将其转换为任何框架或代码风格。
• get_variable_defs 提取您在选择中使用的变量和样式（颜色、间距、字体等）。这有助于模型在生成的代码中直接引用您的 token。

例如，如果您获取原始代码而不是令牌，请尝试以下操作：

• “Get the variable names and values used in this frame.”

Add custom rules

• Cursor

---
description: Figma Dev Mode MCP rules
globs: 
alwaysApply: true
---
  - The Figma Dev Mode MCP Server provides an assets endpoint which can serve image and SVG assets
  - IMPORTANT: If the Figma Dev Mode MCP Server returns a localhost source for an image or an SVG, use that image or SVG source directly
  - IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
  - IMPORTANT: do NOT use or create placeholders if a localhost source is provided

• CLaude Code

# MCP Servers
## Figma Dev Mode MCP Rules
  - The Figma Dev Mode MCP Server provides an assets endpoint which can serve image and SVG assets
  - IMPORTANT: If the Figma Dev Mode MCP Server returns a localhost source for an image or an SVG, use that image or SVG source directly
  - IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
  - IMPORTANT: do NOT use or create placeholders if a localhost source is provided

Break down large selections

将屏幕分成更小的部分（如组件或逻辑块），以获得更快、更可靠的结果。