Figma设计规范指南

1. 概述

本文档专门为 Figma 设计软件制定，基于 UI 界面设置指南和规范，提供在 Figma 中实施设计系统的具体方法和最佳实践。

2. Figma 文件组织结构

2.1. 文件命名规范

项目名称_模块名称_版本号_日期
例如：电商平台_用户中心_v2.1_20240101

2.2. 页面组织结构

  • 🎨 Design System - 设计系统页面
  • 📱 Components - 组件库页面
  • 🖼️ Templates - 模板页面
  • 📄 Pages - 具体页面设计
  • 🔍 Prototypes - 原型交互
  • 📋 Documentation - 设计文档

2.3. 图层命名规范

组件类型/状态_描述
例如：
- Button/Primary_登录按钮
- Input/Default_用户名输入框
- Card/Hover_产品卡片
- Icon/24px_搜索图标

3. Figma 设计系统搭建

3.1. 颜色样式 (Color Styles)

3.1.1. 创建颜色样式步骤

  • 选择颜色 → 右侧面板 → 颜色选择器
  • 点击样式图标 → 创建样式
  • 按照以下命名规范：
主色调：
Primary/100 - #E6F7FF
Primary/200 - #BAE7FF
Primary/300 - #91D5FF
Primary/400 - #69C0FF
Primary/500 - #40A9FF
Primary/600 - #1890FF (主色)
Primary/700 - #096DD9
Primary/800 - #0050B3
Primary/900 - #003A8C
中性色：
Neutral/White - #FFFFFF
Neutral/50 - #FAFAFA
Neutral/100 - #F5F5F5
Neutral/200 - #F0F0F0
Neutral/300 - #D9D9D9
Neutral/400 - #BFBFBF
Neutral/500 - #8C8C8C
Neutral/600 - #595959
Neutral/700 - #434343
Neutral/800 - #262626
Neutral/900 - #1F1F1F
Neutral/Black - #000000
功能色：
Success/Default - #52C41A
Warning/Default - #FAAD14
Error/Default - #F5222D
Info/Default - #1890FF

3.2. 文字样式 (Text Styles)

3.2.1. 创建文字样式步骤

  • 选择文本 → 右侧面板 → 文字属性
  • 设置字体、大小、行高、字重
  • 点击样式图标 → 创建样式
标题样式：
Heading/H1 - 36px/43px, Bold
Heading/H2 - 28px/34px, Bold
Heading/H3 - 24px/29px, Semibold
Heading/H4 - 20px/24px, Semibold
Heading/H5 - 18px/22px, Medium
Heading/H6 - 16px/19px, Medium
正文样式：
Body/Large - 18px/27px, Regular
Body/Default - 16px/24px, Regular
Body/Small - 14px/21px, Regular
Body/Caption - 12px/18px, Regular
特殊样式：
Button/Large - 16px/24px, Medium
Button/Default - 14px/21px, Medium
Button/Small - 12px/18px, Medium

3.3. 效果样式 (Effect Styles)

3.3.1. 阴影效果

Shadow/Level1 - Drop Shadow: 0px 1px 3px rgba(0,0,0,0.1)
Shadow/Level2 - Drop Shadow: 0px 2px 8px rgba(0,0,0,0.1)
Shadow/Level3 - Drop Shadow: 0px 4px 16px rgba(0,0,0,0.15)
Shadow/Level4 - Drop Shadow: 0px 8px 32px rgba(0,0,0,0.2)

3.3.2. 模糊效果

Blur/Light - Background Blur: 4px
Blur/Medium - Background Blur: 8px
Blur/Heavy - Background Blur: 16px

4. 组件库构建

4.1. 基础组件 (Base Components)

4.1.1. 按钮组件 (Button)

4.1.1.1. 变体属性设置

  • Type: Primary, Secondary, Text, Danger
  • Size: Large(48px), Default(40px), Small(32px)
  • State: Default, Hover, Active, Disabled

4.1.1.2. 组件结构

Button (Main Component)
├── Background (Rectangle)
├── Content (Auto Layout)
│   ├── Icon (Optional)
│   └── Label (Text)
└── States (Variants)

4.1.1.3. Auto Layout 设置

  • Direction: Horizontal
  • Spacing: 8px
  • Padding: 水平 16px, 垂直 8px
  • Alignment: Center

4.1.2. 输入框组件 (Input)

4.1.2.1. 变体属性设置

  • Size: Large(48px), Default(40px), Small(32px)
  • State: Default, Focus, Error, Disabled
  • Type: Text, Password, Search

4.1.2.2. 组件结构

Input (Main Component)
├── Container (Rectangle)
├── Content (Auto Layout)
│   ├── Prefix Icon (Optional)
│   ├── Placeholder/Value (Text)
│   └── Suffix Icon (Optional)
└── Helper Text (Text)

4.1.3. 卡片组件 (Card)

4.1.3.1. 变体属性设置

  • Elevation: Level1, Level2, Level3
  • State: Default, Hover
  • Border: True, False

4.1.3.2. 组件结构

Card (Main Component)
├── Background (Rectangle)
├── Content (Auto Layout)
│   ├── Header (Optional)
│   ├── Body (Auto Layout)
│   └── Footer (Optional)
└── Shadow (Effect Style)

4.2. 复合组件 (Composite Components)

4.2.1. 导航栏组件 (Navigation)

4.2.1.1. 组件结构

Navigation (Main Component)
├── Container (Auto Layout)
├── Logo Area (Auto Layout)
├── Menu Items (Auto Layout)
│   └── Menu Item (Component Instance)
└── Actions (Auto Layout)
    └── Button (Component Instance)

4.2.2. 表单组件 (Form)

4.2.2.1. 组件结构

Form (Main Component)
├── Form Container (Auto Layout)
├── Form Group (Auto Layout)
│   ├── Label (Text Style)
│   ├── Input (Component Instance)
│   └── Helper Text (Text Style)
└── Actions (Auto Layout)
    └── Button (Component Instance)

5. 网格系统设置

5.1. 布局网格 (Layout Grid)

5.1.1. 桌面端网格 (Desktop ≥1200px)

类型：Columns
列数：24
间距：24px
边距：48px
颜色：rgba(255, 0, 0, 0.1)

5.1.2. 平板端网格 (Tablet 768px-1199px)

类型：Columns
列数：12
间距：16px
边距：32px
颜色：rgba(0, 255, 0, 0.1)

5.1.3. 移动端网格 (Mobile)

类型：Columns
列数：4
间距：16px
边距：16px
颜色：rgba(0, 0, 255, 0.1)

5.2. 基线网格 (Baseline Grid)

间距：8px
颜色：rgba(0, 0, 0, 0.05)

6. Auto Layout 最佳实践

6.1. Auto Layout 设置原则

  • **方向选择：**根据内容排列选择 Horizontal 或 Vertical
  • **间距设置：**使用 8 的倍数（8px, 16px, 24px, 32px）
  • **对齐方式：**合理选择主轴和交叉轴对齐
  • **尺寸调整：**使用 Hug contents 或 Fill container

6.2. 常用 Auto Layout 模式

6.2.1. 水平排列 (Horizontal)

用途：按钮组、导航菜单、标签页
设置：
- Direction: Horizontal
- Spacing: 16px
- Alignment: Center
- Padding: 16px

6.2.2. 垂直排列 (Vertical)

用途：表单、卡片内容、列表
设置：
- Direction: Vertical
- Spacing: 24px
- Alignment: Top
- Padding: 24px

6.2.3. 嵌套布局 (Nested)

用途：复杂组件、页面布局
设置：
- 外层：Vertical (页面结构)
- 内层：Horizontal (内容排列)
- 合理使用 Fill 和 Hug

7. 约束和响应式设计

7.1. 约束设置 (Constraints)

7.1.1. 固定元素

导航栏：Left & Right + Top
侧边栏：Left + Top & Bottom
底部栏：Left & Right + Bottom

7.1.2. 自适应元素

主内容区：Left & Right + Top & Bottom
卡片：Left & Right + Top
按钮：Center + Top

7.2. 响应式组件设计

7.2.1. 断点设置

移动端：375px (iPhone)
平板端：768px (iPad)
桌面端：1200px (Desktop)
大屏幕：1600px (Large Desktop)

7.2.2. 组件适配策略

按钮：保持固定高度，宽度自适应
输入框：宽度 100%，高度固定
卡片：宽度自适应，内容 Hug
导航：移动端折叠，桌面端展开

8. 原型交互设计

8.1. 交互类型

8.1.1. 基础交互

  • On Click - 点击跳转
  • On Hover - 悬停效果
  • On Drag - 拖拽操作
  • While Pressing - 按压状态

8.1.2. 高级交互

  • After Delay - 延时触发
  • Mouse Enter/Leave - 鼠标进入/离开
  • Key/Gamepad - 键盘操作

8.2. 动画设置

8.2.1. 过渡动画

微交互：
- Duration: 150ms
- Easing: Ease Out
- 用途：按钮悬停、输入框聚焦
标准动画：
- Duration: 300ms
- Easing: Ease In Out
- 用途：页面切换、模态框
复杂动画：
- Duration: 500ms
- Easing: Spring
- 用途：列表展开、内容加载

8.2.2. Smart Animate

使用场景：
- 组件状态变化
- 页面间元素连续性
- 列表项动画
设置要点：
- 保持图层命名一致
- 使用相同组件实例
- 合理设置动画时长

9. 团队协作规范

9.1. 权限管理

9.1.1. 角色分配

Owner：项目负责人
- 完全访问权限
- 管理团队成员
- 发布组件库
Editor：设计师
- 编辑设计文件
- 创建和修改组件
- 添加评论
Viewer：开发者/产品经理
- 查看设计文件
- 添加评论
- 检查设计规范

9.2. 版本控制

9.2.1. 版本命名规范

v主版本.次版本.修订版本
例如：v2.1.3
主版本：重大功能更新
次版本：新增功能或组件
修订版本：Bug 修复或小调整

9.2.2. 分支管理

Main：主分支（稳定版本）
Develop：开发分支（新功能开发）
Feature：功能分支（具体功能开发）
Hotfix：修复分支（紧急修复）

9.3. 评论和反馈

9.3.1. 评论规范

设计评论：
- 明确指出问题位置
- 提供具体修改建议
- 使用 @ 提及相关人员
开发评论：
- 标注技术实现难点
- 确认交互细节
- 询问设计意图

10. 设计交付规范

10.1. 设计稿交付

10.1.1. 文件整理

交付前检查：
□ 页面命名规范
□ 图层命名清晰
□ 组件使用正确
□ 样式应用一致
□ 原型交互完整

10.1.2. 标注说明

必要标注：
- 尺寸标注（间距、大小）
- 颜色标注（色值、透明度）
- 字体标注（字号、行高、字重）
- 交互标注（状态、动画）

10.2. 开发者模式 (Dev Mode)

10.2.1. 使用指南

开发者功能：
- 自动生成CSS代码
- 获取精确尺寸数据
- 导出切图资源
- 查看组件属性

10.2.2. 代码导出

CSS属性：
- 自动生成样式代码
- 支持多种单位（px, rem, %）
- 包含响应式断点
资源导出：
- SVG图标导出
- 图片资源导出
- 支持多倍图

11. 插件推荐

11.1. 设计效率插件

11.1.1. 必装插件

Content Reel：
- 快速填充文本内容
- 支持中文假数据
- 提高设计效率
Unsplash：
- 高质量图片素材
- 直接插入设计稿
- 免费商用
Iconify：
- 海量图标库
- 支持多种风格
- 一键插入

11.1.2. 辅助插件

Figma to Code：
- 设计稿转代码
- 支持多种框架
- 提高开发效率
Contrast：
- 颜色对比度检查
- 无障碍设计辅助
- WCAG标准检测
Component Inspector：
- 组件使用情况分析
- 设计系统维护
- 组件优化建议

11.2. 团队协作插件

11.2.1. 沟通协作

FigJam：
- 在线白板协作
- 头脑风暴
- 流程图绘制
Miro：
- 项目规划
- 用户旅程图
- 团队协作

12. 质量检查清单

12.1. 设计质量检查

12.1.1. 视觉检查

□ 颜色使用符合设计系统
□ 字体样式应用正确
□ 间距遵循 8 点网格
□ 组件状态完整
□ 阴影效果合理
□ 圆角使用一致

12.1.2. 交互检查

□ 原型流程完整
□ 动画时长合理
□ 交互反馈明确
□ 错误状态处理
□ 加载状态设计

12.2. 技术检查

12.2.1. 开发友好性

□ 图层命名规范
□ 组件结构清晰
□ 约束设置正确
□ 样式可复用
□ 代码导出准确

12.2.2. 性能优化

□ 文件大小合理
□ 组件实例使用
□ 图片格式优化
□ 不必要元素清理

13. 常见问题解决

13.1. 组件问题

13.1.1. 组件不更新

解决方案：
检查组件实例是否被覆盖
重置组件实例
更新组件库
重新链接组件

13.1.2. 样式不生效

解决方案：
检查样式是否被覆盖
确认样式应用层级
重新应用样式
清除本地样式

13.2. 性能问题

13.2.1. 文件加载慢

优化方案：
减少页面数量
优化图片大小
清理无用元素
使用组件实例

13.2.2. 操作卡顿

解决方案：
关闭不必要的插件
清理浏览器缓存
重启 Figma 应用
检查网络连接

14. 更新日志

版本 1.0.0 (2024-01-01)

  • 初始版本发布
  • 建立 Figma 设计系统规范
  • 定义组件库标准
  • 制定团队协作流程

15. 参考资源

15.1. 官方文档

15.2. 社区资源

15.3. 学习资源

本指南将根据 Figma 功能更新和团队实践持续优化，确保与最新的设计趋势和工具功能保持同步。