Figma 组件库搭建与易用性优化
tags
Design
Works
date
‣
✏️ 规范撰写方式文档信息使用规范交互逻辑案例组件💎 组件编辑原则原子化变量自动布局🚀 易用性优化查找精简组件列表添加别名编辑创建案例变体文本继承数据渲染组件上线效果跟进与优化查看组件数据评估组件分离数据跟踪组件具体使用情况参考资料
面向对象：组件编辑者
主要内容：针对组件库中 UX、UI 通用部分，不讨论各职能的细节；组件库分为前期筹备、中期搭建、后期维护 3 个阶段，本文介绍中期搭建相关的内容。
✏️ 规范撰写方式
每个组件/规范包含以下几个部分
文档信息
帮助使用者了解组件的更新情况，遇到问题时方便向负责人反馈。
- 创建时间
- 最近更新时间
- 创建人
- 最近更新人
使用规范
使用规范将显示在设计系统网站中，对外展示，内容包括：
- 简介
- 何时使用
- 如何使用
对外展示示例：
交互逻辑
软件工程师将根据此部分内容进行组件开发、撰写 API 文档。
除了和日常的交互稿一样写清楚交互逻辑外，还需要使组件拥有可配置的能力，例如按钮组件，需要支持「有图标」、「无图标」等可选项
案例
帮助阅读者快速了解组件的内容、测试组件的可用性，案例的制作需要满足以下原则：
- 需要将组件放置在实际界面上展示
例如「榜单」组件，则需要放置在包含页面头部、页脚信息等完整页面内进行展示。
- 尽量填上真实的数据（例如填上真实/模拟的用户昵称、奖励名称），而非使用「用户昵称」这类固定文案
数据填充方法可参考 Figma 设计稿填充外网数据
组件
设计师可在设计稿中调用
💎 组件编辑原则
原子化
基于「原子」原则，新组件的组成元素需要优先使用已有的原子组件进行组合；例如「表单」模板需要使用「按钮」+「文本框」原子进行组合。
在 CC 直播项目中，活动模板优先使用 CC 直播基础 UI Kit 的文字、颜色、组件等元素进行搭建。
具体可参考 《原子设计》
变量
同一个组件的不同变体，应使用「变量」功能进行打包组合，这样可以精简组件数量，组件更容易被搜索、发现。
若条件允许，应与软件工程师同步，使用相同的变量名称
自动布局
使用自动布局组织组件中的图层。
自动布局是 Figma 的重要功能，可以提升图层的编辑、管理效率；编辑逻辑与技术的实现逻辑接近便于设计师与软件工程师沟通布局逻辑。
🚀 易用性优化
查找
精简组件列表
使用变量将组件的不同变体进行打包组合，减少组件面板中的组件数量。
参考本文变量部分的说明。
组件命名方面，原子组件使用
/原子/ 前缀进行收纳，让组件列表保持清爽，让模板、有机体更容易查找。例如：✅ 数据显示/榜单/原子/表头
❌ 数据显示/榜单/表头
原子组件通常不会直接被调用，可以在推送组件库时忽略原子组件。通过在组件名称前增加 _ 或 . 符号即可忽略对应的组件。这样可以简化组件列表、搜索结果。
添加别名
组件名、别名均支持搜索，增加别名可以提高搜索的命中率。
添加别名的方法：选中目标组件后，在右侧编辑面板中添加别名。
别名添加规则：组件名使用英文，别名使用对应的中文以及其他别称；例如 rank 组件的别名可设置为：榜单 排行榜。
编辑
创建案例
不止搭建组件，还要产出案例以测试组件的可用性。根据测试结果优化组件的易用性（主要从变量、自动布局、布局约束几个维度进行优化）
参考本文案例部分的说明。
变体文本继承
组件存在不同的变体，变体之间虽有差异但仍然存在部分相同的元素。
对于共用的文本图层，不同变体需要使用相同的图层名称；可以使得切换变体后不重置文本信息，避免重新输入文本。
共用元素的图层名称相同，文本值可以继承：
共用元素的图层名称不同，文本值无法继承：
数据渲染
通过 Google Sheets Sync 插件支持将 Google 表格中的数据渲染到设计稿中。使用插件需要预先设置图层的名称为 # + 表头名称，例如将图层命名为 `#nickName` 标记图层渲染 `nickName` 列的数据。
针对需要渲染数据的图层，使用上述方法预先命名，方便组件具体使用时快速渲染数据。
数据可让技术同学帮忙整理。
组件上线效果跟进与优化
查看组件数据
Figma 提供了组件的数据看板，我们可以借此分析组件的使用情况
数据查看路径
评估组件分离数据
创建组件实例后，实例的编辑将受限，当用户希望自定义编辑时，通常就会分离实例，Figma 支持查看组件的分离次数
组件的分离次数是评估组件易用性的关键指标，通常用户会在以下情况分离组件
- 组件本身兼容的场景较少：提高场景的兼容性
- 使用者不了解组件变体或使用了不符合规范的交互方式：一方面优化组件的使用体验，另一方面宣传规范和组件的使用方式
跟踪组件具体使用情况
针对分离数据较高的组件，可以查看组件在哪些文件中应用，并分析、优化
