1.快捷键背多用2.矩形3.字体4.颜色5. Frame6.组7.组件动态的改一个其他的也一块改8.这个变体组件有点难多种形态## ✅ 两种创建方法 ### 方法 1从单个组件新增变体推荐新手 1. 画好基础 UI比如默认按钮选中 → 右侧面板点 **Create component**快捷键 CtrlAltK / Mac ⌘OptionK变成主组件 2. 右侧面板找到 **Add variant**点一下自动复制一份变体外层出现**紫色虚线框 组件集** 3. 在右侧【Properties】修改**属性名**和**属性值** - 例属性名State值Default / Hover / Pressed / Disabled 4. 选中每一个变体修改视觉样式颜色、描边、文字 5. 继续点紫色底部的 ****不断增加更多变体 ### 方法 2多个组件批量合并适合一次性建好所有状态 1. 把所有状态画好**每个单独转成 Component** 2. 全选所有组件 3. 右侧面板 → **Combine as variants** 合并成组件集 命名小技巧自动识别属性Button/StateDefault/ 用来分割属性批量改名 CtrlR ## ✅ 多维变体多个属性组合最常用 比如按钮同时有两个属性 - SizeS / M / L - ThemePrimary / 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. TriggerOn Click点击可加 Smart Animate 智能动画 4. 预览模式点击实例直接在原型里切换状态不用页面跳转Figma Lear... ## ✅ 常用快捷键 小技巧 - CtrlAltK 创建组件 - 选中组件集点底部 快速增加变体 - 选中实例可以单独覆盖文字不会破坏变体样式 - 组件集外层紫色框**不要直接修改紫色框样式**只编辑里面每一个变体 - 不要变体数量爆炸超过 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 ↔ Hover9. 自动布局记住一个判断原则内容决定尺寸用 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 设计师应有的专业表达。附录 E7 天入门练习计划 如果你想像新手一样一步步练不建议第一天就做完整 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 做交付。