草图 和 原子设计 are a powerful set of tools 和 methodologies designers can use to create 设计系统 that allow for st和ardization 和 a 更高效的工作流程.

设计系统:入门

A 设计系统 is a set of reusable components 和 guidelines that help teams unite around a common language during the creation 和 life of a product.

In most cases, 设计系统 are composed of a style guide 和 a component library. 它们还可以包括声音、语气以及品牌价值等元素. The point of having a 设计系统 is to create a set of st和ards that act as a single source of truth for a product or a br和.

谷歌的 材料设计 是结构化UI设计系统的一个例子. 材料设计 was introduced back in 2014 as a way to design 和 develop cohesive Android apps.

另一个原子设计的例子是Mailchimp 声音和语气. It describes how one’s voice is always the same but the tone changes depending on the context. 意识到这一点有助于赋予内容力量，赋予品牌个性.

While there are many different methods that can be used to create a 设计系统, it’s a good idea to pick a framework that allows the team to unify around a common language 和 set of st和ards. 原子设计是实现这两个目标的框架的一个很好的例子.

原子设计:建筑设计系统

原子设计方法是由 布拉德·弗罗斯特 in 2013. It is based on the idea that every 设计系统 can be defined as a series of building blocks that coexist.

下面是原子设计系统组件的快速概述:

• 原子. 表示设计系统的基本构建块. 按钮或文本样式就是一个例子.
• 分子. 原子:作为一个单位一起工作的一组原子. 分子是有形的UI元素. 例如，可以对按钮和文本字段进行分组以创建搜索表单.
• 生物. 原子和分子在一个复杂的结构中一起工作. A search field grouped with a navigation bar forms a header organism on a website.
• 模板. Page-level objects placing components into a layout that defines the content structure. 例如，取一个标题有机体并将其放在主页模板上.
• 页面. 表示最终产品的模板实例.

“We’re tasked with making interfaces for more users in more contexts using more browsers on more devices with more screen sizes 和 more capabilities than ever before. 这确实是一项艰巨的任务. 值得庆幸的是，设计系统可以提供帮助.——布拉德·弗罗斯特在《 原子设计 和 设计系统.

Using 原子设计 to create 和 maintain a 设计系统 will help designers work more efficiently 和 communicate better within their teams. There are a plethora of tools 和 methods for creating 和 maintaining 设计系统, 但通常最好的工具是我们最熟悉的工具.

如何在草图中使用原子设计

要开发原子设计系统，一个很好的(并且已经很熟悉的)工具是草图. 它为我们创造原子提供了画布, 分子, 有机体:定义设计系统核心所需的元素.

创建原子

We begin by creating three types of 原子 in 草图: symbols, 图层样式, 还有文本样式.

符号. 符号只不过是可重用的组件. 它们只定义一次，因为它们可以在整个产品中实例化. 例如， 箭头 符号(原子)可以用边框颜色、大小等属性来定义. 这样我们就可以重复使用这个符号，而不必每次都重新创建它.

图层样式. Layer styles are the reusable visual styling elements that stay consistent across every layer. 例如，先前定义的箭头的填充颜色.

文本样式. 文本样式, 类似于图层样式, 可重用元素是否确保了类似文本对象之间的一致性. 例如，定义h1元素的字体大小和颜色. 它的工作方式类似于Google Docs或Microsoft Word中的文本样式.

当我们定义符号时, 图层样式, 还有文本样式, 草图 can divide them into hierarchical categories in its symbols 还有文本样式 menus with the use of a “/” (forward slash). Following naming conventions 和 having a well-defined set of master categories will give files an organized structure, 减少混乱和不一致.

Here are some ways to create hierarchical categories for symbols, text, 图层样式 in 草图.

我们可以使用下面建议的命名约定来表示符号 原子/:

• 资产
• 按钮
• 输入控件
• 图片
• 导航
• 信息

We won’t convert 图层样式 into symbols so identifying them by their semantic group is sufficient. 再次使用 原子/:

• 填满
• 边界
• 阴影
• 梯度

与图层样式类似，下面是我们如何创建文本样式 原子/:

• 标题
• Body
• Caption
• 标签
• 链接

A unified design language shouldn’t be just a set of static rules 和 individual 原子; it should be an evolving ecosystem.airbnb上 构建视觉语言.

创建分子

原子定义了产品设计准则的基本部分, 但它们本身并不完全有用. In order to derive some functionality, we join 原子 together 和 create 分子.

Joining a label (atom) with an input button (atom) to create a search function is a good example of a commonly used molecule element.

提醒一句，这里可能有一点灰色地带. 一颗钮扣，一颗 代码级别原子被认为是原子，但它是一个按钮 设计水平 is considered a molecule since we are grouping a layer style 和 a text style atom. To avoid any confusion it’s a good idea to think only about the 代码级别 elements.

主要的分类是 分子/ 是:

• 信息
• 导航
• 输入控件

因为分子将开始以一种互动的方式塑造我们的产品, 进一步定义上述类别是个好主意. In this case, we will define a set of subcategories which represents a pattern library:

• 下拉列表
• 切换
• 滑块
• 选项卡
• 分页
• 进度指标
• 日期字段
• 文本字段
• 复选框
• 单选按钮
• 模块

创建生物

生物体是一群原子和分子. 它们也可以是其他生物体的一部分.

不像原子和分子, 生物 do not have an abstract inclusion in the products we are designing; they are concrete, 可以通过特定操作轻松识别的可重用组件. 它们的结构比原子或分子还要复杂.

如果先前定义的搜索字段与其他组件分组, 比如导航条(分子), 和一个标志(原子), 一个有机体被创造出来. 导航栏或日历就是一个例子.

有机体和分子一样，可以归入相同的类别和子类别:

以下是我们将为有机体创建的主要类别:

• 信息
• 导航
• 输入控件

与分子一样，我们还将为生物体创建子类别:

• 下拉列表
• 切换
• 滑块
• 选项卡
• 分页
• 进度指标
• 日期字段

到目前为止, 大部分用户界面已经设计好了, so now it’s as simple as calling up the instances of our components when they are needed for the design.

通过语义组很容易找到每个组件, either by searching for them directly using the 插入 panel in the 草图 toolbar, 我们在哪里可以找到一套组织良好的3个主要类别, or, 通过使用插件像 速写选手.

速写选手 optimizes a designer’s workflow by providing a set of keyboard comm和s they can use instead of finding things in endless menus. 例如，他们可以输入单词 插入，点击 选项卡 键入并查找他们需要的组件.

通过输入 原子, a drop-down list will show us all of the elements that fall under that category. 如果这些设计系统的原子和分子有共同的范畴, 只有原子会被看到，所有的分子都会被忽略.

总结一下

草图 和 原子设计 are a powerful set of tools that can be used together to improve design workflows 和 facilitate an effective 设计系统 framework.

使用 原子, 分子, 生物 作为一个组件基础, 原子设计 helps designers unify around a common language during the creation 和 life of a product.

设计师 can use tools such as 草图 to implement 原子设计 providing for a 更高效的工作流程 和 a set of st和ards that are embraced by everyone on the design team including 开发人员 在项目的最后阶段.