【教程分享】原子设计与值得一试的实现方式

微博品牌运营设计

北京/设计爱好者/4年前/1714浏览

版权

微博品牌运营设计

本文主要介绍如何灵活运用跨平台云端设计工具Figma，结合原子设计方法论来聊聊创建设计系统与执行设计需求的主要过程。

近年来设计圈内广泛分享了很多“原子设计”的一种设计方法论。它是一种结构化的思维模式，并不特指某一种设计风格或框架。但理论知识往往是一种理想情况下的总结，很难与具体实践做到紧密结合，原子设计如何具体的影响我们更有效和便捷的工作呢？本文主要介绍如何灵活运用近两年在国外火到国内的跨平台的云端设计工具Figma，结合原子设计方法论来聊聊创建设计系统与执行设计需求的主要过程。

01.什么是原子设计

原子设计借鉴了化学中看待事物的方式，其主要应用在数字产品设计中的“设计系统”创建环节，从细分粒度上来看，可分为原子、分子、组织、模板、页面五个层次，例如：

界面中的基本元素，如：文本、色块、图标或者线条都可以看作是是一个个的原子
界面中的基础组件，如：按钮，弹窗、搜索宽、表单等便可以看作是一个分子

由基础组件构成的区块，标题文本+内容段落+CTA（Call To Action）按钮，加上适当的卡片样式，即可以认为是一个组织
通过标题、操作按钮和一些卡片的组合，我们得到了一个信息流模板

最终一个简单的页面可能同时包含标题栏模板、内容区模板、底部导航栏模板等标准化组件从而使得设计结构有章可依有迹可循

团队无需在每次收到新需求时都重新制作轮子，而是可以使用已建立的组件去搭建，这样可以让项目的创作者和使用者都受益。项目里的创作者之间可以建立一致的、共享的设计语言，并减少团队成员之间的沟通障碍；使用者在操作时可以用以往的操作经验，下意识进行操作，能更快的完成任务，可以有更好的体验并间接对产品产生值得信赖的感受。

原子设计在实际项目落地时也会存在局限性，因过度的依赖层级递进关系，会导致整个设计系统变的极为复杂并需要专门的设计人员维护，导致后续的迭代和重构成本变高；“原子设计“理论的提出者Brad Frost在他的《Atomic Design》书中第五章-如何维护设计系统章节中提出了设计系统具体改如何维护，以及他认为设计系统应该是一项长期工程，其宏伟目标是彻底改变团队组织，创建数字工作的方式。

因此一个智能、灵活、方便扩展的设计软件尤其重要，所以结合原子设计方法论来聊一下为什么使用Figma，它在设计系统里可以解决哪些问题。

02.组件与Figma

组件是代码工程中的一个流行概念，在iOS、Android、Windows等用于实现UI的工作中，工程师们通常不会一遍一遍的写重复使用率极高或大量重复的内容，而是将它们组件化，通过将较小的可复用部分组合成更复杂的内容。如果将这个概念应用于设计工具会是怎样？

例如：一个地址页面中可能含有一个表格，表格的每一条目为一个联系人。一个好的列表设计需要找到合适的字号、间距或图标等图形元素。然后，我们将其中可以同时在很多地方使用的元素做成一个组件，在调用时可以使用不同大小的版本，或使用存在局部的修改和差异的版本：

在我开始从事UI设计相关的工作大概一年时，我开始构建一些常用的UI组件。作为一个经常出没于各设计工具交流群的设计师，我注意到我们的设计方式与我们使用软件的习惯非常相关。上下游同事们总是对设计稿效果精益求精，并且不断改进以求达到最优效果。我们怎样才能跟上他们的步伐？

一个跨平台的云端设计工具Figma应运而生，All-in-one 的设计理念和实时协作的特性。它让设计工具不再只是设计师使用，而是贯穿于整个业务项目流程，解决了不同场景、不同软件和不同角色间的协作问题。而实时协作则意味着项目组的每个人如设计师、产品经理、前端开发都能在同一个平台里实时操作、讨论和获得反馈，而操作内容则能够实现实时进行更新。让团队的每一个人都能了解互相的工作进度以进行及时的沟通，从而达到放大整个产研团队价值的目标。

2.1使用原子组件

▎样式原子组件与“样式刷”

在 Figma 中，右侧的文字、颜色、效果和栅格等属性调节面板中都有样式库按钮，点击之后会出现下拉列表，显示之前创建过的对应的共享样式。此时点击下拉列表中右上角的加号，就可以创建一个新的样式组件。并且在未创建样式组件时，也可通过（windows：ctrl+alt+C与ctrl+alt+V / MacOS：CMD+Option+C与CMD+Option+V）快捷键复制一个元素所具有的全部样式。

样式库是可以调整的，点击画布中空白区域，就能够看到右边添加过的所有样式。点击右侧调整按钮就可以进去修改它，不过需要注意的是这样会改变所有引用这个样式的地方。

如上述步骤，我们可以事先将文本、色块、图标或是线条设置为方便复用的“原子组件”，而通过组件库构建经验来看，不同形态的相同功能的组件大体结构一致，只是存在某些元素的有无（如icon），或个别样式的差异（如颜色）。而Figma组件系统可以满足这一需求，在相同的母版（Master Component）下副件可以单独更改某些属性，除被更改的属性之外，其他属性并不会被影响与母版之前的关联（Sketch无法让副件与母版存在样式差异）。

▎可选增删属性、显隐元素

Figma元素中的填充、描边、文本、效果等属性为堆栈式关系，有更高的自由和编辑性；可自由剪切/复制到图形、字体等元素上进行搭配，并可选择性增删编辑某些属性；同时，这些属性可设置为样式组件方便调用，引用该样式组件的元素将自动更新该组件的属性值变更。

我们创建一个涵盖所有按钮形态的母版，通过拷贝副件并对副件进行样式变更形成新的按钮状态，选中已经变更样式的副件创建为新的组件（Component），这样就实现了组件分级嵌套效果。

（图片来源：王涛亮）

2.2分子组件与变体

在聊分子组件时，需要先讲一下在Figma中常见的两种组合形式：Group（组）和Frame（画框）。两者都是可承载若干其它元素的容器，但它们又各自有独特的属性和使用方法：

▎Group（组）

与其他设计工具类似，Figma 中的 group 允许将多个元素快速组合在一起作为一个顶级图层（快捷键⌘ + G（Mac）或 Ctrl + G（Win））。同时也可以在任何时候取消编组（（⌘ + Shift + G（Mac）或 Ctrl + Shift G（Win））。

当设计中管理的图层较少或仅仅是想要将相关的图层组合在一起时，可使用group 文件打组。Group的长和宽由它包含的子元素决定，因此调整边界大小或移动这些元素时会导致 group 的边界大小自动调整。在下面的示例中，可以看到 group 的边界大小会根据子元素的大小自动调整。

当子元素调整边界边界或重新定位时，group 的边界会自动调整（图片来源：Thomas Lowry）

其次group 里的文件在进行比例缩放时，图形文件会按照比例缩放。但是效果、文字尺寸和描边的大小不会自动进行缩放。如果希望同时缩放这些属性，则需要使用缩放工具（按K切换）。

左边使用常规方法调整包含矢量图稿和文本的 group，右边使用缩放工具（K）调整组 group 边界大小

（图片来源：Thomas Lowry）

▎frame（画框）

在理解上可能会想到其他设计工具中的 artboard（画板），但实际上在 Figma 设计工具中frame不仅可以作为画板使用，还可以理解为未定义前的 component（组件）。frame 和 component 是在 Figma 中创建动态布局的重要组成部分，是快速创建设计组件的重要工具，基本上figma中所有的操作都离不开这两个属性。

创建 frame 有以下的三种方法。

顶部菜单栏中选择 frame 工具（快捷键F），然后从右侧的属性面板中选择预置设备尺寸，创建frame。
如果不需要精确的画板尺寸，也可以直接在画布中央直接单击并拖动鼠标创建大小。

你页可以直接选择画布上的现有元素，与 group 类似，并通过按 ⌘ + Opt + G（Mac）或 Ctrl + Alt + G （Win）将其组合为一个 frame。

如果需要解除或删除 frame，键盘快捷键与取消编组相同：⌘ + Shift + G（Mac）或 Ctrl + Shift G（Win）

▎宽高调整与约束属性

frame 的宽高与其包含的元素无关，Frame内含的元素的定位或缩放，不会影响Frame的宽高。如果希望 frame 的尺寸重新调整以适应内容，可以单击右侧属性面板中的“调整边界大小以适应”按钮。

（图片来源：Thomas Lowry）

在调整宽高大小时，调整 group 时内部的子元素也将跟随外部边界大小进行调整。而通常情况下，对 frame 的宽高大小调整不会影响其子元素的尺寸。

我们可以给子元素设置 constraints（自适应约束），调整 frame 时，内部子元素会根据我们设置的 constraints 来自适应。默认情况下 constraints 被设置为顶部和左侧距离固定。

当我们希望子元素能够在父级 frame 变化时保持自身相对位置和大小时，设置 constraints 是非常有用的，这也是创建响应式组件所必需的。下面的动图展示了 group、未定义 constraints 的 frame 和定义了 constraints 的 frame 在尺寸变化时的区别。

（图片来源：Thomas Lowry）

组件可以简单到一个独立的按钮，也可以复杂至一个完整的导航条（有很多元素组成，比如 logo、头像、按钮和菜单）。当开始构建高保真的原型时，尤其是当你想把它们作为共享组件时，就需要考虑从最小的层级去创建组件，即不可再分的原子级。然后将它嵌套进所有按钮组件内作为基本形状。当想要改变所有按钮的形状时，只需要改变这个原子级组件就可以了。

▎相似分子：组件变体

现代化设计软件的基础特征就是“组件”的概念：通过制作组件，创建“父子级”，可以达到修改父级——子级实时改变的效果，但此时，如果我们需要子级在多个父级中切换呢？那需要做的就是单击添加变体，新变体将会自动复制添加到您的组件库中。例如，按钮的尺寸（大、小）每个都有三个属性（默认、选中、警示）等。

（图片来源：Figma网站）

变体中可以不同元素的隐藏，以适应不同场景下组件的使用；对“父级”的修改会映射到“子级”上，同时您也可以单独进行“子集”元素的修改，“子集”样式的修改不会影响到“父级”，修改后如果想还原之前的样式，可以点“Reset all overrides" 重置样式；

▎可交互分子：即拖即用原型

交互式组件，可更轻松地创建可交互的设计原型。这对初期产品交互演示和 MVP 前进行测试非常有用。目前支持的动效包括缩放、位置、透明度、旋转、填充色等。借助该特性，可以很轻松地制作出加载动画、下拉刷新，以及丰富的手势特效等。figma工具使不同组件和屏幕的微交互运动变得更加容易，配合交互文档一起使用，更有助于与开团队沟通交流。

（图片来源：Rodrigo Osornio）

0.3模板与自动布局

传统的设计工具如PS通常采用绝对定位方式，指的是设计稿中的内容都有唯一的坐标值，Figma拥有一种更加灵活的布局方式AutoLayout，它只能应用于Frame，并且与H5开发中的Flex布局方式相同：可对宽高设置为三种不同属性：

3.1 Fixed固定值

在通过拖动或输入调整图层宽高时，宽高属性会变为具体的像素，此时可以认为AutoLayout并未启用。

3.2 HugContents包裹内容

用作容器的Frame通常设置为此属性，它的宽高会自动调整为内容的宽高，与Group不同的是，AutoLayout支持间距与边距设置。

3.3FillContainer充满容器

当元素设为此属性时，它的宽高会根据所在容器的剩余空间自动调整，容器内组件多个同时设为此属性时，它们将平分剩余空间。

同时，在定位器中，可以设置在AutoLayout生效时，内容的定位方式（packed集中内容和spacesBetween分散内容）与上下左右边距的分别设置：

AutoLayout自动布局设计，让我们在删除内容、添加内容、构建类似内容的行、创建响应式组件等方面节省大量时间。可以快速调整间距或添加和删除内容，而无需推动像素来重新对齐元素；可以实现按钮根据文字自动增长、列表自动适应等效果，再也不需要手动调整尺寸啦，极大地提高设计效率。

（图片来源：medium.com）

0.4图标组件与矢量网格工具

在制作图标组件时，我们往往需要绘制大量的矢量图形，“矢量网格系统”是Figma对传统贝塞尔曲线进行特性优化的统称，其最大的特点是在使用钢笔工具时，可支持单个锚点连结多个锚点；同时，可对闭合区域进行部分填充；钢笔锚点智能删除、弯曲、焊接；打破了传统矢量工具的局限，它让矢量绘图方式更接近操作者的心理预期。