跨平台设计利器—Figma使用测评

虽然不提倡唯工具论的设计思维，但是一款轻量、便捷、学习成本底的设计软件确实能够帮助设计师去更快更好地完成设计。

Sketch是目前最常用的设计软件，Hype3是做原型展示和动效经常使用的软件。两款产品共同特点是轻量、易学好操控。尽管Adobe在轻量化的今天推出了Adobe Xd，但也只是在追赶着Sketch的步伐。

谈及sketch的原因则因为今天要测评的这个设计平台figma是完全借鉴sketch来设计的，无论是操作逻辑还是界面的布局，不同的地方是figma是可以做原型展示，并且比sketch还要轻量。

首先，figma不是一个软件，而是一个基于web端的在线设计平台；个人版完全免费，项目查看历史30天，团队协作3个项目内免费，超过后15美刀每月，包年12美刀每月。

figma收费标准

既然是基于web的平台，不论是在Windows还是Mac，用浏览器就可以登录帐号进行设计，浏览器建议用谷歌浏览器，可以很好兼容。但是figma目前不能输入中文，在编辑文本时只能敲入英文。

Figma官网：www.figma.com

官网注册界面

用户操作界面

figma有图层和画板的概念，常用快捷键和sketch一样：R-矩形、O-圆、T-文字、ctrol+c-吸管、A-创建画板等，快捷键在windows上一样适用。

一些具体的实战细节我会以icon的绘制、界面的临摹、交互原型展示的形式来说明。

在手机上截取了网易云音乐的四个线型图标进行临摹，分别是本地音乐、最近播放、我的电台、我的收藏。

面型图标选取了追波上的一张界面的图标进行临摹，这个界面下文也有临摹。

所有图标均是在figma内完成

布尔运算正常，钢笔操控和sketch一样也很流畅，图形的圆角进行调节很方便，这些和sketch的功能都很相仿；

不同的地方，sketch可以在一条线上同时添加多个锚点用来裁剪，但是figma只能一次添加一个锚点，确定后再次编辑添加锚点，修剪后的线段和sketch一样可以设置圆形末端。

面型icon很ok，布尔运算和sketch一样，没有特殊的地方。

总结，对于一般的线型icon和面型icon的绘制来说，sketch如果是9分，figma可以给到8.5分

在追波上选取了一张界面进行临摹：图中涉及到几个测试点：左上角的圆形渐变色、卡片弥散的投影、图片的嵌入方式，图片上半部分的反白渐变处理。

app截图

画圆添加渐变色并归入画板

在左上角打上文字并且添加卡片，在卡片底部添加扩散的投影

在卡片内嵌入图片，在图片crop模式下，图片可以放大移动合适的位置

将图片移动到合适位置，上部分留白方便渐变处理。

添加白-透明的渐变

加上有弥散投影的按钮和文字后和原稿对比，原稿（左），临摹稿（右）

总结：单纯指界面设计的话，sketch会得到10分，figma我会给到8分。一个原因是免费版只能查看30天前的设计稿，如果日常练习的话完全可以胜任，另一个原因是sketch切图标注上的便捷还有海量的kit以及插件可以使用。

Figma在原型的模式下，可以用连线链接存在交互的按钮与界面，并且可以在浏览器上动态的演示。

我用figma做了一个简易的微信的8个原型界面，并且用原型交互模块的连线进行联系；8个页面分别是微信首页、聊天界面1和2、通讯录、个人信息、第三按钮（发现）、个人相册和朋友圈。

界面原型

交互连线

交互过程：首页点击进入头像进入聊天界面--返回--点击通讯录--点击头像进入个人信息--查看个人相册--Message（聊天界面）--返回个人信息--返回通讯录--进入第三个按钮（发现）--点击进入朋友圈--返回

原型动态演示如下

总结：交互过程虽然会清晰呈现，但是界面与界面之间缺少过渡。个人比较习惯用Hype3做原型展示，但是毕竟是原型，用手画或者用PPT做也是可以的，一切以减小团队沟通成本为主。

跨平台、体量小、可以更好地团队协作，设计师只需用浏览器登录账户进行设计并且可以和团队分享。

如果你正在使用PS进行界面设计，那么建议你去尝试以下figma，毕竟PS的重量让人有一些迷茫：它可以做平面、可以摄影后期、手绘、甚至可以3D......

进行一下figma的评分

icon绘制：       8.5分

界面设计：       8分

交互效果展示： 6分

综合评分：       7.5分

本文是作者Reple的原创内容，如果转载要署名我的公众号eVoice和二维码哦，如果你对本文有其他的见解欢迎下方留言，可以的话希望能够帮我转发一下，每增加一个粉丝都是对我的一个鼓励～

欢迎关注eVoice，互联网产品的测评社区

转载注明出处哦～momo