日期:
来源:宝略科技收集编辑:宝略ICITY事业部
Figma是近年来一个异军突起的新兴设计软件。Figma适用于多平台,多系统,这保证了其在任何工作场景下(Windows or Mac)都能够作为设计团队的统一设计工具,基于WEB端开发的版本更可以满足异常场景下的设计需求,如回乡省亲身边没有带有设计工具的电脑,同时也解决了因本地硬件条件等限制造成的卡顿文件丢失等情况。除了优秀的远程协同体验,由Frame支撑起的Figma设计理念让组件化/模块化/响应式的概念深入日常的设计工作。因此,我们接触figma,首先需要了解“到底什么是Frame”。在传统设计工具中,我们制作一个按钮需要两个图层,一个背景图层,再在上方叠加一个文字图层,然后打包成组就是一个我们熟悉的按钮框架。但是前端工程师在实现按钮的时候并不是这样构成的。一般来说他们会直接使用一个div容器来包裹这段文字,再给div容器添加圆角及背景样式。也就是说,div容器自带了一个背景参数。figma的Frame功能和这个div容器有点异曲同工之处。设计师可以给Frame框设定背景、圆角参数等等,从图层列表来看,它拥有比Group更精简的图层数量,但实际上并不止于此。除了上面所说的差异,Frame和Group还有以下三点差别:大小:Group大小由子元素决定,换句话说,子元素撑起了Group。而Frame本身有自己的参数,大小由Frame自己决定。
缩放方式:缩放Group的时候,子元素都会跟随伸缩,Group构成了一个整体元素。而缩放Frame的时候,子元素表现由自身的限制方式决定(设计师可以控制不同的缩放方式)。
剪裁:Group由子元素撑起,所以不可能超出Group自身范围,不可以剪裁。而Frame可以剪裁子元素内容,因此,Frame可以代替蒙版功能。
Frame脱胎于div容器,在设计实施中,不仅精简了图层数量,更重要的在于它把开发落地中的模块化思想引进了Figma,设计稿对接的时候,借助于Frame的多层嵌套特性,开发可以拆分页面中的模块,多级Frame嵌套图层的结构与层层嵌套的开发代码是相近的,使得整个设计结构更加清晰分明。开始设计前,建议设计师提前思考页面由那些模块组成。在画图时,尽量习惯使用Frame来拆分模块,保持图层结构清晰。这样做一是有助于维护设计稿,二是会潜移默化地影响我们的设计思路,让我们的设计作品更具条理和逻辑。响应式设计布局在实际业务操作中很常见,在Figma中,我们可以借助栅格布局(Layout grid)和约束(Constraints)来实现响应式设计。布局和栅格是两个很经典的设计方式,在很早之前的Bootstrap中就有12列栅格布局,帮助设计师快速排布元素,而Ant design的栅格则更加精细,可以最多分为24列。① 网格:能够生成网格参考线,一般图标建议使用1*1px的网格,便于像素对齐。或者添加4*4px的网格方便快速对齐,遵循8px的基准网格。② 行:生成行布局参考,支持自定义行数、行间距以及边距。③ 列:长做一些横向均分参考,支持自定义列数、列间距及边距。当我们在做设计稿的时候,例如做一个按钮,如果没有做成可复用的组件,那后面在其他模块要用到按钮的地方可能又需要重新画,会有很多的重复劳动。又或是另一种场景,我们需要把按钮的尺寸或颜色统一调整,可能需要一个一个去改,很容易改错或者疏忽。总之,一次性设计是使设计师沦为做图机器的罪魁祸首。如果我们提前搭建好可复用的组件模板,就可以达到复用的目的,而且可以一键批量修改,从而解放生产力,把更多的时间精力投入到业务需求的深入思考中。
我们将在使用figma的过程中不断探索更高效的工作方式!