HTMLPAGE 开始使用
设计规范 精选推荐

使用 Figma 搭建设计系统：从 0 到 1 的完整实践指南

HTMLPAGE 团队
15 分钟阅读

系统讲解如何在 Figma 中构建企业级设计系统，涵盖组件架构、变量系统、自动布局、版本管理等核心技能，实现设计与开发的高效协作。

#Figma #设计系统 #组件库 #Design Tokens #UI设计

使用 Figma 搭建设计系统：从 0 到 1 的完整实践指南

设计系统不是一堆组件的集合，而是产品设计语言的具象化表达。Figma 作为当下最流行的设计工具，为构建设计系统提供了强大的支持。

本文将带你从零开始，用 Figma 搭建一套真正可用的设计系统。

设计系统的价值

没有设计系统的痛点

设计师 A：这个按钮用 8px 圆角
设计师 B：我用的 4px...
设计师 A：主色是 #3B82F6
设计师 B：我这边是 #2563EB
开发者：到底用哪个？？？

三个月后：
产品经理：为什么同样的功能，App 和 Web 长得不一样？

设计系统带来的改变

统一的视觉语言
├── 所有产品使用相同的颜色、字体、间距
├── 组件复用率提升 70%
├── 设计稿交付时间缩短 50%
└── 设计师-开发者沟通成本降低 60%

Figma 设计系统架构

文件结构设计

📁 Design System
├── 📄 0. Overview (系统概览)
│   ├── 设计原则
│   ├── 使用指南
│   └── 更新日志
│
├── 📄 1. Foundations (基础层)
│   ├── Colors (颜色系统)
│   ├── Typography (字体系统)
│   ├── Spacing (间距系统)
│   ├── Elevation (阴影系统)
│   └── Iconography (图标系统)
│
├── 📄 2. Components (组件层)
│   ├── Atoms (原子组件)
│   │   ├── Button
│   │   ├── Input
│   │   ├── Checkbox
│   │   └── ...
│   ├── Molecules (分子组件)
│   │   ├── Form Field
│   │   ├── Card
│   │   ├── Menu Item
│   │   └── ...
│   └── Organisms (有机体组件)
│       ├── Navigation
│       ├── Modal
│       ├── Data Table
│       └── ...
│
├── 📄 3. Patterns (模式层)
│   ├── Forms
│   ├── Data Display
│   ├── Feedback
│   └── Navigation
│
└── 📄 4. Templates (模板层)
    ├── Dashboard
    ├── Settings
    ├── Profile
    └── ...

基础层搭建

颜色系统

使用 Figma Variables 构建颜色系统：

颜色变量结构
├── Primitives (原始色)
│   ├── blue/50: #EFF6FF
│   ├── blue/100: #DBEAFE
│   ├── blue/200: #BFDBFE
│   ├── blue/300: #93C5FD
│   ├── blue/400: #60A5FA
│   ├── blue/500: #3B82F6
│   ├── blue/600: #2563EB
│   ├── blue/700: #1D4ED8
│   ├── blue/800: #1E40AF
│   ├── blue/900: #1E3A8A
│   └── blue/950: #172554
│   
├── Semantic (语义色)
│   ├── primary: {blue/500}
│   ├── primary-hover: {blue/600}
│   ├── primary-active: {blue/700}
│   │
│   ├── success: {green/500}
│   ├── warning: {yellow/500}
│   ├── error: {red/500}
│   ├── info: {blue/500}
│   │
│   ├── text/primary: {gray/900}
│   ├── text/secondary: {gray/600}
│   ├── text/disabled: {gray/400}
│   │
│   ├── background/default: {white}
│   ├── background/subtle: {gray/50}
│   ├── background/muted: {gray/100}
│   │
│   └── border/default: {gray/200}
│       border/strong: {gray/300}
│
└── Component (组件专用色)
    ├── button/primary/bg: {primary}
    ├── button/primary/bg-hover: {primary-hover}
    ├── button/primary/text: {white}
    └── ...

Figma 中创建：

  1. 打开 Variables 面板 (右侧 Local variables)
  2. 创建 Collection：Colors
  3. 添加 Mode：Light、Dark
  4. 创建变量并设置不同 Mode 下的值

字体系统

字体变量
├── Font Family
│   ├── sans: Inter, system-ui, sans-serif
│   ├── mono: JetBrains Mono, monospace
│   └── display: Cal Sans, sans-serif
│
├── Font Size
│   ├── xs: 12px
│   ├── sm: 14px
│   ├── base: 16px
│   ├── lg: 18px
│   ├── xl: 20px
│   ├── 2xl: 24px
│   ├── 3xl: 30px
│   ├── 4xl: 36px
│   └── 5xl: 48px
│
├── Line Height
│   ├── tight: 1.25
│   ├── snug: 1.375
│   ├── normal: 1.5
│   ├── relaxed: 1.625
│   └── loose: 2
│
├── Font Weight
│   ├── normal: 400
│   ├── medium: 500
│   ├── semibold: 600
│   └── bold: 700
│
└── Text Styles (组合)
    ├── Heading/H1: display 48px/tight bold
    ├── Heading/H2: display 36px/tight bold
    ├── Heading/H3: display 30px/tight semibold
    ├── Heading/H4: sans 24px/snug semibold
    ├── Body/Large: sans 18px/relaxed normal
    ├── Body/Default: sans 16px/normal normal
    ├── Body/Small: sans 14px/normal normal
    ├── Label/Default: sans 14px/tight medium
    └── Caption: sans 12px/tight normal

间距系统

间距变量 (基于 4px 基准)
├── spacing/0: 0px
├── spacing/0.5: 2px
├── spacing/1: 4px
├── spacing/1.5: 6px
├── spacing/2: 8px
├── spacing/2.5: 10px
├── spacing/3: 12px
├── spacing/4: 16px
├── spacing/5: 20px
├── spacing/6: 24px
├── spacing/8: 32px
├── spacing/10: 40px
├── spacing/12: 48px
├── spacing/16: 64px
├── spacing/20: 80px
└── spacing/24: 96px

圆角变量
├── radius/none: 0px
├── radius/sm: 2px
├── radius/default: 4px
├── radius/md: 6px
├── radius/lg: 8px
├── radius/xl: 12px
├── radius/2xl: 16px
├── radius/full: 9999px

阴影系统

阴影样式
├── shadow/sm
│   └── 0 1px 2px rgba(0,0,0,0.05)
│
├── shadow/default
│   └── 0 1px 3px rgba(0,0,0,0.1),
│       0 1px 2px rgba(0,0,0,0.06)
│
├── shadow/md
│   └── 0 4px 6px rgba(0,0,0,0.1),
│       0 2px 4px rgba(0,0,0,0.06)
│
├── shadow/lg
│   └── 0 10px 15px rgba(0,0,0,0.1),
│       0 4px 6px rgba(0,0,0,0.05)
│
├── shadow/xl
│   └── 0 20px 25px rgba(0,0,0,0.1),
│       0 10px 10px rgba(0,0,0,0.04)
│
└── shadow/2xl
    └── 0 25px 50px rgba(0,0,0,0.25)

组件设计

原子组件：Button

组件结构：

Button (Component Set)
├── Property: Size [Small, Medium, Large]
├── Property: Variant [Primary, Secondary, Outline, Ghost, Destructive]
├── Property: State [Default, Hover, Active, Disabled, Loading]
├── Property: Leading Icon [True/False]
├── Property: Trailing Icon [True/False]
│
└── Instance Swap: Icon

Auto Layout 配置：

Button
├── Direction: Horizontal
├── Padding: 
│   ├── Small: 8px 12px
│   ├── Medium: 10px 16px
│   └── Large: 12px 24px
├── Gap: 8px
├── Alignment: Center
└── Sizing: Hug Contents (or Fixed Width)

变体矩阵：

                Primary    Secondary   Outline    Ghost      Destructive
Default         ●          ●           ●          ●          ●
Hover           ●          ●           ●          ●          ●
Active          ●          ●           ●          ●          ●
Disabled        ●          ●           ●          ●          ●
Loading         ●          ●           ●          ●          ●

× 3 Sizes = 75 个变体

分子组件：Form Field

Form Field (Component)
├── Label (Text)
│   ├── Required Indicator (Text: *)
│   └── Optional Indicator (Text: 可选)
│
├── Input Container
│   ├── Leading Slot (Icon/Prefix)
│   ├── Input (Text)
│   └── Trailing Slot (Icon/Button)
│
├── Helper/Error Text
│   ├── Helper Icon
│   └── Helper Message
│
└── Properties
    ├── State: [Default, Focus, Error, Disabled]
    ├── Size: [Small, Medium, Large]
    ├── Required: [True/False]
    ├── Show Helper: [True/False]
    └── Leading/Trailing: [True/False]

有机体组件：Data Table

Data Table
├── Header Row
│   ├── Select All (Checkbox)
│   ├── Column Headers (Sortable)
│   └── Actions Column
│
├── Body Rows
│   ├── Row (Component)
│   │   ├── Select (Checkbox)
│   │   ├── Data Cells
│   │   └── Row Actions
│   └── States: [Default, Hover, Selected]
│
├── Pagination
│   ├── Page Info
│   ├── Page Size Selector
│   └── Page Navigation
│
└── Properties
    ├── Selectable: [True/False]
    ├── Sortable: [True/False]
    ├── Pagination: [True/False]
    └── Loading: [True/False]

高级技巧

1. 嵌套组件与属性传递

Card Component
├── Card Header (Nested Component)
│   ├── Title
│   ├── Subtitle  
│   └── Actions
├── Card Content (Slot)
└── Card Footer (Nested Component)

使用 Expose nested instances:
当选中 Card 时，可以直接修改 Header 中的属性

2. 布尔属性简化变体

不推荐：创建所有组合的变体
Button/Primary/Small/WithIcon/WithBadge
Button/Primary/Small/WithIcon/NoBadge
Button/Primary/Small/NoIcon/WithBadge
...

推荐：使用布尔属性
Button
├── Variant: Primary
├── Size: Small
├── Has Icon: true/false
└── Has Badge: true/false

3. 实例交换（Instance Swap）

Icon Button
├── Icon (Instance Swap Property)
│   └── 允许用户从图标库中选择任意图标
│
设置方法：
1. 选中图标实例
2. 右键 → Add to component properties
3. 类型选择 Instance swap
4. 设置 Preferred values 限定可选范围

4. 响应式组件设计

Container Component
├── Constraints:
│   ├── Left & Right (水平拉伸)
│   └── Top & Bottom (垂直拉伸)
│
├── Auto Layout:
│   ├── Fill Container (填充父容器)
│   └── Wrap (换行)
│
└── Min/Max Width:
    ├── Min: 320px
    └── Max: 1280px

设计-开发协作

Design Tokens 导出

// 使用 Figma Tokens Studio 插件导出
// 或使用 Figma API 获取变量

// tokens.json 格式
{
  "color": {
    "primary": {
      "value": "#3B82F6",
      "type": "color"
    },
    "primary-hover": {
      "value": "#2563EB",
      "type": "color"
    }
  },
  "spacing": {
    "sm": {
      "value": "8px",
      "type": "spacing"
    },
    "md": {
      "value": "16px", 
      "type": "spacing"
    }
  },
  "typography": {
    "body-default": {
      "value": {
        "fontFamily": "Inter",
        "fontSize": "16px",
        "lineHeight": "1.5",
        "fontWeight": "400"
      },
      "type": "typography"
    }
  }
}

转换为 CSS 变量

/* 使用 Style Dictionary 转换 */
:root {
  /* Colors */
  --color-primary: #3B82F6;
  --color-primary-hover: #2563EB;
  --color-primary-active: #1D4ED8;
  
  /* Spacing */
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  
  /* Typography */
  --font-family-sans: 'Inter', system-ui, sans-serif;
  --font-size-base: 16px;
  --line-height-normal: 1.5;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* Dark Mode */
[data-theme="dark"] {
  --color-primary: #60A5FA;
  --color-background: #1F2937;
  --color-text-primary: #F9FAFB;
}

转换为 Tailwind 配置

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: 'var(--color-primary-50)',
          100: 'var(--color-primary-100)',
          // ...
          500: 'var(--color-primary-500)',
          // ...
          900: 'var(--color-primary-900)',
        },
      },
      spacing: {
        // 使用 Figma 的间距系统
      },
      fontSize: {
        // 使用 Figma 的字体大小
      },
      borderRadius: {
        // 使用 Figma 的圆角
      },
      boxShadow: {
        // 使用 Figma 的阴影
      },
    },
  },
};

版本管理

分支策略

main (发布版本)
├── v1.0.0 (Tagged)
├── v1.1.0 (Tagged)
└── v1.2.0 (Current)

develop (开发版本)
├── feature/new-button-variant
├── feature/dark-mode
└── fix/input-focus-state

更新日志模板

## [1.2.0] - 2024-01-15

### 新增
- Button: 新增 `loading` 状态
- Input: 新增 `prefix` 和 `suffix` 插槽
- 新组件：Skeleton 骨架屏

### 变更
- Card: 调整默认圆角从 8px 到 12px
- 所有组件：更新 focus 状态样式

### 修复
- Dropdown: 修复选项过多时的滚动问题
- Modal: 修复在暗色模式下的背景色

### 废弃
- Badge: `type` 属性废弃，请使用 `variant`

### 迁移指南
更新 Button loading 状态的使用方式：
- 旧: isLoading 属性
- 新: state="loading"

组件状态标记

组件成熟度标签：
├── 🧪 Experimental - 实验性，可能有大改动
├── 🚧 Beta - 测试中，API 基本稳定
├── ✅ Stable - 稳定，可在生产使用
└── ⚠️ Deprecated - 已废弃，将在下版本移除

最佳实践

命名规范

组件命名: PascalCase
├── Button, TextField, DataTable

属性命名: camelCase
├── hasIcon, isDisabled, showBorder

变量命名: kebab-case + /
├── color/primary, spacing/lg, radius/md

样式命名: Type/Name
├── Body/Default, Heading/H1

组织技巧

页面布局
├── 左侧：组件展示区
│   ├── 所有变体预览
│   └── 使用示例
│
├── 右侧：文档区
│   ├── 属性说明
│   ├── 设计规范
│   └── 使用指南
│
└── 底部：Playground
    └── 可交互的组件实例

协作规范

## 设计师-开发者协作检查清单

### 设计交付
- [ ] 所有状态都已设计
- [ ] 边界情况已考虑（文本过长、内容为空等）
- [ ] 响应式布局已说明
- [ ] 动画/过渡效果已描述
- [ ] Design Tokens 已更新

### 开发反馈
- [ ] 技术可行性确认
- [ ] 实现成本评估
- [ ] 现有组件复用建议
- [ ] 性能影响评估

常见问题

Q: 变体太多，如何管理？

策略1：使用布尔属性替代变体组合
策略2：只创建常用组合，其他使用 Override
策略3：按使用场景拆分组件（PrimaryButton, IconButton）

Q: 如何处理设计债务？

1. 建立组件成熟度评估机制
2. 定期 Review 组件使用情况
3. 渐进式更新，避免破坏性变更
4. 维护迁移指南

Q: 团队成员不按规范使用怎么办？

1. 提供清晰的使用文档和示例
2. 定期 Design Review
3. 建立 Lint 工具自动检查
4. 收集反馈持续优化

结语

构建设计系统是一个持续演进的过程。一个好的设计系统应该：

  1. 易于使用：组件符合直觉，文档清晰
  2. 保持一致：视觉和交互体验统一
  3. 灵活扩展：可以适应新需求
  4. 持续维护：有清晰的更新和废弃流程

记住：设计系统的目标不是限制创造力，而是让团队能够更高效地创造优秀的产品体验。

"Design systems are never done. They're living, breathing organisms." —— Nathan Curtis

相关标签

# Figma # 设计系统 # 组件库 # Design Tokens # UI设计
返回专题列表

相关文章推荐

按钮组件设计详解

按钮组件设计详解

学习按钮样式、交互状态、无障碍性和最佳实践

暗黑模式设计完整方案

暗黑模式设计完整方案

学习暗黑模式实现、色彩方案、对比度管理和最佳实践

表单控件设计规范

表单控件设计规范

学习输入框、选择框、复选框等表单控件的设计和实现