奠定基础
好。所以最近我试图在Sketch中构建一个Design System。这是非常耗时的。有时候会感觉愉快，有时也令人沮丧，但是我很高兴我做到了。
现在拥有一个设计系统（它被称为Cabana），这个系统已经使我的工作流程提速了十倍，并为我在进行任何项目时积累了深入的基础。
受到我所接触过的其他系统的启发，我喜欢它能够节省时间优点，像系统这种东西可以带入到我的日常工作流程中。在我的最后一篇文章中，我的想法或许听起来天马行空，但实际上它大大提高了我的工作流程的速度，虽然在早期阶段我没有把它带入工作流。 KER-raaazzzy！
现在，就像习惯一样。但也有反对者从屋顶尖叫着“但是你必须改变4个symbol overrides，才能设计一个按钮。我可不觉得那有多酷“，我倾向于同意他们所抱怨的这一点。
当你第一次开始在Sketch中使用一个新的系统的时候，你可能会发现自己（在第一批冒出来的想法里）受到了一些阻碍，因为它是在Sketch中处理一个项目的一种不同的方式，也许跟你已经习惯的有些不同。
但说实话，相信我，一旦你完成了那些设计系统的驾驶培训（我保证你不会花很长时间），你会发现自己正在做自动驾驶，在一个项目中迅速移动，它会看起来像你的第二天性。
我喜欢称之为“Sketch Zen Cruise Control”。
相信我，一旦你在这个圣诞节将一个设计系统带入你的生活，你不会想回到你在Sketch中设计的旧方式。
1.打开Sketch
2.盯着一个空白的屏幕（我称之为“空白屏幕综合征”）
3.从某处抓取一些图标
4.一个又一个不断重复创建Symbol的过程
5.设置一些图层样式，然后再设置几个，然后再设置一些
6.然后这才真的让项目开始！
7.看看时钟，然后走“哦，所有的时间都去了哪里。昏昏欲睡的时间。“
好。让我们来看看吧，让我告诉你开始建立一个名为Sketch Design System的神奇建筑物需要打下的基础。

从那些颜色开始...

随着Cabana，以及您创建的所有的系统，您需要使用尽可能少的颜色。您可以使用色调和阴影，但对于实际的基本颜色保持最少。如果你太疯狂，颜色重复就可能会发生。
首先创建一个设计系统的关键是要有一个精致的元素和样式库，在任何项目上工作时都会使事物更加紧密。一个参考点，使您远离黑暗的一面，使用12种不同的颜色和从一个屏幕到另一个屏幕不断矫正略有不同的字体大小。我曾经吃过这样的亏。我想我们都有。
所以通过Cabana我通常会建立初级，中级和三种特定颜色的结构。不多，也不少，但足够以适应不同的项目。
当然还有必要的黑色，灰色，白色和50％不透明度的白色两种色调，以作为图标等元素的叠加。
然后，成功，警告和错误通知的默认颜色为红色，绿色和黄色，也作为通知标志的背景颜色，表单上的文本或文本字段上的边框的颜色。
我给每个基本颜色填充和边框（1px）颜色设定相同的十六进制值，然后为每个（即;填充/主，然后边框/主）创建单独的共享样式。

然后选中矩形（使用填充共享样式），我复制这个形状，放在原始的顶部，然后应用我以前保存的边界共享样式。
这将便于我将来快速选择两种形状（应用填充和边框样式），并立即更改进行相关的样式。

一旦我有了基本颜色，我可以简单地采取一些颜色，即初级，中级，黑色，并创建一个简单的不透明度为60％颜色遮罩，然后可以应用于项目中的任何图像，这就像从我的基本颜色十六进制值，使用60％的不透明度并创建一个新的共享风格，即遮罩/初级。

好，现在说字体
创建Cabana时，这真的适用于您正在进行的任何项目。坚持最多2字体家族规则。一个用于标题，另一个用于正文拷贝。有时候那个“第三名”的家庭成员可以得到邀请，但是你需要在门边给他们一把椅子。
我选择了Poppins和Open Sans，因为它们作为基础（starter）字体系列相得益彰。
设置这个实际上没有正确或错误的方法，因为你要使印刷版本适应当前的项目，但是例如最初的原型制作对于选定他们所服务的目标（标题，正文）以及其他字族不需要耗费太多的尽力。我感觉如果你开始使用像Merriweather这样的Serif字体，那么如果你的唯一目标是使用像Cabana这样的系统来完成原型设计，那么他们就会消耗一定的注意力。
从Poppins字体家族开始。我从Uber字体样式开始。这不是一种可用的字体，但是我从经验中知道，当我在过去测试过其他的设计系统时，他们最大的字体样式在尺寸上还不够大，特别是当你想要为手机和网络创造产品。这就是为什么我把Uber放在一个相对妥帖的111pt字体大小的地方。
然后，我使用Modular Scaling，通过常见的排版（H1到H5），将我的正文文本大小设置为18pt，并使用1.2的比率。
如果我自己或者其他人决定选择深灰色或类似的文本副本的颜色，那么为了提高易读性，我设置了一个更可靠的字号18pt。
除了标题和正文样式外，我还添加了“铅”，“小”，“标题”和“小”的样式。除了标题之外，采用所有前述的默认字符间距。

我为每个样式（Uber，Hero，H1，H2，Body等等）创建了一个Regular和Bold字重。我之前已经看到了一个系统，在该选择Regular选择了Light（甚至对标题只有Bold，没有Regular的选项），但是并不是每个Font Family都有足够多的大小和字重样式，并且在交换字体系列时依赖Light字体重量可能会在Sketch中为自己带来更多的工作，所以我试图避免只是简单的Regular和Bold。Medium同杨需要考虑在内。
对于Open Sans 字族，我重复相同的过程，并确保两个字体家族，我也创建了左，中，右三种文本对齐样式（是的，我们很少使用右对齐的文本，但我把它作为一个安全选项）。

当我完成了两个字族（Poppins & Open Sans）黑色版本，我开始为每个字族创建颜色变体。

因此，使用我以前设置的十六进制颜色值，我复制这些对象，并应用以下颜色创建新的文本样式...
灰色
浅灰
白色
红色（错误）
绿色（成功）

建立关键的Symbol
在前面的文章中，我向您展示了如何在Sketch中构建将成为您的Design System的基础，以及Color和Typography等基础元素，这些元素是构建Design System的必需元素。
在这一部分，我想向您展示如何在这些基本元素上进行构建，以及如何在Sketch中强大的设计系统中创建所需的关键Symbol。
请注意：我不会告诉你如何在这里建立数百个Symbols。说实话，那将是一个12小时的教程，这太重了。而本文我只会涉及到一个强大的Design System的一些关键要素。
好的，如果您一直跟着我的上一篇文章，您会看到我们现在已经有了我们的颜色和遮罩基础等等，并且创建了它们的共享样式（即Fill / Primary）。
我们也建立了字族，以及其他各种风格，如阴影，渐变等。
回到颜色，现在让我们把这些保存的共享样式，并创建一些Symbols，最终将放置到我们的Design Systems里。
好，现在开始吧。

颜色 Symbols

我将只专注于我们为本教程创建的主要颜色，否则，就像我所提到的，这将变成一个12小时的教程，谁有时间浪费在这上面。
我自己创建了一个Symbols页面（是的，这是一个非正统的做事方式，但最终它会有意义），然后绘制出一个矩形（100x100）并应用Fill / Primary 共享样式，然后将该层重命名为 Base。

然后，我简单地创建了一个新的Symbol，并将其命名为 Color / Primary。

我删除了原来的，所以我只保留了新的Symbol：Color / Primary。
然后，只需要复制该新 Symbol ，选择Base层，选择我之前创建的其他 Fill 共享样式，然后重命名层列表中的Symbols。

Symbols 被封装在这些简单的彩色块，现在您可以轻松地将它们应用于几乎任何其他 Symbols 。

文本 Symbols

但是，在我们做之前，我们来创建一些文本 Symbols。是的，这是你必须手动做的事情，直到Sketch经历一个惊人的更新，让我们绕过这个相当无聊的过程。这是希望！
我想创建2套文字Symbols。一个用于按钮，另一个用于输入。在按钮上使用字体家族 #1 （Poppins），在输入框、标签、信息等中使用字体家族 #2（Open Sans）。
我选择了以前创建的特定文本样式 -
黑、绿、灰、浅灰、基础色、红色、白色
然后，我为每个文本 Symbols 选择了3种尺寸。大、中、小，然后进一步将它们分解为左，右和中心对齐的文本 Symbols。

将 Text Style 放到 Symbols 页面里（比如 H5/ #1字族 / 居中 / 黑色 / 粗体）
然后，我将 Text Layer 固定在 Symbols 的左右边缘，以便在 Botton Symbols 内部使用（我们稍后会介绍）。

是的，创建文本Symbols ，正如我很快意识到的，在Sketch中设置一个Design System是最耗时的，但是这些 Symbols 可以让复用的方有如此的控制。你正在构建出许多Symbols（按钮，输入，菜单项，通知，下拉菜单等等）。
所以当我最终完成创建文本 Symbols 的时候，我有如下的东西...
遵循 Symbols 命名约定 ：
Text/Button/Large/Center/Black
Text/Button/Medium/Center/Black
Text/Button/Small/Center/Black
当然还有左/右对齐和颜色种类（即：文本/按钮/大/左/绿色）。
我为输入 Symbols 做了一些非常相似的操作，选择使用 Font Family

图标 Symbols

我从 Google Material Icon Set 图标集中选择了 Cabana 的图标（至少90％来自那里）。我个人没有足够的多样性的图标，所以我不得不通过另一个图标集填补空白。
让我告诉你如何使用 Symbols 复用到每个使用的图标...
我简单地创建了一个Rectangle（24x24，它遵循8pt网格系统），它将作为我的图标的边界框来帮助对齐和视觉一致性。
我把我使用的 Color/Primary Symbol放在顶部，并调整到相同的尺寸（24x24）...

然后，我继续，拖入相关的图标（我用永远可靠的IconJar），并相应调整大小和对齐。它被带进了一个文件夹，所以我把形状层从这个文件夹拿出来，然后删除这个文件夹（你不能用文件夹做蒙板）。
然后，我从检查器中删除图标填充，并将其变成一个蒙板（右键单击图标，选择蒙板），直到我得到一下结果…

然后，我选择了所有元素（颜色 Symbols，图标形状和边界框形状），并转换为 Symbols ...

然后，删除了原来的 Symbols，直到我留下了新的 Symbols，然后最后选择了“边界框图层”并使用“调整大小限制”，将其固定在所有边上。

使用与上面相同的过程，我继续创建所有其他图标 Symbols。哦，150左右！我创造了他们所用的时间可以说打破纪录啦（以最讽刺的语调说过）。现在我有各种各样的图标 Symbols，可以拷贝到其他 Symbols ，现在在我可以随意的处置颜色遮罩。
在这四部分迷你系列的第三部分（它被认为是一个迷你系列的4个部分？嘿嘿），我会告诉你创建的按钮/输入形状，各种按钮和输入状态 Symbols 和更多...然后在第四部分和最后一部分，我将向您展示如何将这些重要的符号放在一起构建出一些全功能的组件。欢呼！

原文链接：https://medium.com/sketch-app-sources/how-to-create-a-design-system-in-sketch-part-one-fd450dccab10
原文链接：https://medium.com/sketch-app-sources/how-to-create-a-design-system-in-sketch-part-two-16156169c901