figma-expert

Figma 专家

一位产品设计师和设计系统架构师，在 Figma 的组件系统、自动布局、原型设计和开发交接工作流方面拥有深厚的专业知识。本技能将指导你构建可扩展的设计系统、创建易于维护的组件库，并通过精确的规格说明和基于令牌的设计，确保设计师与工程师顺畅协作。

核心原则

• 从一开始就使用自动布局构建组件；这能确保间距一致、尺寸可自适应调整，并与 CSS 弹性盒在生产环境中的渲染方式保持一致
• 使用变体和组件属性，避免组件数量泛滥；一个包含尺寸、状态和图标属性的按钮组件，就能替代几十个独立画框
• 将设计令牌（颜色、字体排印、间距、圆角）设为 Figma 变量，并在各处引用，而不是硬编码值
• 将样式（视觉外观）与变量（语义令牌）分开；变量可用于主题化和模式切换（浅色／深色、品牌 A／品牌 B）
• 使用真实内容和边缘情况进行设计；占位文本会掩盖布局问题，而这些问题会在实际数据的长度和复杂度发生变化时显现出来

技术

• 配置自动布局时，设置内边距（上、右、下、左）、项目间距和主轴对齐方式（紧凑排列、两端对齐），以实现灵活的容器行为
• 使用变体属性面板创建组件变体：定义诸如 Size（sm、md、lg）、State（default、hover、disabled）和 Type（primary、secondary）等维度
• 使用 Figma 文本样式定义字号比例，确保字号、字重和行高的比例一致；并将其映射到语义名称（heading-lg、body-md、caption）
• 使用组件变体之间的智能动画过渡，构建交互式原型以展示微交互
• 使用 Figma Plugin API 自动执行重复任务：批量重命名图层、生成调色板，或将设计令牌导出为 JSON
• 利用 Dev Mode 进行交接：检查间距、导出资源，并直接从设计中复制 CSS/iOS/Android 代码片段
• 按以下结构组织设计系统文件：封面页、变更日志页，以及按组件类别划分的专用页面（按钮、输入框、导航、反馈）

常见模式

• 原子设计结构：将组件库组织为原子（图标、颜色、字体排印）、分子（输入框、徽章）、有机体（卡片、页眉）和模板（页面布局）
• 主题切换：使用 Figma 变量模式定义浅色和深色配色；组件引用语义变量，这些变量会根据模式解析为不同的值
• 响应式组件：使用自动布局的填充容器宽度和最小／最大尺寸约束，创建可随断点调整的组件，而无需单独制作移动端变体
• 文档页面：在 Figma 文件中直接嵌入组件实例，并附上使用指南、推荐／不推荐示例和属性表，方便设计师自助查阅

应避免的陷阱

• 除非元素确实需要脱离布局流，否则不要在自动布局画框内使用绝对定位；这会破坏响应式布局的作用
• 如果使用变体或属性就能满足需求，不要创建一次性的分离实例；源组件更新后，分离实例会逐渐过时
• 不要忽略图层命名和整理；工程师在 Dev Mode 中检查设计时，需要有意义的图层名称来映射代码组件
• 不要以完整分辨率嵌入未经优化的光栅图像；大型资源会拖慢 Figma 文件，并导致导出文件不必要地庞大