Back to Details

figma-mcp

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Figma MCP

Figma MCP

Overview

概述

This skill enables accurate design-to-code conversion by leveraging Figma's MCP (Model Context Protocol) server to access structured design data directly from Figma files. Unlike screenshot-based approaches, the Figma MCP provides semantic information about every design element including exact spacing, colors, typography, component hierarchy, and design system tokens, resulting in significantly more accurate code generation.
本技能通过Figma的MCP（Model Context Protocol）服务器直接从Figma文件中获取结构化设计数据，实现精准的设计转代码转换。与基于截图的方法不同，Figma MCP提供每个设计元素的语义信息，包括精确间距、颜色、排版、组件层级和设计系统令牌，生成的代码准确性显著提升。

When to Use This Skill

适用场景

Trigger this skill when users:
  • Provide Figma URLs (file links or frame selection links)
  • Request converting/implementing Figma designs into code
  • Ask to "build this from Figma" or "implement this design"
  • Need to extract design tokens, variables, or design system values
  • Want to update existing code to match a Figma design
  • Mention maintaining design-to-code consistency
在以下场景触发此技能：
  • 用户提供Figma URL（文件链接或框架选择链接）
  • 用户请求将Figma设计转换/实现为代码
  • 用户要求“根据Figma构建此内容”或“实现这个设计”
  • 用户需要提取设计令牌、变量或设计系统值
  • 用户希望更新现有代码以匹配Figma设计
  • 用户提及要保持设计与代码的一致性

Workflow

工作流程

Step 1: Receive Figma Design Reference

步骤1：接收Figma设计参考

When a user provides a Figma URL or requests design implementation:
  1. Identify the Figma link type:
    • File URL: 
      https://www.figma.com/file/[FILE_KEY]/...
    • Frame selection: 
      https://www.figma.com/file/[FILE_KEY]/...?node-id=[NODE_ID]
    • Design URL: 
      https://www.figma.com/design/[FILE_KEY]/...
  2. Confirm access:
    • Verify the Figma MCP server is configured and accessible
    • If not configured, reference 
      references/setup-guide.md
      for setup instructions
当用户提供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
      获取设置说明

Step 2: Fetch Design Data Using MCP Tools

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

Use the available Figma MCP tools to retrieve structured design data:
Key MCP Tools Available:
  • get_figma_data - Fetch complete design data for a file or specific frame
  • get_figma_variables - Extract design tokens (colors, spacing, typography)
  • get_figma_components - Retrieve component definitions and instances
  • get_figma_styles - Access text, color, and effect styles
Best Practice: Start with 
get_figma_data
for the specific frame or node the user referenced. This provides the complete structure, layout data, and styling information.
Example workflow:
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
使用可用的Figma MCP工具检索结构化设计数据：
可用的核心MCP工具：
  • get_figma_data - 获取文件或特定框架的完整设计数据
  • get_figma_variables - 提取设计令牌（颜色、间距、排版）
  • get_figma_components - 检索组件定义和实例
  • get_figma_styles - 访问文本、颜色和效果样式
最佳实践： 首先使用
get_figma_data
获取用户引用的特定框架或节点的数据，这将提供完整的结构、布局数据和样式信息。
示例流程：
用户：“实现这个Figma设计：[带node-id的Figma URL]”

1. 从URL中提取file_key和node_id
2. 使用file_key和node_id参数调用get_figma_data
3. 接收包含以下内容的结构化JSON：
   - 元素层级（框架、组、组件）
   - 布局属性（位置、尺寸、约束、自动布局）
   - 样式（填充、描边、效果、排版）
   - 组件实例和变体
   - 设计令牌和变量

Step 3: Analyze Design Structure

步骤3：分析设计结构

Before generating code, analyze the fetched design data:
  1. Identify component hierarchy:
    • What are the main containers/sections?
    • Which elements are reusable components?
    • How does the layout flow (flex, grid, absolute)?
  2. Extract design system values:
    • Colors (fills, strokes, backgrounds)
    • Typography (font families, sizes, weights, line heights)
    • Spacing (padding, margins, gaps)
    • Borders, shadows, effects
  3. Determine layout approach:
    • Auto-layout frames → Flexbox or CSS Grid
    • Absolute positioning → CSS absolute/relative positioning
    • Constraints → Responsive behavior
在生成代码之前，分析获取的设计数据：
  1. 识别组件层级：
    • 主要容器/区块有哪些？
    • 哪些元素是可复用组件？
    • 布局流是怎样的（flex、grid、绝对定位）？
  2. 提取设计系统值：
    • 颜色（填充、描边、背景）
    • 排版（字体家族、字号、字重、行高）
    • 间距（内边距、外边距、间隙）
    • 边框、阴影、效果
  3. 确定布局方案：
    • 自动布局框架 → Flexbox或CSS Grid
    • 绝对定位 → CSS absolute/relative定位
    • 约束 → 响应式行为

Step 4: Generate Code

步骤4：生成代码

Generate production-ready code based on the design data:
Code generation principles:
  1. Use semantic HTML:
    • Frames → 
      <div>
      , 
      <section>
      , 
      <header>
      , etc.
    • Text → 
      <h1>-<h6>
      , 
      <p>
      , 
      <span>
    • Buttons → 
      <button>
    • Images → 
      <img>
  2. Preserve design system values:
    • Extract color variables from Figma variables
    • Create CSS custom properties for spacing, colors, typography
    • Use exact values from design (don't approximate)
  3. Match layout behavior:
    • Auto-layout with padding/gap → Flexbox with gap/padding
    • Auto-layout direction → flex-direction
    • Constraints → Responsive CSS (flex-grow, min/max-width)
  4. Component-based architecture:
    • Figma components → React/Vue components or CSS classes
    • Component instances → Component usage with props
    • Variants → Props or conditional classes
  5. Responsive considerations:
    • Use relative units where appropriate (rem, em, %)
    • Consider breakpoints for desktop/mobile variants
    • Preserve constraint behavior from Figma
Example output structure:
typescript
// For React
import React from 'react';
import './styles.css';

export const ComponentName = () => {
  return (
    <div className="container">
      {/* Preserved hierarchy and styling */}
    </div>
  );
};
基于设计数据生成可用于生产环境的代码：
代码生成原则：
  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类
    • 组件实例 → 带props的组件使用方式
    • 变体 → Props或条件类
  5. 响应式考虑：
    • 适当使用相对单位（rem、em、%）
    • 考虑桌面/移动变体的断点
    • 保留Figma中的约束行为
示例输出结构：
typescript
// For React
import React from 'react';
import './styles.css';

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

Step 5: Validate and Refine

步骤5：验证与优化

After generating initial code:
  1. Verify accuracy:
    • Do spacing values match the design exactly?
    • Are colors accurate (check hex values)?
    • Does the layout behavior match (responsive, wrapping)?
  2. Check for improvements:
    • Can any values be extracted to CSS variables?
    • Are there repeated patterns that should be componentized?
    • Is the code accessible (semantic HTML, ARIA attributes)?
  3. Offer refinements:
    • Suggest design system integration if applicable
    • Mention any design inconsistencies detected
    • Propose optimizations (shared styles, component extraction)
生成初始代码后：
  1. 验证准确性：
    • 间距值是否与设计完全匹配？
    • 颜色是否准确（检查十六进制值）？
    • 布局行为是否一致（响应式、换行）？
  2. 检查可优化点：
    • 是否有值可以提取为CSS变量？
    • 是否有重复模式应该组件化？
    • 代码是否可访问（语义化HTML、ARIA属性）？
  3. 提供优化建议：
    • 若适用，建议集成设计系统
    • 提及检测到的任何设计不一致性
    • 提出优化方案（共享样式、组件提取）

Best Practices

最佳实践

Design-to-Code Accuracy

设计转代码准确性

  • Never approximate values: Use exact pixel values, colors, and measurements from Figma data
  • Preserve hierarchy: Maintain the nesting structure from Figma frames/groups
  • Match auto-layout behavior: Figma's auto-layout maps directly to Flexbox properties
  • Use design tokens: Extract and reuse color/spacing variables from Figma Variables
  • 绝不近似值：使用Figma数据中的精确像素值、颜色和测量值
  • 保留层级结构：维持Figma框架/组的嵌套结构
  • 匹配自动布局行为：Figma的自动布局直接对应Flexbox属性
  • 使用设计令牌：从Figma Variables中提取并复用颜色/间距变量

Code Quality

代码质量

  • Semantic HTML: Use appropriate HTML elements, not just divs
  • Component extraction: Identify reusable components from Figma components
  • CSS organization: Separate layout, typography, and visual styling
  • Accessibility: Add appropriate ARIA labels and semantic structure
  • 语义化HTML：使用合适的HTML元素，而不只是div
  • 组件提取：从Figma组件中识别可复用组件
  • CSS组织：分离布局、排版和视觉样式
  • 可访问性：添加适当的ARIA标签和语义结构

Design System Integration

设计系统集成

  • Check for variables: Use Figma Variables for design tokens
  • Component consistency: Match Figma component names to code component names
  • Code Connect: If available, reference Code Connect mappings for components
  • Naming conventions: Follow existing project conventions for classes/components
  • 检查变量：使用Figma Variables作为设计令牌
  • 组件一致性：使Figma组件名称与代码组件名称匹配
  • Code Connect：如果可用，参考组件的Code Connect映射
  • 命名规范：遵循现有项目的类/组件命名约定

Performance

性能

  • Optimize images: Suggest appropriate image formats and compression
  • CSS efficiency: Avoid redundant styles, use CSS variables
  • Bundle size: Keep generated code lean and modular
For more detailed guidance, reference:
  • references/setup-guide.md
    - Setting up Figma MCP server
  • references/best-practices.md
    - Extended best practices and examples
  • 优化图片：建议合适的图片格式和压缩方式
  • CSS效率：避免冗余样式，使用CSS变量
  • 包体积：保持生成的代码精简且模块化
如需更详细的指导，请参考：
  • references/setup-guide.md
    - 设置Figma MCP服务器
  • references/best-practices.md
    - 扩展最佳实践和示例

Common Patterns

常见模式

Pattern 1: Landing Page from Figma

模式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
用户提供：着陆页设计的Figma链接
流程：
1. 使用get_figma_data获取完整页面结构
2. 识别区块（hero、功能区、CTA、页脚）
3. 生成带section元素的语义化HTML
4. 将颜色/排版提取为CSS变量
5. 根据约束实现响应式行为

Pattern 2: Component Implementation

模式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
用户提供：带变体的按钮组件的Figma链接
流程：
1. 使用get_figma_components获取组件定义
2. 识别变体（主要、次要、尺寸）
3. 创建带变体props的React组件
4. 将共享样式提取到基础组件
5. 实现变体特定样式作为props/类

Pattern 3: Design System Extraction

模式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
用户请求：从Figma文件中提取设计令牌
流程：
1. 使用get_figma_variables获取变量
2. 使用get_figma_styles获取文本/颜色样式
3. 生成CSS自定义属性或主题对象
4. 记录令牌命名和使用方法
5. 导出为样式表或配置文件

Troubleshooting

故障排除

MCP server not available:
  • Check if Figma MCP server is configured in MCP settings
  • Reference 
    references/setup-guide.md
    for setup instructions
  • Verify user has appropriate Figma plan (Dev Mode access for official server)
Design data incomplete:
  • Ensure the Figma file is accessible (permissions)
  • Verify the node-id in the URL is correct
  • Try fetching parent frame if child node returns limited data
Code doesn't match design visually:
  • Double-check spacing and sizing values
  • Verify color values are exact hex codes from Figma
  • Check if fonts are loaded correctly
  • Review auto-layout direction and alignment properties
MCP服务器不可用：
  • 检查MCP设置中是否已配置Figma MCP服务器
  • 参考
    references/setup-guide.md
    获取设置说明
  • 验证用户是否拥有合适的Figma计划（官方服务器需要Dev Mode访问权限）
设计数据不完整：
  • 确保Figma文件可访问（权限正确）
  • 验证URL中的node-id是否正确
  • 如果子节点返回数据有限，尝试获取父框架的数据
代码视觉上与设计不匹配：
  • 仔细检查间距和尺寸值
  • 验证颜色值是否为Figma中的精确十六进制代码
  • 检查字体是否正确加载
  • 复查自动布局方向和对齐属性

Resources

资源

This skill includes reference documentation to support Figma MCP workflows:
此技能包含支持Figma MCP工作流的参考文档：

references/setup-guide.md

references/setup-guide.md

Complete setup instructions for configuring Figma MCP server (official and community options) in Claude Code and other MCP clients. Reference when users need to set up the integration.
在Claude Code和其他MCP客户端中配置Figma MCP服务器（官方和社区选项）的完整设置说明。当用户需要设置集成时参考此文档。

references/best-practices.md

references/best-practices.md

Extended best practices, detailed examples, and advanced patterns for design-to-code conversion including component architecture, responsive design strategies, and design system integration.
设计转代码转换的扩展最佳实践、详细示例和高级模式，包括组件架构、响应式设计策略和设计系统集成。