对于设计系统,我们最熟悉和常用的应该就是设计组件了,即 UI kits,包括输入框、按钮、文字、链接、下拉菜单等等。作为构成一个界面的最小元素,UI kits 可以理解成这些最小元素的常用集合体的称呼。下一步,我将使用 figma 这个软件,教大家如何使用 Component 的功能。

figma 软件的四大优势

在 Sketch 的时代,团队设计师的协作方式是通过一个本地的 Sketch 规范文件,以复制粘贴的方式来复用一些元素和控件,但是随着项目的不断发展,设计师之间的协作也越来越多,使用 Sketch 软件管理组件库的协同不及时的问题就暴露了出来了。

1. Sketch 协同困难

Sketch 软件管理组件库的方式很难及时地通知协同的同事,需要口头通知或者在工作群中告知大家更新了新组件库文件,很多手头上多条业务线并行的设计师常常会忽略更新组件库的通知,造成组件库不同步,更有甚者需要在长长的聊天记录中寻找更新的信息,费时又费力。

用一篇文章,从零开始帮你用好 Figma 的组件库功能

2. Sketch 通知不及时

也许有人会说,Sketch 有个自动进行提醒功能,一旦有更新,就会在右上角显示一条提示信息,设计师只需要点击提醒,下载最新组件文件即可完成更新。但是这个功能在强大的 figma 软件面前还是显得微不足道。

用一篇文章,从零开始帮你用好 Figma 的组件库功能

3. figma 是多人协作利器

正是因为 Sketch 的短板,设计师迫切需要一款云协作软件来降低通信和协作成本。多人协作算是 figma 的特色功能,可以在自己的操作界面实时看到别的角色是在做什么操作。

用一篇文章,从零开始帮你用好 Figma 的组件库功能

4. figma 的社区(练习场功能)

在 figma 的社区,世界各地的设计师分享他们自己的设计源文件,可以看到很多设计效果是如何实现的。

figma 每一次功能更新在社区里面都会有 play groud,相当于将每一次更新的功能变成一个个小案例,经过自己的实际操作后,更新的功能其实也就学会了,可以应用到自己的实际工作之中,非常实用。

用一篇文章,从零开始帮你用好 Figma 的组件库功能

5. 四大优势总结

figma 作为一款划时代的产品,我总结四点优势:

  • 它以多人协作为核心功能,主打线上多人协作;
  • 无论你是 Mac 还是 windows 系统都可以使用;
  • 不管是界面设计还是原型制作都可以做到;
  • 还有强大的社区资源可以借鉴。

用一篇文章,从零开始帮你用好 Figma 的组件库功能

组件库的原子理论

1. 组件理论的起源

一谈到设计组件库,就不得不说“原子设计理论”,这套理论是在 2013 年,由前端开发工程师 Brad Forst 在《Atomic Design》一书中提及的概念,在化学世界中,所有的物质都是由原子构成,原子组合构成分子,分子组合构成有机物,最终形成宇宙万物。

用一篇文章,从零开始帮你用好 Figma 的组件库功能

2. 五个层面各指什么元素

原子设计理论的出现就是为了帮助我们去搭建设计系统,Brad Forst 从化学学科类吸取知识,认为设计组件应该由 5 个层面内容构成:原子、分子、组织、模版和页面,通过这 5 个层面构建一张产品界面。

  • 原子:指的是最小的单位,比如颜色、字号、图标等。
  • 分子:指由两个或多个原子组装而成具有功能性的组件,比如搜索框、tab 栏等。
  • 组织:指分子和原子组成的更大组装体,比如详情模块、内容信息区域等。
  • 模版:指区域模版构成的页面模版,比如产品的详情页、列表页、异常页等。
  • 页面:指模板在设计师和工程师的协作下,变成实际的页面。

用一篇文章,从零开始帮你用好 Figma 的组件库功能

用一篇文章,从零开始帮你用好 Figma 的组件库功能

组件的基础知识

在 Sketch 中组件的功能是“Symbol”,在 figam 中则是“Componer”,其功能是一样的只是两款软件的叫法不同。以下是我整理“Componer”四点基础知识。

1. 创建组件的方法

在 figma 中创建组件有两种方法;

第一种:鼠标选中将要组件化的元素,这时顶部工具栏由一个功能键变成了两个功能键,点击“Greate Componer”的功能键,元素由灰色边框变成紫色边框,即创建成功。

用一篇文章,从零开始帮你用好 Figma 的组件库功能

第二种:鼠标选中将要组件化的元素,按快捷键

“command+option+k”,即创建成功。*我比较推荐使用第二种方法,毕竟快捷键可以提高我们做图的效率。

用一篇文章,从零开始帮你用好 Figma 的组件库功能

2. 组件的父级和子级

组件有两个级别,我们可以根据图标的样式进行区分,四个实心菱形样式的图标就是父级、一个空心菱形样式的图标就是子级。

用一篇文章,从零开始帮你用好 Figma 的组件库功能

将父级组件变成子级的组件有两种方法:

  • 第一种:按住已经组件化的元素,按住“option”鼠标不放,将父级元素拖动到空白处,就会出现子级元素。
  • 第二种:或者是按快捷“command+d”也会在旁边出现一个子级组件。

用一篇文章,从零开始帮你用好 Figma 的组件库功能

3. 编辑组件

正是因为父级的组件是可以覆盖子级组件的样式,当我们去更改父级里面一个元素,比如是颜色,那子级里面的元素就会跟着改变。

用一篇文章,从零开始帮你用好 Figma 的组件库功能

但是子级组件的更改样式,父级的组件将不会受到影响,比如我更改子级组件的圆角度由 0 改成 100,你可以看到父级组件样式没有受到影响。

用一篇文章,从零开始帮你用好 Figma 的组件库功能

除了这个关系,子组件也是可以清除样式的回归到父级组件最原始的样式,比如选中子级组件为他更改颜色和圆角度数,点击“resrt overrrides”即可去除所有组件样式。

用一篇文章,从零开始帮你用好 Figma 的组件库功能

当然,新的样式也是可以同步到之前老样式的组件,只需要选中新样式的组件,点击“push overrides to main component”,之前所有的组件将采用新的样式

用一篇文章,从零开始帮你用好 Figma 的组件库功能

取消组件状态的快捷键也是有的,只要按住“command+option+b”就可以了。

用一篇文章,从零开始帮你用好 Figma 的组件库功能

假设你的老板对弹窗界面的按钮样式不满意,要求由直角改成圆角,这个时候只需要更改父级别组件的圆角,页面中所有子级组件将统一都改成圆角,大大地提高了工作效率。

用一篇文章,从零开始帮你用好 Figma 的组件库功能

4. 追踪组件

追踪父级组件这个功能不怎么常用,但是还有必要声明一下,选中子级组件,点击右侧“go to main Componer”即可。

用一篇文章,从零开始帮你用好 Figma 的组件库功能

管理创建的组件

组件的基础功能都讲清楚了,接下来对组件管理的知识点进行讲解,我个人理解这一部分也是很重要了,因为我以下讲解的四个部分内容是环环相扣的,只有做好前一步下一步才可以顺利进行。

用一篇文章,从零开始帮你用好 Figma 的组件库功能

1. 组件的命名

首先就是大家容易忽略的问题,很多人对组件的命名没有规律,以至于在第二步调用组件的时候困难重重。

我建议使用「/」来为组件命名,用于给组件进行分类,这样可以帮助 figma 判断组件内元素的层级,如图:

用一篇文章,从零开始帮你用好 Figma 的组件库功能

命名好了之后,可以点击“assts”输入你命名的组件名称就可以找到组件了。比如我搜索“icon”,就可以找到所有命名为 icon 的组件了。

用一篇文章,从零开始帮你用好 Figma 的组件库功能

这里有一个技巧,如果你在创建组件的时候,在“component”这里对这个组件进行了简短的文字描述说明,点击“assts”搜索的时候组件的旁边就会出现气泡弹窗,弹窗的内容可以让你清楚地知道组件是干什么用的,针对于组件数量特别多的系统,很好用。

用一篇文章,从零开始帮你用好 Figma 的组件库功能

2. 组件的嵌套

当我们把元素都制作成组件后,就可以进行组件的嵌套了也就是“巢状元件”,也就是说一个组件可以包含另外一个组件。比如下面这个按钮是 icon 和文字构成的(紫色是父级、蓝色是子级),在父级中我们可以随意地更改 icon 的数量,来改变子级的样式。

用一篇文章,从零开始帮你用好 Figma 的组件库功能

3. 组件的替换

正是因为有前两步规范的组件命名和组件嵌套,我们在搭建页面时候可以轻松自如地根据组件的命名,随意地替换组件的样式。

用一篇文章,从零开始帮你用好 Figma 的组件库功能

或者是在一个按钮组件的基础上,根据 icon 的命名替换成符合需求功能的不同按钮。

用一篇文章,从零开始帮你用好 Figma 的组件库功能

比如下面这个场景中的 tab 栏,将按钮将由两个替换成一个,或者是更改主题颜色等等业务需求都可以通过组件替换功能去实现。

用一篇文章,从零开始帮你用好 Figma 的组件库功能

点赞 50
收藏 168

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。