设计系统中的排版 - Prototypr

你是否曾经想过超过90％的UI设计是关于排版的？设计中有两件确定的事情，颜色和排版。你可能有机会从之前的文章中了解颜色。这次让我们专注于将文本样式应用到你的设计系统中！

这是一系列文章，帮助你创建自己的设计系统UI库，之前的部分包括：

• 第1部分：开始之前 (opens new window)
• 第2部分：选择工具- Figma还是Sketch？ (opens new window)
• 第3部分：颜色 (opens new window)

良好的命名约定

一个设计良好的命名约定是基于设计系统的高效UI设计的关键。为特定的项目和平台准备文本样式的名称。

我用来定义命名约定的关键策略是 数字顺序。感谢这段文字，样式按照从大到小的顺序排列（例如01 标题1到12 上划线）

来自Prime Design System Kit (opens new window)的排版设置-足够用于网页和移动项目

如果您使用的是Figma，事情就很简单。在这个设计工具中，文本样式只需要定义字体、大小和一些附加参数。颜色和对齐是独立的。

当您使用Sketch时，创建文本样式会稍微复杂一些，并且您需要创建更多的样式。您必须在内部定义特定样式的颜色和对齐方式。Sketch中的命名约定如下：

[样式名称]/[对齐方式]/[颜色]

例如：09 正文/居中/主要

请记住，颜色部分应按照图层样式和颜色变量的相同命名约定命名。我在设计系统颜色 (opens new window)文章中提到了这个策略。 通常，我会根据文本内容的基本视觉样式设置整个排版比例尺：H1、H2、H3… H6、副标题、正文、标题和上划线。