企业官网建设流程全解析

1.快捷键（背&多用）

2.矩形

3.字体

4.颜色

5. Frame

6.组

7.组件（动态的，改一个其他的也一块改）

8.这个变体组件有点难（多种形态）

## ✅ 两种创建方法 ### 方法 1：从单个组件新增变体（推荐新手） 1. 画好基础 UI（比如默认按钮），选中 → 右侧面板点 **Create component**（快捷键 `Ctrl+Alt+K` / Mac `⌘+Option+K`），变成主组件 2. 右侧面板找到 **Add variant**，点一下自动复制一份变体，外层出现**紫色虚线框 = 组件集** 3. 在右侧【Properties】修改**属性名**和**属性值** - 例：属性名：`State`；值：`Default` / `Hover` / `Pressed` / `Disabled` 4. 选中每一个变体，修改视觉样式（颜色、描边、文字） 5. 继续点紫色底部的 **+**，不断增加更多变体 ### 方法 2：多个组件批量合并（适合一次性建好所有状态） 1. 把所有状态画好，**每个单独转成 Component** 2. 全选所有组件 3. 右侧面板 → **Combine as variants** 合并成组件集 > > 命名小技巧（自动识别属性）：`Button/State=Default`，`/` 用来分割属性，批量改名 `Ctrl+R` ## ✅ 多维变体（多个属性组合，最常用） 比如按钮同时有两个属性： - Size：`S / M / L` - Theme：`Primary / Ghost` 1. 在组件集右侧点 **Add property**，新增第二条属性 2. Figma 自动生成笛卡尔乘积（S-Primary、M-Primary、L-Primary、S-Ghost…） 3. 每个格子单独调整样式 > > 优势：实例上可以**分别切换尺寸和主题**，不用单独做一大堆组件 ## ✅ 使用实例 Instance 1. 从 Assets 资产面板，把**组件集拖到画布，生成实例** 2. 选中实例，右侧面板直接下拉切换变体属性（State / Size） 3. 只改主组件集，所有实例全局同步更新 ## ✅ 做原型交互：可交互组件 Interactive Component 1. 选中组件集里一个变体，进入右侧 **Prototype** 2. 从变体拖动连线到另一个变体，Action 选择 **Change to** 3. Trigger：On Click（点击），可加 Smart Animate 智能动画 4. 预览模式点击实例，直接在原型里切换状态（不用页面跳转）Figma Lear... ## ✅ 常用快捷键 & 小技巧 - `Ctrl+Alt+K` 创建组件 - 选中组件集，点底部 `+` 快速增加变体 - 选中实例：可以单独覆盖文字，不会破坏变体样式 - 组件集外层紫色框：**不要直接修改紫色框样式**，只编辑里面每一个变体 - 不要变体数量爆炸，超过 20 个建议拆分 ## ✅ 常见坑 1. ❌ 没有转 Component 直接合并 → 无法生成变体 2. ❌ 组件集紫色框里面放 Frame/Group，**必须全部是 Component** 3. ❌ 多维属性太多，组合爆炸（比如 4 个属性，会产生几十上百个变体，不好维护） 4. ❌ 实例 Detach 脱离组件之后，就不能切换变体了 ## ✅ 简单练习：按钮 4 态变体 1. 绘制按钮 Default → 创建组件 2. Add variant 增加 Hover、Pressed、Disabled 3. 属性名 `State`，分别修改填充颜色 4. 拖实例到画布，右侧切换状态 5. Prototype 里连线，点击切换 Default ↔ Hover

9. 自动布局：记住一个判断原则：内容决定尺寸，用 Hug；父级决定尺寸，用 Fill；完全固定不变，用 Fixed。

10. 布局模式

11. 插件（一本万利）

12.简单示例：

13. 项目流程

14. 插件替换真实数据

15. 组件库搭建：设计系统的核心工程

16. 切图、标注与交付

17. 交互演示与样机套用：让设计活起来

18. 团队协作

总结：Figma 全链路工作流回顾
完整的 Figma 工作流可以按 8 步走：先做需求分析，再画低保真线框图；接着搭设计系统，包括颜色、字体、间距和组件；然后进入高保真视觉设计，用组件系统填充真实内容；页面完成后做交互原型，发给团队评审；最后进入开发交付，用 Dev Mode / Inspect 或摹客查看标注、切图和代码参考。上线之后还要继续迭代，用 Branch 或版本记录管理新的设计方案。

Figma 的核心价值从来不只是画图——它是设计与开发之间最短的一条路。当设计师熟练掌握 Auto Layout、组件系统、Dev Mode / Inspect 交付等机制后，会发现自己与开发工程师的沟通效率产生质变：不再是"我觉得应该这样"，而是"这里的 padding 是 16px，用的是 color/action/primary，组件叫 Button/Primary/Medium"——这才是现代 UI 设计师应有的专业表达。

附录 E：7 天入门练习计划 如果你想像新手一样一步步练，不建议第一天就做完整 APP。下面这个 7 天计划更适合零基础。 第 1 天：熟悉界面和基础工具 目标：知道画布、Frame、图层、右侧属性栏分别是什么。 练习任务： 新建一个手机 Frame。 画 5 个矩形、3 个圆形、3 段文字。 修改它们的颜色、圆角、尺寸和位置。 学会用 Alt/Option 查看间距。 完成标准：你能说清楚 X/Y/W/H 分别代表什么，能用数值把元素放到指定位置。 第 2 天：做一个按钮和输入框 目标：理解 Frame、文字、Auto Layout 的基础用法。 练习任务： 做一个主按钮，高度 48，圆角 24。 按钮文字改成“立即预约”，按钮宽度自动适配文字。 做一个搜索框，左侧放搜索图标，右侧放占位文字。 把按钮和搜索框都创建为组件。 完成标准：按钮文字变长时，按钮不会散架。 第 3 天：做底部 TabBar 目标：理解组件变体和选中状态。 练习任务： 做 4 个 Tab：首页、社区、消息、我的。 每个 Tab 包含图标和文字。 做选中和未选中两种状态。 把它们组合成一个底部 TabBar。 完成标准：你可以快速切换某个 Tab 的选中状态。 第 4 天：做商品卡片 目标：理解卡片结构和图片填充。 练习任务： 创建 ProductCard Frame。 顶部放图片容器，使用图片 Fill。 下方放标题、机构名、价格、标签。 整个卡片用垂直 Auto Layout 管理。 完成标准：标题变成两行时，下面内容能自动下移。 第 5 天：临摹一个首页首屏 目标：把前 4 天的能力拼起来。 练习任务： 选一张新氧或更美首页截图作为参考。 只临摹第一屏，不要做完整长页面。 包含顶部栏、Banner、金刚区、一个推荐模块、底部 Tab。 尽量使用组件，不要每个元素都重新画。 完成标准：首页首屏结构完整，左右边距统一，模块间距统一。 第 6 天：整理视觉规范 目标：从“画页面”过渡到“做系统”。 练习任务： 建立颜色样式：主色、文字色、背景色、分割线。 建立文字样式：标题、正文、辅助说明。 整理组件：Button、TabBar、ProductCard、ListItem。 给每个组件命名。 完成标准：你能从 Assets 面板里找到并复用组件。 第 7 天：做简单交互和交付检查 目标：让设计稿可以演示、可以交给别人看。 练习任务： 复制首页，做一个项目详情页。 在 Prototype 里设置“点击商品卡 → 跳转详情页”。 标记需要导出的图标或图片。 用 Dev Mode / Inspect 查看按钮尺寸、颜色和间距。 完成标准：你能分享一个可点击原型链接，并能向开发说明一个按钮的尺寸、颜色、圆角和状态。 完成这 7 天后，再回头看完整 APP 项目，会轻松很多。你已经掌握了 Figma 最核心的工作方式：用 Frame 搭结构，用组件复用，用 Auto Layout 管排版，用 Prototype 做演示，用 Dev Mode 做交付。