Back to Details

figma-integration

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Figma Integration Guidelines

Figma集成指南

You are an expert in integrating Figma designs with development workflows. Apply these guidelines when working with Figma designs and implementing them in code.
您是将Figma设计集成到开发工作流的专家。在处理Figma设计并将其实现为代码时，请遵循以下指南。

Design-to-Code Workflow

设计转代码工作流

Extracting Design Information

提取设计信息

  • Identify component structure and hierarchy from Figma layers
  • Extract color values, typography settings, and spacing values
  • Note responsive behavior and breakpoint variations
  • Document interactive states (hover, active, focus, disabled)
  • Capture animation and transition specifications
  • 从Figma图层中识别组件结构和层级
  • 提取颜色值、排版设置和间距值
  • 记录响应式表现和断点变化
  • 记录交互状态（hover、active、focus、disabled）
  • 捕获动画和过渡效果规范

Component Mapping

组件映射

  • Map Figma components to code components
  • Identify reusable patterns and shared styles
  • Document variant properties and their code equivalents
  • Note auto-layout settings for flexbox/grid implementation
  • 将Figma组件映射为代码组件
  • 识别可复用模式和共享样式
  • 记录变体属性及其对应的代码实现
  • 记录用于Flexbox/Grid实现的自动布局设置

Implementation Guidelines

实施指南

Colors and Theming

颜色与主题

  • Extract color values in appropriate formats (hex, rgb, hsl)
  • Map Figma color styles to CSS custom properties or theme tokens
  • Ensure color contrast meets accessibility standards
  • Implement dark mode variants when specified
  • 以合适的格式（hex、rgb、hsl）提取颜色值
  • 将Figma颜色样式映射为CSS自定义属性或主题令牌
  • 确保颜色对比度符合无障碍标准
  • 按要求实现深色模式变体

Typography

排版

  • Extract font families, weights, and sizes
  • Map Figma text styles to CSS typography classes
  • Implement responsive typography scaling
  • Preserve line-height and letter-spacing values
  • 提取字体族、字重和字号
  • 将Figma文本样式映射为CSS排版类
  • 实现响应式排版缩放
  • 保留行高和字间距值

Spacing and Layout

间距与布局

  • Convert Figma auto-layout to CSS Flexbox or Grid
  • Extract padding and margin values
  • Implement consistent spacing scale
  • Handle responsive layout changes at breakpoints
  • 将Figma自动布局转换为CSS Flexbox或Grid
  • 提取内边距和外边距值
  • 实现统一的间距比例
  • 处理断点处的响应式布局变化

Components and Variants

组件与变体

  • Create component variants matching Figma structure
  • Implement interactive states consistently
  • Document prop interfaces based on Figma properties
  • Ensure component composition matches design intent
  • 创建与Figma结构匹配的组件变体
  • 统一实现交互状态
  • 根据Figma属性记录Props接口
  • 确保组件组合符合设计意图

Asset Handling

资源处理

Images and Icons

图片与图标

  • Export images at appropriate resolutions (1x, 2x, 3x)
  • Use SVG format for icons and simple graphics
  • Implement lazy loading for large images
  • Optimize file sizes for web performance
  • 以合适的分辨率（1x、2x、3x）导出图片
  • 图标和简单图形使用SVG格式
  • 为大图片实现懒加载
  • 优化文件大小以提升网页性能

Exporting Best Practices

导出最佳实践

  • Use consistent naming conventions for exports
  • Organize assets in logical folder structures
  • Document asset usage and context
  • Version control design assets appropriately
  • 对导出资源使用统一的命名规范
  • 按合理的文件夹结构组织资源
  • 记录资源的使用场景和上下文
  • 对设计资源进行适当的版本控制

Collaboration Workflow

协作工作流

Design Handoff

设计交接

  • Review designs with designers before implementation
  • Clarify ambiguous specifications
  • Document implementation decisions and trade-offs
  • Communicate technical constraints early
  • 实施前与设计师一起评审设计
  • 明确模糊的规范要求
  • 记录实施决策和取舍
  • 尽早沟通技术限制

Feedback Loop

反馈循环

  • Provide implementation previews for design review
  • Document deviations from original designs
  • Iterate based on design feedback
  • Maintain design-code consistency
  • 提供实施预览供设计师评审
  • 记录与原始设计的偏差
  • 根据设计反馈进行迭代
  • 保持设计与代码的一致性

MCP Server Integration

MCP服务器集成

Setup and Configuration

设置与配置

When using Figma MCP servers with Cursor:
  1. Navigate to Cursor Settings > Features > MCP
  2. Click "+ Add New MCP Server"
  3. Configure with appropriate name, type, and command/URL
  4. Refresh tool list to populate available tools
当在Cursor中使用Figma MCP服务器时：
  1. 进入Cursor设置 > 功能 > MCP
  2. 点击“+ 添加新MCP服务器”
  3. 配置合适的名称、类型和命令/URL
  4. 刷新工具列表以加载可用工具

Available MCP Tools

可用MCP工具

  • Figma MCP Server: Access design data directly from Figma
  • Figma Context MCP: AI-driven design operations and asset management
  • html.to.design MCP: Send HTML designs back to Figma
  • F2C MCP Server: Convert Figma nodes to HTML/CSS markup
  • Figma MCP Server：直接从Figma访问设计数据
  • Figma Context MCP：AI驱动的设计操作与资源管理
  • html.to.design MCP：将HTML设计同步回Figma
  • F2C MCP Server：将Figma节点转换为HTML/CSS标记

Usage Guidelines

使用指南

  • MCP tools activate automatically when relevant in Composer Agent
  • Explicitly request tools by name or describe their function
  • Tool execution requires user approval before processing
  • Ensure appropriate Figma access tokens are configured
  • 当Composer Agent中涉及相关操作时，MCP工具会自动激活
  • 可通过名称明确调用工具，或描述其功能来请求使用
  • 工具执行前需要用户批准
  • 确保已配置合适的Figma访问令牌

Quality Assurance

质量保证

Visual Comparison

视觉对比

  • Compare implementation against Figma designs
  • Check responsive behavior across breakpoints
  • Verify interactive states and animations
  • Test accessibility compliance
  • 将实现效果与Figma设计进行对比
  • 检查不同断点下的响应式表现
  • 验证交互状态和动画效果
  • 测试无障碍合规性

Design Token Validation

设计令牌验证

  • Verify color usage matches design specifications
  • Check typography implementation accuracy
  • Validate spacing and layout consistency
  • Ensure component variants match Figma
  • 验证颜色使用是否符合设计规范
  • 检查排版实现的准确性
  • 验证间距和布局的一致性
  • 确保组件变体与Figma一致

Figma API Usage

Figma API使用

Reading Design Data

读取设计数据

javascript
// Fetch file data
const file = await figma.getFile(fileKey);

// Get specific node
const node = await figma.getNode(fileKey, nodeId);

// Export images
const images = await figma.getImages(fileKey, {
  ids: [nodeId],
  format: 'svg',
  scale: 2
});
javascript
// Fetch file data
const file = await figma.getFile(fileKey);

// Get specific node
const node = await figma.getNode(fileKey, nodeId);

// Export images
const images = await figma.getImages(fileKey, {
  ids: [nodeId],
  format: 'svg',
  scale: 2
});

Common Operations

常见操作

  • Fetch component libraries
  • Export assets programmatically
  • Read style definitions
  • Access component variants
  • 获取组件库
  • 以编程方式导出资源
  • 读取样式定义
  • 访问组件变体

Best Practices

最佳实践

  • Always reference the source Figma file when implementing
  • Maintain a component library that mirrors Figma structure
  • Use design tokens for consistent theming
  • Document any implementation limitations or trade-offs
  • Keep Figma and code in sync during iterations
  • Communicate proactively with design team about constraints
  • Automate design token extraction when possible
  • 实施时始终参考源Figma文件
  • 维护与Figma结构一致的组件库
  • 使用设计令牌实现统一主题
  • 记录任何实施限制或取舍
  • 迭代过程中保持Figma与代码同步
  • 主动与设计团队沟通技术限制
  • 尽可能自动化提取设计令牌