搭建基础样式库

从这一节开始，我们才真正进入实际的设计过程。在《Figma 的基本理念》一文中说到，虽然我们不必急于一开始就创建一个组件样式库，但是我们可以先搭建一些基础的样式。

样式库（Style）是什么？

样式是 Figma 中的一些可以复用的模式，目前支持四种：

• 颜色（Color）：可以用于图形背景色、文字颜色、描边颜色；
• 文本（Text）：字体、字号、行高等；
• 效果（Effect）：内外投影、模糊、背景模糊（毛玻璃效果）；
• 布局栅格（Layout Grid）：上一篇文章中提到的网格、横向和纵向布局参考。

为什么需要样式库？

无论是平面设计还是用户界面设计，在设计之前最重要的一件事就是确定基调。我们的最终产品要传达给用户怎样的感觉？是要传递专业感还是要传递亲切感？这会影响我们最终的设计风格，并在用户脑海中形成一种记忆。比如 Google 和 Apple 就拥有完全不同的设计风格，所以一个 App 界面看上一眼就能知道属于谁（如果遵循对应平台规范的话）。

图来自 Material Baseline design Kit 和 iOS 15 UI Kit for Figma

在一个设计系统中，样式库就是用来描述设计风格的。一个完善的样式库，既可以确定整个产品的风格基调，保证产品整体风格的一致性，还可以作为设计团队的指导规范；在实际的设计中，样式库还可以帮你更快地迭代产品。如果你的设计稿中全部都使用共享样式，当后续需要调整时，只需要调整样式库即可，设计稿会跟着变化，而不需要一个个调整；样式库还可以作为唯一的设计表现数据源 design tokens，从 Figma 分发到各端代码中，保证开发最终还原的一致性。

开始创建样式库

说了这么多，现在我们来给 Bodcasts 创建样式库吧。一般在项目前期，通过情绪板等方法确定了设计基调之后，我们就可以先开始在 Figma 里面创建样式库了。其实一开始不可能创造出完美的样式库，因为样式库是需要随着项目迭代的，我们还会在后面的设计过程中不断调整。所以我们可以先创建一个基本的样式库，不必过于细致……