figma-designer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Figma Designer

Figma 设计分析工具

"Transform Figma designs into implementation-ready specifications with pixel-perfect accuracy"

"将Figma设计精准转换为可直接用于开发的规范，实现像素级精度"

Overview

概述

This skill analyzes Figma designs through the Figma MCP server and generates detailed PRDs with precise visual specifications. It extracts design tokens, component specifications, and layout information that developers can implement directly.

本技能通过Figma MCP服务器分析Figma设计，生成包含精准视觉规范的详细PRD。它提取可直接供开发人员使用的设计令牌、组件规范和布局信息。

Prerequisites

前置条件

Figma MCP Server

Figma MCP 服务器

Ensure the Figma MCP server is connected and accessible:

bash

undefined

确保Figma MCP服务器已连接且可访问：

bash

undefined

Check if Figma MCP is available

mcp-list


If not available, install from: https://github.com/modelcontextprotocol/servers

Required Figma MCP tools:
- `figma_get_file` - Get file metadata
- `figma_get_nodes` - Get node details
- `figma_get_components` - Get component information

mcp-list


如果未安装，请从以下地址获取：https://github.com/modelcontextprotocol/servers

所需的Figma MCP工具：
- `figma_get_file` - 获取文件元数据
- `figma_get_nodes` - 获取节点详情
- `figma_get_components` - 获取组件信息

When This Skill Activates

技能触发条件

Activates when you:

Provide a Figma link (
```
https://www.figma.com/file/...
```
)
Upload a design screenshot and mention "Figma"
Say "analyze this design" or "extract design specs"
Ask to "create PRD from Figma"

当你进行以下操作时，本技能将触发：

提供Figma链接（
```
https://www.figma.com/file/...
```
）
上传设计截图并提及“Figma”
说出“分析此设计”或“提取设计规范”
要求“从Figma创建PRD”

Design Analysis Workflow

设计分析流程

Phase 1: Fetch Design Data

阶段1：获取设计数据

yaml

Input: Figma URL or File Key
  ↓
Extract File Key from URL
  ↓
Call figma_get_file to get metadata
  ↓
Call figma_get_nodes to get design tree
  ↓
Parse frame, component, and text nodes

yaml

Input: Figma URL or File Key
  ↓
Extract File Key from URL
  ↓
Call figma_get_file to get metadata
  ↓
Call figma_get_nodes to get design tree
  ↓
Parse frame, component, and text nodes

Phase 2: Extract Design Tokens

阶段2：提取设计令牌

Create a comprehensive design token inventory:

typescript

// Design Token Structure
interface DesignTokens {
  colors: {
    primary: string[];
    secondary: string[];
    neutral: string[];
    semantic: {
      success: string;
      warning: string;
      error: string;
      info: string;
    };
  };
  typography: {
    fontFamilies: Record<string, string>;
    fontSizes: Record<string, number>;
    fontWeights: Record<string, number>;
    lineHeights: Record<string, number>;
    letterSpacing: Record<string, number>;
  };
  spacing: {
    scale: number;  // 4, 8, 12, 16, etc.
    values: Record<string, number>;
  };
  borders: {
    radii: Record<string, number>;
    widths: Record<string, number>;
  };
  shadows: Array<{
    name: string;
    values: string[];
  }>;
}

创建完整的设计令牌清单：

typescript

// 设计令牌结构
interface DesignTokens {
  colors: {
    primary: string[];
    secondary: string[];
    neutral: string[];
    semantic: {
      success: string;
      warning: string;
      error: string;
      info: string;
    };
  };
  typography: {
    fontFamilies: Record<string, string>;
    fontSizes: Record<string, number>;
    fontWeights: Record<string, number>;
    lineHeights: Record<string, number>;
    letterSpacing: Record<string, number>;
  };
  spacing: {
    scale: number;  // 如4、8、12、16等
    values: Record<string, number>;
  };
  borders: {
    radii: Record<string, number>;
    widths: Record<string, number>;
  };
  shadows: Array<{
    name: string;
    values: string[];
  }>;
}

Phase 3: Analyze Component Hierarchy

阶段3：分析组件层级

File
├── Frames (Pages/Screens)
│   ├── Component Instances
│   │   ├── Primary Button
│   │   ├── Input Field
│   │   └── Card
│   └── Text Layers
│       ├── Headings
│       ├── Body
│       └── Labels

For each component, extract:

Props: Size, variant, state
Layout: Flex direction, alignment, gap, padding
Styles: Fill, stroke, effects
Content: Text content, icons, images
Constraints: Responsive behavior

文件
├── 框架（页面/屏幕）
│   ├── 组件实例
│   │   ├── 主按钮
│   │   ├── 输入框
│   │   └── 卡片
│   └── 文本图层
│       ├── 标题
│       ├── 正文
│       └── 标签

针对每个组件，提取以下信息：

属性：尺寸、变体、状态
布局：弹性方向、对齐方式、间距、内边距
样式：填充、描边、效果
内容：文本内容、图标、图片
约束：响应式行为

Phase 4: Generate Visual Specifications

阶段4：生成视觉规范

Use this template for each screen:

markdown

undefined

针对每个页面使用以下模板：

markdown

undefined

Screen: [Screen Name]

页面：[页面名称]

Layout Structure

布局结构

┌─────────────────────────────────────────┐
│ [Header/Nav]                              │
├─────────────────────────────────────────┤
│                                         │
│  [Main Content]                          │
│  ┌───────────┐  ┌───────────┐         │
│  │  Card 1   │  │  Card 2   │         │
│  └───────────┘  └───────────┘         │
│                                         │
├─────────────────────────────────────────┤
│ [Footer]                                 │
└─────────────────────────────────────────┘

┌─────────────────────────────────────────┐
│ [头部/导航栏]                              │
├─────────────────────────────────────────┤
│                                         │
│  [主要内容区]                          │
│  ┌───────────┐  ┌───────────┐         │
│  │  卡片1   │  │  卡片2   │         │
│  └───────────┘  └───────────┘         │
│                                         │
├─────────────────────────────────────────┤
│ [页脚]                                 │
└─────────────────────────────────────────┘

Design Specifications

设计规范

Colors

颜色

Token	Value	Usage
Primary	`#007AFF`	Primary buttons, links
Background	`#FFFFFF`	Screen background
Surface	`#F5F5F7`	Cards, sections
Text Primary	`#1C1C1E`	Headings, body
Text Secondary	`#8E8E93`	Captions, labels

令牌	取值	用途
Primary	`#007AFF`	主按钮、链接
Background	`#FFFFFF`	页面背景
Surface	`#F5F5F7`	卡片、区块
Text Primary	`#1C1C1E`	标题、正文
Text Secondary	`#8E8E93`	说明文字、标签

Typography

排版

Style	Font	Size	Weight	Line Height	Letter Spacing
Display Large	SF Pro Display	28px	Bold (700)	34px	-0.5px
Heading 1	SF Pro Display	24px	Bold (700)	32px	-0.3px
Heading 2	SF Pro Display	20px	Semibold (600)	28px	-0.2px
Body Large	SF Pro Text	17px	Regular (400)	24px	-0.4px
Body	SF Pro Text	15px	Regular (400)	22px	-0.3px
Caption	SF Pro Text	13px	Regular (400)	18px	-0.1px

样式	字体	尺寸	字重	行高	字间距
Display Large	SF Pro Display	28px	Bold (700)	34px	-0.5px
Heading 1	SF Pro Display	24px	Bold (700)	32px	-0.3px
Heading 2	SF Pro Display	20px	Semibold (600)	28px	-0.2px
Body Large	SF Pro Text	17px	Regular (400)	24px	-0.4px
Body	SF Pro Text	15px	Regular (400)	22px	-0.3px
Caption	SF Pro Text	13px	Regular (400)	18px	-0.1px

Spacing

间距

Token	Value	Usage
xs	4px	Icon padding
sm	8px	Tight spacing
md	12px	Card padding
lg	16px	Section spacing
xl	24px	Large gaps
2xl	32px	Page margins

令牌	取值	用途
xs	4px	图标内边距
sm	8px	紧凑间距
md	12px	卡片内边距
lg	16px	区块间距
xl	24px	大间距
2xl	32px	页面边距

Component: Primary Button

组件：主按钮

typescript

interface PrimaryButtonProps {
  size?: 'small' | 'medium' | 'large';
  variant?: 'primary' | 'secondary' | 'tertiary';
  disabled?: boolean;
}

// Sizes
size.small = {
  height: 32px,
  paddingHorizontal: 12px,
  fontSize: 15,
  iconSize: 16,
}

size.medium = {
  height: 40px,
  paddingHorizontal: 16px,
  fontSize: 15,
  iconSize: 20,
}

size.large = {
  height: 48px,
  paddingHorizontal: 24px,
  fontSize: 17,
  iconSize: 24,
}

// Variants
variant.primary = {
  backgroundColor: '#007AFF',
  color: '#FFFFFF',
}

variant.secondary = {
  backgroundColor: '#F5F5F7',
  color: '#007AFF',
}

variant.tertiary = {
  backgroundColor: 'transparent',
  color: '#007AFF',
}

typescript

interface PrimaryButtonProps {
  size?: 'small' | 'medium' | 'large';
  variant?: 'primary' | 'secondary' | 'tertiary';
  disabled?: boolean;
}

// 尺寸
size.small = {
  height: 32px,
  paddingHorizontal: 12px,
  fontSize: 15,
  iconSize: 16,
}

size.medium = {
  height: 40px,
  paddingHorizontal: 16px,
  fontSize: 15,
  iconSize: 20,
}

size.large = {
  height: 48px,
  paddingHorizontal: 24px,
  fontSize: 17,
  iconSize: 24,
}

// 变体
variant.primary = {
  backgroundColor: '#007AFF',
  color: '#FFFFFF',
}

variant.secondary = {
  backgroundColor: '#F5F5F7',
  color: '#007AFF',
}

variant.tertiary = {
  backgroundColor: 'transparent',
  color: '#007AFF',
}

Constraints & Responsive Behavior

约束与响应式行为

Element	Constraints	Responsive Behavior
Header	Left, Right, Top	Sticky on scroll
Sidebar	Left, Top, Bottom	Collapses to drawer on mobile
Content	Left, Right (16px)	Full width on mobile

元素	约束条件	响应式表现
头部	左、右、顶部固定	滚动时固定
侧边栏	左、上、下固定	在移动端折叠为抽屉
内容区	左右边距16px	移动端全屏显示

Interaction States

交互状态

Element	Default	Hover	Pressed	Disabled
Primary Button	opacity: 1	opacity: 0.8	opacity: 0.6	opacity: 0.4
Icon Button	opacity: 1	background: rgba(0,0,0,0.05)	background: rgba(0,0,0,0.1)	opacity: 0.3
Card	shadow: sm	shadow: md	-	opacity: 0.6

undefined

元素	默认状态	悬停状态	点击状态	禁用状态
主按钮	透明度：1	透明度：0.8	透明度：0.6	透明度：0.4
图标按钮	透明度：1	背景：rgba(0,0,0,0.05)	背景：rgba(0,0,0,0.1)	透明度：0.3
卡片	阴影：sm	阴影：md	-	透明度：0.6

undefined

Output Formats

输出格式

Option 1: Full PRD (Recommended)

选项1：完整PRD（推荐）

Generates a complete 4-file PRD:

```
docs/{feature}-notes.md
```
- Design decisions
```
docs/{feature}-task-plan.md
```
- Implementation tasks
```
docs/{feature}-prd.md
```
- Product requirements
```
docs/{feature}-tech.md
```
- Technical specifications

生成包含4个文件的完整PRD：

```
docs/{feature}-notes.md
```
- 设计决策文档
```
docs/{feature}-task-plan.md
```
- 开发任务计划
```
docs/{feature}-prd.md
```
- 产品需求文档
```
docs/{feature}-tech.md
```
- 技术规范文档

Option 2: Visual Spec Document

选项2：视觉规范文档

Generates a design specification document:

docs/{feature}-design-spec.md

生成设计规范文档：

docs/{feature}-design-spec.md

Option 3: Component Library

选项3：组件库

For design systems, generates:

src/components/
├── Button/
│   ├── Button.tsx
│   ├── Button.test.tsx
│   └── Button.stories.tsx
├── Input/
├── Card/
└── tokens.ts

针对设计系统，生成：

src/components/
├── Button/
│   ├── Button.tsx
│   ├── Button.test.tsx
│   └── Button.stories.tsx
├── Input/
├── Card/
└── tokens.ts

Quick Reference: Design Token Categories

快速参考：设计令牌分类

Always Extract These

必须提取的内容

Category	What to Extract	Why
Colors	Hex/RGBA values	Theme consistency
Typography	Font family, size, weight, spacing	Text hierarchy
Spacing	Padding, margin, gap values	Layout alignment
Borders	Radius, width values	Shape consistency
Shadows	Offset, blur, spread, color	Depth perception
Icons	Name, size, color	Visual consistency
Images	URL, dimensions, fit mode	Asset management

分类	提取内容	原因
颜色	Hex/RGBA值	保证主题一致性
排版	字体、尺寸、字重、间距	构建文本层级
间距	内边距、外边距、间隙值	保证布局对齐
边框	圆角、宽度值	保证形状一致性
阴影	偏移、模糊、扩散、颜色	营造层次感
图标	名称、尺寸、颜色	保证视觉一致性
图片	链接、尺寸、适配模式	资产管理

Design Review Checklist

设计审核清单

Frame Analysis Template

页面框架分析模板

For each frame/screen in the Figma file:

markdown

undefined

针对Figma文件中的每个框架/页面：

markdown

undefined

Frame: {Frame Name}

框架：{框架名称}

Purpose

用途

{What this screen does}

{该页面的功能}

Elements

元素

Element	Type	Styles	Props
{Name}	{Component/Text/Vector}	{css}	{props}
{Name}	{Component/Text/Vector}	{css}	{props}

元素名称	类型	样式	属性
{名称}	{组件/文本/矢量图}	{css样式}	{属性}
{名称}	{组件/文本/矢量图}	{css样式}	{属性}

Layout

布局

Container: {width, height, fill}
Position: {absolute/relative}
Constraints: {left, right, top, bottom}
Auto Layout: {direction, spacing, padding, alignment}

容器：{宽度、高度、填充方式}
定位：{绝对/相对}
约束：{左、右、上、下}
自动布局：{方向、间距、内边距、对齐方式}

Content Hierarchy

内容层级

{Primary element}
{Secondary element}
{Tertiary element}

{主要元素}
{次要元素}
{三级元素}

Notes

备注

{Any special considerations}

undefined

{特殊注意事项}

undefined

Integration with Other Skills

与其他技能的集成

Typical Workflow

典型工作流程

Figma URL → figma-designer → Visual Specs
                                ↓
                           prd-planner → PRD
                                ↓
                           implementation → Code
                                ↓
                           code-reviewer → Quality Check

Figma链接 → figma-designer → 视觉规范
                                ↓
                           prd-planner → PRD
                                ↓
                           implementation → 代码开发
                                ↓
                           code-reviewer → 质量检查

Handoff to Development

开发交接

After generating specifications:

markdown

undefined

生成规范后，使用以下模板进行交接：

markdown

undefined

Developer Handoff

开发交接文档

Design Files

设计文件

Figma: {url}
Design Spec: {link}

Figma：{链接}
设计规范：{链接}

Design Tokens

设计令牌

Generated:
```
tokens.ts
```
Color palette:
```
colors.ts
```
Typography:
```
typography.ts
```

生成文件：
```
tokens.ts
```
调色板：
```
colors.ts
```
排版规范：
```
typography.ts
```

Component Library

组件库

Storybook: {url}
Component docs: {link}

Storybook：{链接}
组件文档：{链接}

Assets

资源

Icons: {folder}
Images: {folder}
Exports: {format}

undefined

图标：{文件夹路径}
图片：{文件夹路径}
导出格式：{格式}

undefined

Best Practices

最佳实践

DO

建议

✅ Extract exact pixel values for critical dimensions ✅ Document component variants and states ✅ Include responsive breakpoints ✅ Note any platform differences (iOS vs Android) ✅ Include accessibility considerations ✅ Export design tokens as constants

✅ 提取关键尺寸的精确像素值 ✅ 记录组件变体和状态 ✅ 包含响应式断点 ✅ 标注平台差异（iOS vs Android） ✅ 考虑无障碍访问要求 ✅ 将设计令牌导出为常量

DON'T

禁忌

❌ Round spacing values (use exact 4px/8px/12px) ❌ Ignore hover/focus states ❌ Skip constraint behavior ❌ Forget about empty states ❌ Omit loading states ❌ Assume platform defaults without verification

❌ 不要对间距值取整（请使用精确的4px/8px/12px） ❌ 不要忽略悬停/焦点状态 ❌ 不要跳过约束行为 ❌ 不要忘记空状态 ❌ 不要省略加载状态 ❌ 不要未经验证就假设平台默认值

Examples and Platform Notes

示例与平台说明

See

references/example-output.md

for a full sample output and platform-specific considerations.

请查看

references/example-output.md

获取完整示例输出和平台特定注意事项。