sketch|无序的思考,有序的设计——Figma使用分享( 三 )


1. 组件 Component说来很奇怪,每家设计工具都具备组件功能,Figma的组件厉害在哪呢?
Figma的组件是集大成之作,同时也完美契合其生态。
从功能上看,组件主要提供三种能力:可复用、可继承、可共享,背后体现了组件的三类关系:组件调用关系、组件父子关系、组件共享关系。
1)组件调用关系
组件调用是组件的形成与复用。
在Figma中,点击元素后,可以通过点击正上方工具栏的“创建组件”将所选元素转化成组件。转化为组件后,它的逻辑和一般的Frame并无区别,但是他独有一套复用逻辑。左侧图层区有个资产栏,这里会收集文件中的组件以及已发布的其他文件的组件,在设计中需要用到之前建立的组件时,只需要将组件拉出来到操作区,它会根据组件的落地位置自动编组。另外,如果你想要直接复制已有的组件的话也是可以的。
对于组件,可以选择把复制后的组件进行分离实例,这样组件就转化成了普通的frame/group/元素,方便你对其改动;也可以将多个组件合并为变体,这样组件就能实现点击一个组件,选择切换到其他的形态,这样非常方便做tab和快速切换不同状态。
在任意一个子组件中,点击属性中的定位到父组件便可以定位到元组件中,这样方便调整整体设计问题,同时这个功能是跨文件的,也就是说,对一些有公共组件库的团队来说,在从云拉取组件进行设计时,可以对某一组件的设计原型进行追溯。
这里的调用保证了Figma组件设计中的灵活性,将组件的特性和元件特征分开,灵活运用到各类细节设计工作中。
2)组件父子关系
组件父子关系其实说的是组件的变化逻辑。
在Sketch中有类似组件概念的“symbol”,复制一个symbol,复制出的symbol可以根据主symbol的变化而变化。
Figma继而加强了这个特性,Figma中父组件和子组件在图层列表中显示不同的icon和图层上下级关系,相对Sketch和Axure的类似功能显得更为直观,同时它也代表无需专门进入某一区域或者专门设计新文件来存放组件,你马上设计完的一个模块就可以转化成组件快速用到其他地方,而无需专门在另外的页面新建来回调整。
通过更改父组件的任何属性,就可以同步所有子组件中,而子组件的改动则不会影响到其他子组件,如果你想单独让一个组件不被影响,就可以将其分离实例,这样就可以很好地根据设计实际情况做对比方案。
父子组件关系还可以任意调整,你只需要将子组件在图层列表中拖动至上一级,那么这个子组件就会变成新的父组件,这样的话可以最大程度的便利设计工作。有时候在设计相似的模块时,这个功能将发挥奇效。
3)组件共享关系
Figma充分利用了自身特性,赋予组件自由的共享能力。这体现在同一文件可以任意使用其他的组件和颜色样式(颜色样式也被视为一种组件),其他文件可以调用本文件的组件,同一团队使用团队下诸多项目的组件或者团队公共组件库。
我们可以设想两种情况,对于新项目,我们可以调用老项目的基础组件(例如导航、button、颜色样式、卡片样式等等),从而快速搭建新项目框架,这非常适合保证团队内一致的设计风格和产品规范。搭建好之后,可以对调用的组件任意更改,而不会影响到公共组件库,实属非常方便了。
对于项目的改版,我们可以先建立起组件库,然后通过修改组件库的方式将项目内所有组件进行调节,这样整个设计稿就调整过来了。这在迭代工作非常实用,只需要改组件配置,无需新建页面(往往新建项目会涉及到重新排版,工作量很大)。