在 Figma 中构建设计系统的一些技巧

10/12/2025

本文整理了我在使用 Figma 构建设计系统过程中的一些实践经验与使用技巧。部分内容带有个人倾向，请根据实际需求参考。若能对你有所启发就更好了。

搭建前

• 设计系统不仅包含 Figma 组件，还应包括设计规范、使用说明、色彩、间距等内容。更核心的是代码实现。设计师需与开发保持同步，避免各自为政。
• 设计系统设计师常倾向于让所有图层都组件化，越多紫色越安全。但当前 Figma 的体系并不支持完全封闭的结构。应适度放权，允许业务设计师在必要时 Detach 组件，以提高灵活性。
• 提前规划变量与组件的组织方式。是否放在同一文件将影响后续的扩展与维护。

搭建时

• 避免构建过于复杂的组件。将其拆解为更小、可复用的基础单元。
• 控制组件属性的数量，尤其在处理多变体时，保持清晰与可维护性。简单的变体选择可能比设置许多可调整属性更高效。
• 对于数量不确定的组件（如列表），不必穷尽所有可能性，否则容易造成性能问题。参考之前的原则，保持灵活性。
• 可以通过自研插件提升团队在内部系统中的使用效率和解决上一条问题。
• 可将常用变量（特别是颜色）复制一份集中置于前列，减少查找时间。
• 在制作变体（variant）时，将状态命名为 true 与 false，可实现类似开关的切换体验。
• 组件名前加下划线 _ 或点 .，可在发布时自动隐藏。
• 对图标组件进行 Union 并命名为 Vector，以避免在切换图标时出现颜色替换异常。

搭建后

TBD