8个实用步骤教你执行与落地一套设计系统(六)


步骤6:创建控件

随着讨论的深入,我们开始构建样式规范。我创建了文本和图层样式库,并在满足其状态和变化时对Sketch上的每个组件进

行控件化。

                                                                    Sketch上的文本和图层样式库

                                                                 Sketch上的组件库

我们再一次梳理了内容,并参考其他的UI Kits,以比较命名方式。我意识到,实际上不存在完美的命名方式,我们应当找到

适合我们的。随着工具的不断更新,我们还可能要相应地调整工作流程。

举个例子,最近的sketch60更新,更新了组件面板和弹窗。我们之前的样式库命名方式是根据大小、字重、颜色、对齐方式

和线条高度划分多个层。在新版本的弹窗中,我们必须点击很多次才能找到特定的样式。

                                                                      更新过的命名方式

为了适应这次更新,我拉平了命名结构,现在可以通过[size] [weight] 来搜索那些带有或不带默认行高的字体颜色,或通过

[colour]来查看按大小和字重排序的此颜色的字体。我们的中性色色板的命名也从[Dark], [Mid] 和 [Light] 缩短为 [D],

[M],和 [L],因为弹出框的空间有限。在未来,我预计将会有更多的变化,但总体来说,这些更新肯定会提高我们的效率。

>