UI设计干货!Figma,Pixso和Sketch的区别

pixso-figma-sketch.jpg

Figma和Pixso都是新一代可以直接在浏览器中使用的,功能上兼备Sketch并可以进行实时协作的设计工具。

Figma和Pixso是基于云端的设计工具,相比本地的Sketch增加了实时协作的功能,前两者可以看成是在线版的Sketch,三款工具用一个公式可以简单粗暴地总结为:

Figma/Pixso = Sketch + 云端实时协作

Sketch是老牌的UI设计软件,从2010推出至今已有10多年,但始终没有Windows版本,一直是许多用着Windows系统的UI设计师心中抹不去的痛,曾经一度有不少人为了用上苹果电脑专属的Sketch,买了人生的第一台Mac。

时过境迁,2016年Figma诞生了,作为一款基于Web端的UI设计工具,产品形态决定了Figma跨平台的特性,摆脱了过去Sketch对设备的依赖,使用不同系统的用户,仅用一个链接中就能实现跨平台和时空的设计协作。

Pixso,由国内本土团队打造的对标Figma的一站式协同设计工具,集UI设计、原型、交互、标注和资源于一身,打通产品、设计和研发协作多款软件间的壁垒,在一款软件中就能完成产设研全流程,原生中文语言,更符合国人使用习惯和需求。

同样是做UI设计的工具,在选择其中一款作为主力设计工具时,不少人会对Figma、Pixso和Sketch这3款工具进行对比。今天的这篇文章,我将从一个客观的角度,简要分析这3款UI设计工具的区别。

pixso-figma-sketch.jpg

软件语言

软件语言,是许多人第一次使用一款软件避不开的话题,Pixso是国内团队推出的产品,原生中文语言,而Figma和Sketch是海外的软件,Figma目前只有英文版,Sketch最初也只有英文版,从Sketch54版本开始提供中文版,从此使用Sketch不需要先进行汉化。

云端在线 VS 本地客户端

Figma和Pixso两者都是基于浏览器的UI设计工具,打开浏览器就能使用,而Sketch是比较传统的、基于本地客户端的软件,使用前需要在本地磁盘安装软件。

基于本地客户端的软件,更符合我们对软件最初的认知,受到先入为主的印象的影响,有些人会对Figma和Pixso这类云端工具的性能和流畅度表示担忧,但实际使用下来,两款软件的表现并不逊色于本地的Sketch,导入包含10W+图层的文件依旧可以流畅运行。

在Figma和Pixso中创建的项目,源文件和历史版本会保存在对应软件的服务器中,由于Figma的服务器位于海外,在打开或切换页面时,加载速度多数时候不如国内的Pixso。

image (1).png

当然,存放在Figma和Pixso服务器上的文件,同样可以下载到本地,满足本地备份的需求。

Figma目前只支持导出专有的fig格式,而Pixso除了导出专有的pix格式,还支持导出sketch和xd两种格式。

image (2).png

多人实时协作

多人实时协作,可以说是区分这3款软件必须提及的方面,也是Figma和Pixso的亮点之一。

基于Figma和Pixso云端的特性,在这两款软件中创建的文件,可以邀请设计师、产品经理、工程师、合作方等相关人员加入协作,多人在线编辑同一份文件,省下原本需要开多个会议的时间。

Pixso多人在线协作.gif

在创建协作链接时,可自定义加入协作的人员的权限——可查看可编辑,你可以根据项目分工设置相应的权限。

image (3).png

收到链接的协作者点开链接就能直接查看文件内容,同样不需要提前安装软件,这对非设计师群体来说非常友好,不需要为了查看源文件而特地安装某个软件,这也是Figma和Pixso这类云端工具带来的另外一个优势。

Sketch最初不支持多人实时协作,在2020年底的Beta版才推出了类似Figma和Pixso的协作能力,这个功能没有集成到本地的Sketch客户端中。

开始协作之前,需要把本地的Sketch文件上传到Sketch Cloud中,在浏览器打开分享链接,才能参与协作。

image (4).png

回溯历史记录

Figma、Pixso和Sketch三者都支持自动保存历史记录,方便你回溯到早期的设计版本,不过这三者也存在着细微的差别:

Figma和Pixso自动保存的历史记录会存放在服务器上,自动保存的版本历史会以时间线的方式进行呈现,对于一些重要的设计节点,我们也可以手动保存一个单独的历史版本。

Figma免费版目前最多保存30天内的历史记录,超出之后就需要订阅会员,Pixso则没有这种限制,支持保存过往编辑的所有记录。

pixso自动与手动保存

Sketch自动保存的历史记录会缓存在本地的磁盘,就像PS的「历史记录」一样,当历史记录数量比较多,会占用电脑较多的资源,导致设备卡顿。

Sketch自动保存.gif

评论功能

用过Word的朋友,应该对Word的批注功能并不陌生,它在审阅文档的场景非常有用,可以在不修改文档的基础上,提出我们的反馈或修改意见,方便与相关的人员进行沟通。

image (5).png

换到设计项目协作的场景,同样会有高频沟通的需求,Figma和Pixso内置了类似于Word批注的评论功能。

以Pixso为例,点击顶部工具栏的「添加评论」(快捷键为C),在需要修改的位置添加评论并艾特相关的设计师,可以在不破坏设计原文件的情况下给出反馈,被艾特的人也可以及时回应,大大提高了设计评审的效率。

image (6).png

而对于Sketch,软件本身缺少了评论或批注的功能,如果要想实现同样的目的,需要给Sketch额外安装一个插件Sketch Focus。

image (7).png

矢量网格

矢量网格是Figma和Pixso独有的功能,这个功能对Sketch中传统的钢笔工具进行了优化,表现在:一个点可以连出多根线,拖动中间的连接点,其他的线条会自动跟随,并且所有的封闭网格都可以独立控制是否填充颜色。

矢量网格可以说是一个开创性的功能,它让钢笔工具更符合我们的直觉,降低了钢笔工具的使用门槛,与此同时,也提升了绘制矢量图形的效率。

矢量网格.gif

响应式布局

如今用户使用的设备呈现碎片化的趋势,屏幕尺寸大小不一,UI设计师在进行设计时,也需要考虑同个界面在不同屏幕下的效果,这3款软件都提供了相应的功能,来让页面布局随着屏幕大小产生自适应变化。

在Figma和Pixso中,借助内置的「约束」功能,设置好页面元素水平和垂直方向的约束选项,当我们调整画板尺寸时,页面元素的大小会随画板宽度自适应发生变化,实时预览页面在不同屏幕尺寸下的效果。

Pixso布局约束.gif

在Sketch中,通过设置「调整尺寸」中的参数,同样也可以实现响应式布局,但它不如Figma和Pixso那般灵活直观——点击「约束」缩略图,就可以快速设置元素在不同方向上的约束。

Sketch和Pixso约束对比

文件导入

Figma和Pixso支持导入来自Sketch的文件,导入后可以还原文件导入前的状态,所有的页面、画板、图层和元素都是分离的状态,且保留有元素或组件最初设置的阴影、模糊等样式。

这意味你可以很方便地从Sketch迁移到Figma或Pixso,实现设计工具的切换,另一方面,原先使用Sketch制作的UI Kit、或者下载的Sketch资源,也可以很方便地在Figma和Pixso两款软件中复用。

image.png

软件界面

Sketch推出的时间比较早,软件本身的界面设计可以说是给后来的诸多UI设计软件打了样。

Figma和Pixso沿用了Sketch的界面布局,让初次接触的用户不会感到陌生,可以更快上手:

顶部是工具栏,左侧是页面→画板→图层面板,右侧为属性面板,中间最大的就是编辑区域。

image (8).png

桌面客户端

Figma和Pixso虽然是基于云端的在线工具,但它们都提供了基于云端封装而成的桌面客户端,支持Windows和macOS系统。

在使用桌面客户端时,同样需要联网,我们所做的每一步操作才会自动保存到云端,但如果是短时间的断网,两者都支持离线编辑,在网络恢复到正常状态后,就会将当前版本自动同步到云端。

image (9).png

你应该使用Pixso吗?

——是的!使用Pixso,并不意味着你需要完全从0开始,尤其是对用过Sketch的用户而言,Pixso绝大部分操作逻辑与Sketch保持一致,从Sketch切换到Pixso,只需要重点了解Pixso新增的功能与用法,同样可以快速上手。

Pixso 目前对所有个人用户免费开放,内置的所有功能都可以免费使用!

以上,希望有帮助。

效率工具指南:致力成为国内优质的工具测评媒体。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,542评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,596评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,021评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,682评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,792评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,985评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,107评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,845评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,299评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,441评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,072评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2 350

推荐阅读更多精彩内容