主页 > APP设计 > 还不熟悉Figma?为你详细介绍这个面向未来的设计工具

还不熟悉Figma?为你详细介绍这个面向未来的设计工具

最近有一款新兴设计工具 「Figma」 逐渐走进了大家的视野,越来越多的人认识或者上手尝试了这款软件,不过似乎还是有不少同学对 Figma 一头雾水,不知道这是哪里杀出来的程咬金,那么今天我们就来简单介绍一下 Figma。

Figma 是什么?

它是一款类似 Sketch 或 XD 的 UI 设计工具,但 Figma 跟后两者的本质区别在于它基于 web,也就是说只要有浏览器和网络就能开、就能用。

目前 Figma 在国外收割了一大批拥趸,比如大家耳熟能详的 Twitter、微软、Github 以及 Dribbble 等等。在国内的热度虽然还没有这么高,不过 Figma 正在逐渐抢占 Sketch 的用户,比如最近很火的阅文,其体验设计部 YUX 已将海外项目 webnovel 全部迁移至 figma。

那么它何德何能,可以成为如此耀眼的新星呢?

Figma为什么厉害

1. Windows上最好用的UI设计工具

由于 Windows 生态的缘故,UI 类的专业设计工具似乎对 windows 都极度不友好,不管是像 sketch 这样根本不开发 windows 版本,还是 XD 这样哪怕有 windows 版,也是各种闪退、bug 频出,总之 windows 的 UI 设计体验向来是非常差的。

这时候 figma 给 windows 带来了媲美,甚至超过 sketch 之于 mac 的体验。基于 web 这个基本特质决定了 figma 非常容易适配全平台,只要你的设备有浏览器,联了网,就随时随地可以快乐地进行设计。

不管是 macOS、windows、Linux,甚至最近连 iPad 都可以了!

2. 丝般顺滑不卡顿

不管是曾经习惯用 Ps 做设计的同学,还是用 sketch 的同学,我想你们都有被卡顿的支配的恐惧,图层一多、文件一大、页面一复杂就连移动图层都变得异常费劲。

在使用 Figma 之前,我也以为线上的软件必然比本地的好不到哪里去,但后来发现我错了,脸都被打肿了,这里演示中因为 iOS 没有 figma 版本的 guideline,所以用谷歌 MD 的替代,文件量大致相当。

Figma 似乎并不怎么消耗本地资源,也完全没有 sketch 那样严重的内存泄漏问题,所以当我打开同一个 APP 项目文件,Sketch 内存(加缓存)占用达到恐怖的  16G,figma 甚至不足 160M。

经过实际体验来看,无论多大的文件,Figma 似乎都能达到流畅的 60 帧渲染。

3. 大杀器 — 全局组件

Figma 的组件和 sketch 类似,但又有区别。

得益于线上协作的模式,你可以在 figma 新建一个专门的文件来定义组件(component)或者样式(Style),再把这个文件发布到库(Library),这样你团队中的所有成员都可以在团队中的任意文件调用这些组件。

而只要修改其中一个组件的样式,团队中所有的文件内用到该组件的地方,都能选择是否要同步更新。

有同学可能会问 「啊那不是和 sketch 的 library 一模一样么?」

区别在于 Figma 的组件库是同步、实时、全员更新的。这就意味着团队中每一个成员和组件库之间的交互都更加快捷高效,而组件库可以更新给全部成员、全部文件,再也不用像 Sketch 那样 10 个人 10 种不同的组件版本了。

4. 拉拢团队用户的核心竞争力 — 团队协作

而 Figma 最核心的竞争力,非团队协作不可,这也是 Figma 能够抵抗 sketch 赢家通吃的大势,硬生生从 sketch 手里抢下一片市场的关键所在。

它进可实时协作,几位设计师同时操作同一设计文件,不用再受你改一下保存完之后他才能再改第二下的困扰;它退又可评论留言,哪里急需修改、哪里优先级较低,又或者如果恰好马上下班,却有地方需要记录的话,这个功能绝对属于杀手级 feature。

5. 恢复历史版本

我不知道大家有没有经历过,对一个文件一顿猛改之后眼疾手快行云流水地按下了 ⌘+S 和 ⌘+Q ,美滋滋交稿下班之后 leader pick 了前一个版本。尽管这是小概率事件,不过一旦遇到就只能欲哭无泪地修改回去。

Figma 在这一点上就做的非常到位,版本管理体验良好。

Figma 中每一个成员做的每一次修改都会自动生成对应的历史版本,即使一些成员误操作修改或者删除了一些东西,依然有机会一键抢救。

FIgma 目前存在的一些问题

但 Figma 目前也有一些有一些可能「劝退」新人的问题:

1. 无中文

我想作为设计师,认识几个英文单词并不是什么难事,新人只要多用几天软件,一边用一边查查词典,就 Figma 里面这些单词量并不成问题。

2. 全程需要联网

同样是由 Figma 线上工具的特质决定的,在没有网络的特殊情况下可以先使用 sketch 来完成工作,再将 sketch 文件导入 figma,图层、蒙板、图片、矢量几乎全部可以保留下来。

3. 网络不是特别稳定

由于 figma 服务器在海外,所以国内网络直连不太稳定。如果你想要又快又稳定的网络访问,找一个梯子对于设计师这种常年扒在墙头往外瞄的人来说也并不是一件难事。

4. 插件、资源生态不够完善

相较于 Sketch 来说,Figma 显然还属于后辈,所以插件生态还略显单薄不是特别完善。不过 Figma 本体的功能已经非常完善和强大了,所以日常工作基本上都能满足。

这些问题有些如果努力一下完全不成问题,有些也很好解决,有些需要时间去积累,但这完全不妨碍现在的 Figma 成为在一定程度上可以替代 Sketch 的软件。

Sketch/XD/Figma 如何选择

1. Windows用户

如果你用的 Windows,那么目前唯二可以用来做 UI 设计的软件是 XD 和 Figma。

XD 今年 10 月起开始收费。当然不是全功能收费,但是「保存到本地」这一功能是需要收费的,否则只能存储在只有 2G 容量的云端,这就比 Figma 的体验还差了。

所以在 10 月之前你们依然可以使用 XD,但 10 月之后,如果不想花钱你们将只剩 Figma 可用,想熟悉它不如趁早。

2. Mac用户

Sketch 依然是国内的 UI 设计工具王者,如果个人使用且没有团队协作的需求那我还是推荐 Sketch,但一旦涉及到两人或(尤其是)两人以上的中小团队,Figma 独此一家的团队协作优势将展现的淋漓尽致。

另外一种情况是你想找工作,要做项目整理或者重设计,那么在 Figma 中完成会是一个更好的选择。你带着 iPad 就能让面试官看到项目源文件,指不定什么时候就能给自己加加分。

当然前提是,你最好得会翻墙。

结尾

之前看到一篇文章中说设计长久以来就像一座封闭的孤岛,受限于专业设计工具的本地存储形式,设计师不仅与上下游的衔接困难,内部交流沟通的效率也不容乐观。我们交给客户视觉稿,交给开发标注切图,交给设计师同事源文件,一项设计任务的输出变得非常繁琐和琐碎。

现在,Figma 将这些孤岛链接在了一起,开发可以直接查看对象属性甚至代码,设计可以查看调用组件库、规范、原型、视觉稿,这些只需要一个分享链接。

所以我说 Figma 是面向未来的设计工具,一点都不夸张。

最后如果你们想尝试 Figma 的话,有 Sketch/XD 基础的同学只需要花一天时间熟悉一下 Figma 的操作和快捷键,就可以进行无缝切换,它几乎没有学习成本。或者实在不想自己摸索也可以康康我在虎课上录制的 Figma 教学,过一遍就会,没有难度。