figma-mcp

Figma MCP

概述

此技能通过利用 Figma 的 MCP（模型上下文协议）服务，直接从 Figma 文件访问结构化设计数据，从而实现准确的设计转代码。与基于截图的方法不同，Figma MCP 会提供每个设计元素的语义信息，包括精确的间距、颜色、排版、组件层级和设计系统令牌，从而显著提高代码生成的准确性。

何时使用此技能

在以下情况下使用此技能：

• 用户提供 Figma URL（文件链接或画板选择链接）
• 用户要求将 Figma 设计转换为代码或据此实现设计
• 用户要求“根据此 Figma 设计构建”或“实现此设计”
• 用户需要提取设计令牌、变量或设计系统值
• 用户希望更新现有代码，使其符合 Figma 设计
• 用户提到要保持设计与代码的一致性

工作流

第 1 步：接收 Figma 设计参考

当用户提供 Figma URL 或请求实现设计时：

1. 识别 Figma 链接类型：

   • 文件 URL：https://www.figma.com/file/[FILE_KEY]/...
   • 画板选择链接：https://www.figma.com/file/[FILE_KEY]/...?node-id=[NODE_ID]
   • 设计 URL：https://www.figma.com/design/[FILE_KEY]/...

2. 确认访问权限：

   • 确认 Figma MCP 服务已配置且可访问
   • 如果尚未配置，请参阅 references/setup-guide.md 了解设置说明

第 2 步：使用 MCP 工具获取设计数据

使用可用的 Figma MCP 工具检索结构化设计数据：

可用的主要 MCP 工具：

• get_figma_data — 获取文件或特定画板的完整设计数据
• get_figma_variables — 提取设计令牌（颜色、间距、排版）
• get_figma_components — 获取组件定义和实例
• get_figma_styles — 访问文本、颜色和效果样式

最佳实践： 首先使用 get_figma_data 获取用户所指的特定画板或节点的数据。这会提供完整的结构、布局数据和样式信息。

工作流示例：

User: "Implement this Figma design: [Figma URL with node-id]"

1. Extract file_key and node_id from URL
2. Call get_figma_data with file_key and node_id parameters
3. Receive structured JSON with:
   - Element hierarchy (frames, groups, components)
   - Layout properties (position, size, constraints, auto-layout)
   - Styling (fills, strokes, effects, typography)
   - Component instances and variants
   - Design tokens and variables

第 3 步：分析设计结构

生成代码之前，先分析获取的设计数据：

1. 识别组件层级：

   • 主要容器或区域有哪些？
   • 哪些元素是可复用组件？
   • 布局如何流动（flex、grid、绝对定位）？

2. 提取设计系统值：

   • 颜色（填充、描边、背景）
   • 排版（字体系列、字号、字重、行高）
   • 间距（内边距、外边距、间隔）
   • 边框、阴影、效果

3. 确定布局方案：

   • 自动布局画板 → Flexbox 或 CSS Grid
   • 绝对定位 → CSS 绝对定位或相对定位
   • 约束 → 响应式行为

第 4 步：生成代码

根据设计数据生成可用于生产环境的代码：

代码生成原则：

1. 使用语义化 HTML：

   • 画板 → <div>、<section>、<header> 等
   • 文本 → <h1>-<h6>、<p>、<span>
   • 按钮 → <button>
   • 图片 → <img>

2. 保留设计系统值：

   • 从 Figma 变量中提取颜色变量
   • 为间距、颜色和排版创建 CSS 自定义属性
   • 使用设计中的精确值（不要近似估算）

3. 匹配布局行为：

   • 带内边距或间隔的自动布局 → 使用带 gap 或 padding 的 Flexbox
   • 自动布局方向 → flex-direction
   • 约束 → 响应式 CSS（flex-grow、min/max-width）

4. 基于组件的架构：

   • Figma 组件 → React/Vue 组件或 CSS 类
   • 组件实例 → 使用带属性的组件
   • 变体 → 属性或条件类

5. 响应式设计注意事项：

   • 在适当情况下使用相对单位（rem、em、%）
   • 考虑桌面版/移动版变体的断点
   • 保留 Figma 中的约束行为

输出结构示例：

// For React
import React from 'react';
import './styles.css';

export const ComponentName = () => {
  return (
    <div className="container">
      {/* Preserved hierarchy and styling */}
    </div>
  );
};

步骤 5：验证并完善

生成初始代码后：

1. 验证准确性：

   • 间距数值是否与设计完全一致？
   • 颜色是否准确（检查十六进制值）？
   • 布局行为是否匹配（响应式、换行）？

2. 检查可改进之处：

   • 是否可以将某些值提取为 CSS 变量？
   • 是否存在应组件化的重复模式？
   • 代码是否易于访问（语义化 HTML、ARIA 属性）？

3. 提出完善建议：

   • 适用时建议集成设计系统
   • 指出检测到的任何设计不一致之处
   • 提出优化建议（共享样式、提取组件）

最佳实践

设计到代码的准确性

• 切勿近似取值：使用 Figma 数据中的精确像素值、颜色和尺寸
• 保留层级结构：保持 Figma 画板/组的嵌套结构
• 匹配自动布局行为：Figma 的自动布局可直接映射为 Flexbox 属性
• 使用设计令牌：从 Figma Variables 中提取并复用颜色/间距变量

代码质量

• 语义化 HTML：使用恰当的 HTML 元素，而不只是 div
• 提取组件：从 Figma 组件中识别可复用组件
• 组织 CSS：将布局、排版和视觉样式分开
• 无障碍性：添加恰当的 ARIA 标签和语义结构

设计系统集成

• 检查变量：使用 Figma Variables 作为设计令牌
• 组件一致性：使 Figma 组件名称与代码组件名称保持一致
• Code Connect：如果可用，请参考组件的 Code Connect 映射
• 命名约定：遵循现有项目的类名/组件命名约定

性能

• 优化图像：建议使用恰当的图像格式和压缩方式
• CSS 效率：避免冗余样式，使用 CSS 变量
• 包体积：保持生成的代码精简且模块化

如需更详细的指导，请参考：

• references/setup-guide.md - 设置 Figma MCP 服务
• references/best-practices.md - 扩展最佳实践和示例

常见模式

模式 1：根据 Figma 创建落地页

User provides: Figma link to landing page design
Process:
1. Fetch complete page structure with get_figma_data
2. Identify sections (hero, features, CTA, footer)
3. Generate semantic HTML with section elements
4. Extract colors/typography to CSS variables
5. Implement responsive behavior from constraints

模式 2：组件实现

User provides: Figma link to button component with variants
Process:
1. Fetch component definition with get_figma_components
2. Identify variants (primary, secondary, sizes)
3. Create React component with props for variants
4. Extract shared styles to base component
5. Implement variant-specific styles as props/classes

模式 3：提取设计系统

User requests: Extract design tokens from Figma file
Process:
1. Fetch variables with get_figma_variables
2. Fetch text/color styles with get_figma_styles
3. Generate CSS custom properties or theme object
4. Document token naming and usage
5. Export as stylesheet or config file

故障排除

MCP 服务不可用：

• 检查是否已在 MCP 设置中配置 Figma MCP 服务
• 参考 references/setup-guide.md 获取设置说明
• 确认用户拥有合适的 Figma 套餐（官方服务需要 Dev Mode 访问权限）

设计数据不完整：

• 确保可以访问 Figma 文件（权限）
• 确认 URL 中的 node-id 正确
• 如果子节点返回的数据有限，请尝试获取父级画板

代码的视觉效果与设计不符：

• 再次检查间距和尺寸数值
• 确认颜色值是 Figma 中准确的十六进制代码
• 检查字体是否已正确加载
• 检查自动布局的方向和对齐属性

资源

此技能包含参考文档，可帮助开展 Figma MCP 工作流：

references/setup-guide.md

在 Claude Code 和其他 MCP 客户端中配置 Figma MCP 服务（官方和社区方案）的完整设置说明。用户需要设置集成时可参考此文档。

references/best-practices.md

扩展最佳实践、详细示例和高级模式，涵盖设计到代码的转换，包括组件架构、响应式设计策略和设计系统集成。

最新更新

社区服务更名（2026 年 4 月）： GLips 推出的热门社区 MCP 服务已从 “figma-developer-mcp” 更名为 Framelink MCP for Figma（v0.11.0，14.5k+ 星标）。现在支持无状态 HTTP 传输、VS Code 图层生成和提示词注入防护。为保持向后兼容，npm 包名称仍为 figma-developer-mcp。更新后的配置请参阅 references/setup-guide.md。