Figma即将替代Sketch，而你还在用Ps

9号自习室

北京/UI设计师/5年前/5784浏览

版权

9号自习室

被称为未来设计软件的figma，有什么与众不同?2020年又增加了什么新功能？

undefined

界面设计指的是对软件的人机交互、操作逻辑、界面美观的整体设计。界面设计刚兴起时并没有专门的界面设计软件，设计师们长久以来使用的都是传统设计软件Adobe旗下的ps、ai。由于界面设计的逐渐需求逐渐变大，至到2008年以轻量、实用定位的sketch成功挑战ps、ai的地位，填补了没有专门针对Web、Moblie界面设计软件的尴尬局面，但sketch对macOS系统的过于依赖，使这款软件在设计圈没有得到完全普及。紧接着Adobe推出了同样轻量设计核心的xd，弥补了sketch对mac OS系统的依赖，但由于xd与sketch太过相似，且没有突出功能，一直处以一个不上不下的位置。

2015年以多人实时在线协作的界面设计软件figma出现，很多人在使用过后认为figma是来自未来的界面设计软件。Figma的核心功能多人实时在线协作不仅释放了设计师的工作效能，同时将设计师从孤岛的工作方式转变成公开的多人协作。接下来，结合我自己的使用感受来聊下这款来自未来的界面设计软件Figma.

undefined

在工作过程中，当发生临时需求或仅仅是领导突然想看下项目进度，由于sketch、ps、xd等本地文件的空间限制，设计师接到需求不能立刻开始工作，或需要耗费些人力、物力资源得到设计文件才能接续工作。

特别今年疫情期间，由于国家政策很多人在家隔离办公。但由于连着新年假期，设计文件及相关素材资料都在公司电脑里，很多设计师不得不在疫情期间全副武装赶到公司拷贝文件。甚至由于电脑限制，设计师面临不得不租赁电脑或申请电脑回家办公。

figma作为一款建立在浏览器的云服务工具，无论发生任何突发情况，用户都可以在任何地方持续进行工作，你只需要一台电脑及无线网络。

undefined

sketch作为界面软件的革新者，对Mac OS系统的依赖使很多用户对sketch软件可望而不可及，从2008年sketch推出封闭测试版到现在，团队依然没有出Windows端的意愿。这是很多设计师对sketch诟病的一点，想想设计师购买一台MAC电脑仅仅是为了打开设计文件，很多公司或个人预算有限的设计师依然在使用Windows系统。

同时另一方面本地文件都会存在版本向下不兼容的问题，由于sketch软件对macOS系统的依赖，当软件版本升级时，系统升级也成了必须，而shetch的插件也需要不断升级。

figma作为存在于浏览器的设计软件，首先支持全平台使用，无论macOS、Windows、和iOS平台都可实时编辑，预览设计文件，门槛非常低。也解决了软件升级和系统适配问题。

在工作过程中，经常出现设计1稿、2稿、3稿……n稿，或“第一稿更好”的情况，而与多人协作时，更要注意提供设计稿版本的正确，避免同步工作中文件的冲突。

figma是在同一个画布的全局云服务工具，设计和开发可以在设计稿上实时沟通、讨论、修改及时得到反馈。更好的管理文件的版本更新，文件也就不存在损坏或丢失的问题。节省了大量执行和沟通的时间。实时线上设计，保证打开的文件永远是最新设计稿。甚至查看者可以在设计稿中留下评论，进行项目沟通。在figma文档的右上角会有在这个文档中对用的用户头像，点击某人头像便可查看他的操作，随时掌握设计风格及进度。创建者可以通过访问控制，限制查看者和编辑者的权限。

figma的历史版本功能，确保当出现“还是第一稿好”的情况时，设计不会被删除或覆盖掉（免费版30天版本历史记录；专业版、企业版无限的版本历史记录）远程无忧共享或查看设计。当然也可以将现在正在制作的文档通过快捷键command+option+s手动添加到历史文档上传云端服务器，随时随地随你需求保存或调取使用，同时不会因为保存文件版本过多引起电脑卡顿。

UI设计稿最终要交到开发手中，将设计稿变成最终的产品。在figma中只需开通开发的张好的查看权限并发送链接即可，但目前有两个愿意导致开发不太接受figma：

figma自身的交付功能不够强大，仅仅只有参考代码，开发无法直接复制代码直接使用，因此还是需要类似蓝湖、zeplin的工具进行属性的参看与复制。
figam受限于服务器在国外，首次打开的速度会很慢。

针对这个问题，目前已经有人开发了一款对应的交付工具Juuust handoff。轻松解决交付问题，最后会附上链接。

学习一款软件从基本功能的熟悉到软件操作熟练，基本需要3个月的时间，更别说有些为了效率需要记住的快捷键，以及前期对新软件的适应，所谓“一学就会，一用就废”，不知道阻碍了多少人。Adobe系的软件容易上手的原因，除了界面功能排布类似外，还因为基础的快捷键及基础的操作习惯都是一样的。

图中，上图是sketch的操作界面，下图是Figma的操作界面。两个操作界面都是左边图层和组件操作面板，右边常规的对齐、位置、大小、阴影等操作面板的布局形式。figma的界面几乎可以称为sketch的副本，工具的名称、键盘快捷键，画板、组甚至导出工具等基本是一样的。首次接触的人甚至会以为figma是sketch的网页版，因此对与熟悉sketch的用户来说，figma的学习曲线基本为0。

另一方面，figma能够完整呈现导入的sketch文件，每个画板、组和图层均保留名称、分组和属性。但不支持photoshop。

传统的路径工具是指包含一个或两个以上端点的线条，通过拖动锚点及调整锚点两边手柄的方向和长短来进行操控。在使用过程有两个问题：

传统路径每个端点最多只能连接前后两个节点以保证线性连续，如果插入非连续的路径，路径只能搭在上面没有办法进行真正的连接。
调整形状只能拖动锚点，而不能直接移动

figma的CTO埃文·华莱士在第一次遇到传统的路径编辑工具时，对于操作难度及破碎的互动体验感到很困惑。事实上，自1987年基于路径的矢量绘图工具：钢笔工具、贝塞尔曲线被发明出来，此后基本没有任何变化。

figma在构建矢量编辑工具时，并没有沿用熟知的钢笔工具系统，而是建立了新的系统称为矢量网格（vector network）。改进了几个方面：

可以任意一个锚点连接多个锚点；
通过拖动锚点间的线条，更改曲线的形状
自动填充闭合区间。

组件化设计是sketch除了轻量化的工具操作外，最核心的软件优点。sketch的组件设计有symbol、text style、layerstyle和library功能，但sketch的组件在使用逻辑上却很僵化。sketch的组件只能通过更改symbol里的原始组件进行属性的修改，复用组件只能进行文案、距离的简单修改。

Figma的组件优于Sketch的点在于，当修改原始组件的的大小属性时，子级组件都会跟着改变；而修改某个子集组件属性时并不会影响其他子级组件。在组件方面Figma比sketch拥有更高的自由度，设计更灵活。现在很多公司都有自己的组件库，但在使用过程还是会面对细微的调整，Figam组件的灵活性在组件库的调用方面可以节省更多不必要的操作和混乱。

Figam于2019年发布Smart animate的动效制作功能，不同于Sketch页面间呆板的跳转，Figam采用了类似principle的补间动画，只需画出开始和结束的状态，figma就可以帮助用户自动补全中间帧。甚至在手机端预览可以手指操作控制过渡。

在创建组件和构建时，会出现相似仅有微小差别的组件需求。比如按钮组件，用于各个状态、大小、明暗模式。sketch组件使用的是组件套组件的形式，通过组件的大小属性进行区分切换。

2020年10月底，figma发布了新的组件集功能，又称超级组件。超级组件将这些相似但又有细微不同的组件合并到一个组（Property）中，文件通过属性和参数（Value）的命名进行组下差别的命名向下划分。

图中蓝色框相当于组（Property）的概念，颜色、角度、按钮状态属于参数（Value）。设置过程中的问题：

组件集中的组件必须为原始组件。
必须按照“属性=xx,属性=xx”的方式命名。“,”必须为英文状态的逗号，有些教程中用“/”隔开属性设置，但目前我只有用“,”才能成功。
开关切换方式的属性命名可以是任何形式，但“=”后面目前只识别“yes，no”“true，false”“on，off”
组是唯一的，值（属性）可以无限。
组件集为变体，不受大小属性制约。

Figma从去年开始社区的测试，并与众多作者签署了Beta版，用户可以在此空间发布figma文件，供任何人使用、重新混合、或者自查。

目前已有400多个创作者发布了1000多个文件。Microsoft和Google这样的大型设计组织已经开发了完整的设计系统；邦妮·凯特·沃尔夫（Bonnie Kate Wolf）等插画家也在figma中创造了可重复使用的插画设计系统；Mixpanel公司发布了无穷无尽的figma套件，甚至有人在figma中进行棋盘游戏。各大公司的组件库，设计源文件不再是行业秘密一样的存在。当然也有人开始在Figam上出售自己的设计源文件或自己建立的组件库。Figma社区使Figma成为一个有趣的创意画布，用户可以在其中自由的上传下载素材、资源。使协作不在只是存在在小的团队或组织，设计而不再局限于产品设计，而是与整个设计圈建立共享与学习。（文章底部会有Uber 、蚂蚁、奥迪等全球大公司Design Systems 合集网站）

sketch的成功除了软件本身轻量化的使用感受，多功能、易安装的插件也是sketch受追捧的原因之一，但近几年sketch团队似乎依然是初创时的样子，没有在功能上进一步优化。软件通过安装各种插件扩展功能同时，也伴随插件更新带来的不稳定。

figma的团队意识到插件可以在极其方便的前提下扩展figma的产品功能，但会面临同样两个问题：

插件通常基于不受完全支持的API构建，可靠性和稳定性有待考量
设计师需要懂开发的人为他们构建插件

为了保证插件的安全、稳定和高性能，figma团队在figma社区为用户提供了40多个公共插件，点击右边按钮直接按照。有兴趣的用户也可以自己构建插件，将其发给figma公司。

在设计的过程中，设计师可能需要查看详细的说明文档、用户调研，完成更好的用户体验工作。Figma团队的新功能画布内超链接，在设计图的文案中添加跳转链接，除了能够在系统内进行页面间的跳转，还可以跳转到外部页面。Figam的超链接除了简化了整个使用感受外，扩展设计与软件外链接性。

undefined

Photoshop由「工业光魔」（皮克斯工作室的前身）的首席创意官约翰·诺尔和自己的哥哥，当时正在读密歇根大学计算机视觉系博士的托马斯发明，软件主要针对图像编辑、印刷。1991年Photoshop2.0版本发行，引起印刷业的重视，引发桌面印刷革命。直到5.0版本的Photoshop核心功能基本没有变过，而每次的更新迭代也使这款老牌软件越来越臃肿。随着网络时代的到来，当时的设计师们没有更多的选择，继续使用这款软件的进行界面设计的同时，也延续着不合时宜的软件使用习惯及界面布局。

随着Web、Moblie端使用场景的变多，设计师们急需工业化、标准化的工具高效的完成界面设计工作，催生了Sketch的诞生。还记得刚知道Sketch这款软件，软件轻量、便捷、批处理，打破传统软件对界面设计过程中的限制，界面设计软件就该这样的。但目前看来Sketch硬件和交互形式对mac OS系统的过于依赖（由于技术底层依赖OS X特有的Core Graphics框架，除非完全重构，否则不会有Windows版本）；Sketch的开发商Bohemian Coding团队，虽然高效商务懂得做产品，但团队规模过小，无法做更多功能尝试，完善功能需要借助大量插件，如蓝湖、zeplin等外部工具；sketch的软件产品虽然有插件，组件的新功能，可能由于设计思维的限制，依然沿用了之前Photoshop的工具概念，虽然也有可能是由于害怕太过激进的改版，会逆反用户使用习惯。sketch软件更像是界面设计软件迭代过程中的过程。正如Designer News中用户留言“Sketch在之前改变了UI设计的设计规则，而他现在是这个领域的老大，却已不是创新者”

Figma一开始提出软件核心线上多人协作，正是互联网工作从项目、产品、交互、设计、开发、测试相互衔接，以及越来越多的全栈式设计工作场景需求，背靠正是飞速发展的网络世界。Figma2020年重点关注的创造、协作、社区，社区将全球愿意分享的设计资源以Figam可控权限的形式分享出来，协同全球的设计资源，释放设计工作者效能，可以创造更多差异化设计的未来化软件。