粉丝服务

Frame支撑起的Figma设计理念


Figma是近年来一个异军突起的新兴设计软件。Figma适用于多平台，多系统，这保证了其在任何工作场景下（Windows or Mac）都能够作为设计团队的统一设计工具，基于WEB端开发的版本更可以满足异常场景下的设计需求，如回乡省亲身边没有带有设计工具的电脑，同时也解决了因本地硬件条件等限制造成的卡顿文件丢失等情况。

除了优秀的远程协同体验，由Frame支撑起的Figma设计理念让组件化/模块化/响应式的概念深入日常的设计工作。因此，我们接触figma，首先需要了解“到底什么是Frame”。






在传统设计工具中，我们制作一个按钮需要两个图层，一个背景图层，再在上方叠加一个文字图层，然后打包成组就是一个我们熟悉的按钮框架。


但是前端工程师在实现按钮的时候并不是这样构成的。一般来说他们会直接使用一个div容器来包裹这段文字，再给div容器添加圆角及背景样式。也就是说，div容器自带了一个背景参数。


figma的Frame功能和这个div容器有点异曲同工之处。设计师可以给Frame框设定背景、圆角参数等等，从图层列表来看，它拥有比Group更精简的图层数量，但实际上并不止于此。


除了上面所说的差异，Frame和Group还有以下三点差别：

1

大小：Group大小由子元素决定，换句话说，子元素撑起了Group。而Frame本身有自己的参数，大小由Frame自己决定。

2

缩放方式：缩放Group的时候，子元素都会跟随伸缩，Group构成了一个整体元素。而缩放Frame的时候，子元素表现由自身的限制方式决定（设计师可以控制不同的缩放方式）。

3

剪裁：Group由子元素撑起，所以不可能超出Group自身范围，不可以剪裁。而Frame可以剪裁子元素内容，因此，Frame可以代替蒙版功能。







一、模块化设计


Frame脱胎于div容器，在设计实施中，不仅精简了图层数量，更重要的在于它把开发落地中的模块化思想引进了Figma，设计稿对接的时候，借助于Frame的多层嵌套特性，开发可以拆分页面中的模块，多级Frame嵌套图层的结构与层层嵌套的开发代码是相近的，使得整个设计结构更加清晰分明。

开始设计前，建议设计师提前思考页面由那些模块组成。在画图时，尽量习惯使用Frame来拆分模块，保持图层结构清晰。这样做一是有助于维护设计稿，二是会潜移默化地影响我们的设计思路，让我们的设计作品更具条理和逻辑。



二、响应式设计


响应式设计布局在实际业务操作中很常见，在Figma中，我们可以借助栅格布局（Layout grid）和约束（Constraints）来实现响应式设计。

布局和栅格是两个很经典的设计方式，在很早之前的Bootstrap中就有12列栅格布局，帮助设计师快速排布元素，而Ant design的栅格则更加精细，可以最多分为24列。


Figma 的栅格布局分为三种：

① 网格：能够生成网格参考线，一般图标建议使用1*1px的网格，便于像素对齐。或者添加4*4px的网格方便快速对齐，遵循8px的基准网格。
② 行：生成行布局参考，支持自定义行数、行间距以及边距。
③ 列：长做一些横向均分参考，支持自定义列数、列间距及边距。


三、组件式设计


当我们在做设计稿的时候，例如做一个按钮，如果没有做成可复用的组件，那后面在其他模块要用到按钮的地方可能又需要重新画，会有很多的重复劳动。又或是另一种场景，我们需要把按钮的尺寸或颜色统一调整，可能需要一个一个去改，很容易改错或者疏忽。

总之，一次性设计是使设计师沦为做图机器的罪魁祸首。如果我们提前搭建好可复用的组件模板，就可以达到复用的目的，而且可以一键批量修改，从而解放生产力，把更多的时间精力投入到业务需求的深入思考中。






我们将在使用figma的过程中不断探索更高效的工作方式！



  往期热点，戳这里 


《焦点新闻 | 宁波市大数据发展管理局一行调研宝略科技》



编辑 | 梅佳宁/胡雨琪
一审 | 徐央杰
二审 | 孙   华
终审 | 周   鑫

本栏目精选

热门推荐

频道导航

科技娱乐汽车体育财经旅游育儿历史美食军事国际情感