Figma VS Sketch

自译外文 分类: 经验/观点 版权: 原作者: Meng To
2394 22 17 5
2016-10-12
20.4

Image title

                   Figma就像是在浏览器中使用Sketch进行实时协作。


在我使用过的有限时间的中,我可以很自信的说它比我第一次使用Adobe XD要更灵活而且它的产出率很高。它有三个很显著的特性:实时协作、矢量网格和版本历史。可以在同一个文档同时处理很多的设计师的共同工作,而且不会出错。最重要的是,这个工具非常快,也很容易在一个文档中同时处理20个以上的画板。


人们会不可避免的对Figma和Sketch进行比较,作为长期使用Sketch的用户,我想分享一下我的经验,从三年前的开始到现在。


浏览器 VS 本地


Image title


我起初对Figma持怀疑态度,因为它是一个基于浏览器的界面设计工具,但现在我相信在未来它一定会占有一席之地。一切都很灵敏,就像预期的一样,和本地工具Sketch一样有强大的功能,除了一些像符号、覆盖和插件的功能。每个文档和版本都保存在服务器上,使迭代很容易实现。你也可以保存你的文档为.fig格式,这样便可以和他人分享你的Figma文件。


Image title


默认情况下,Figma使用谷歌字体(有800+的免费字体库),你也可以自己添加一个插件。他们还包括了很受欢迎的FontAwesome字体。我认为这是一个很明智的举动,因为这样用户不需要自己下载额外的字体了。


实时协作


Image title


对于很多团队来说这是一个改变。这能在设计师、工程师和客户进行实时执行和沟通时节省大量的时间。虽然不是每个项目都需要协助,但还是有存在的必要性的。


Image title


你可以快速的独立进行工作,然后邀请他人可进行编辑查看或仅限查看你的作品。一个基于浏览器的工具的优点是,接收方不需要安装任何东西,进需要有Mac便可参与。Figma文件可以在Mac、Windows、Linux和移动设备(仅限查看)上使用。我不能描述这多大的改变了团队的动力,让设计人员和开发人员之间的协助。任何人都可以进来检查所有的标注:字体、颜色、大小、距离等。开发人员可以很好的检查约束条件和如何响应式布局。


Image title

版本历史


Image title


Figma的版本历史更视觉化,你可以快速在版本之间进行比较。这比Mac本地的Sketch有更好的体验,Sktech给人感觉很慢而且有些过于累赘。虽然它们都有自动保存和版本历史,但执行能力是完全不同的。


Image title


在Sketch中,它很缓慢的在每个版本之间进行导航。通常,设计师会关掉这个功能,因为它占用了太多的磁盘空间。


评论系统


Image title


评论功能完全是内置的。团队的成员可以对你的设计进行评论,而且你会收到有新评论或者回复的通知。一旦你完成了,你便可以点击"解决"来隐藏线程。在Sketch中,你可以下载一个插件来进行评论,或者使用Zeplin进行更多的交互解决方案,包括标注和交付。


Image title


Zeplin也是基于浏览器的,所以它可以适用于Mac/Windows。


Sketch另一个值得注意的插件是来自 InVison 的 Craft,它可以让你用真实数据进行设计。你可以快速的从预设、网站或者APIs生成名字和照片。


Image title


如果你把Sketch、Craft、InVision 和 Zeplin结合在一个,那对于评论和原型来说是很有吸引力的。


矢量网格


矢量网格是开创性的。你可以移动矢量的线而不是点,所有连接的点会自动跟随。这是因为它不仅仅是使用一个起点和终点,在Figma是可以连接多个矢量线,然后创建一个web使用的矢量点。一旦你开始使用你会发现它是非常直观的。


Image title


矢量网格是Figma发明的。


当然,它没有了剪刀和旋转拷贝,但对于大多数的矢量,我相信Figma是很容易使用的,而且矢量网格会产生有趣的结果~


导入Sketch文件


Figma能够和准确的导入Sketch文件。每一个画板、组、图层都完整的保留了他们的确切名称、分组和属性,包括多边界、阴影等效果和背景模糊混合模式。正因为如此,我认为可以把Figma作为Sketch的一个拓展工具,或不远的将来可能会代替它。你可以导入任意一个Sketch文件、资源或者矢量。他们目前还不支持Photoshop文件,这说明了Sketch和Photoshop还是存在一定程度的兼容性问题。


Image title


奇怪的是,我不能从Sketch到Figma进行矢量的复制粘贴,但可以直接拖拽一个SVG文件到一个打开的文档。


Image title


我也能导入一个Angle的矢量并得到一个反馈。当然,渐变和阴影又是并看不出来(甚至丢失),但所有的形状都在。这是很棒的一点,你可以使用几乎任何Sketch的UI工具包。


有一个桌面版本


Image title


你可以下载桌面版本,但别指望会有本地的体验。它基本上只是一个Web的包装。不过,键盘快捷键不会干扰浏览器的,这是它与浏览器版本的不同。例如,CMD

 +1 - 9 之间切换浏览器标签,但是在桌面应用程序它是进行文档间的切换。你也摆脱了多余的chrome。


约束


响应式布局是现代设计工具不可或缺的功能。设计师需要处理越来越多的设备分辨率。不能通过调整画板来自适应从iPhone7到7Plus的设计是十分愚蠢的。


Image title


在Figma,你可以对边界进行约束或者设置元素中心。它本质上和Sketch的固定缩放是一样的。不得不承认Figma的版本更视觉化和直观化,而Sketch有更多的选择,像浮动等。


Image title


浮动有什么用处吗?当然,如果你想要保持元素互相之间的大小和距离是同一比例,那它是很有用的。


Image title


性能


在Figma处理几十个画板是很容易的。那些抱怨Sketch性能的人可能会更受用。它是基于浏览器的,入口点几乎是任何拥有电脑桌面、笔记本或手机的人。事实上,那些希望Sketch出Windows版本的人找到了答案。


用户界面


Image title


用户界面几乎和Sketch一样,小到如工具的名称、键盘的快捷键、画板和组,或者导出工具都一样。不过别误会,这对用户来说是件好事。这意味着Sketch有着强大的一个标准,AdobeXD和Figma都毫不犹豫的追随着。


Sketch就像设计工具中的iPhone,许多新的工具复制它的标准,有些弯路,不过时间久了,它们会足够成熟到有自己的风格。最后的赢家会是用户,他们在很高的标准中有了更多的选择。换句话说,他们不再局限于使用Photoshop做UI设计, 就像有着键盘的智能手机。当然,我不能说这是对Figma或者Adobe的侮辱,他们满足了现代设计师的需求而且不会走弯路可以顺利完成工作。公平的说,很多标准来自Mac和Adobe自己的Illustrator和Fireworks(RIP)。


你应该使用Figma吗?


我想答案是响亮的"是"。你不需要学习一个新的工具,因为它是和Sketch一样的操作,对于我来说这些工具间的切换是很自然的。


这两个工具可以相辅相成,意味着你可以在Mac和Windows、iOS和Android、家庭和办公室间切换来满足不同的需求,我会选择Figma因为它的实时协作和支持多平台(Windows、Mac、Linux),Sketch因为它的平台的成熟化和本地化还有它的资源插件。相对于特性,我相信他们最终会彼此互相融合(实时协作、矢量网格、评论与符号。覆盖。插件)。


Figma直到年底是完全免费的,所以赶快试一试吧~



原文地址:https://medium.com/@mengto/figma-vs-sketch-c01e5e74eddd#.764oefvkv

作者地址:https://medium.com/@mengto


厉嗣傲

UI/UX设计师

1226粉丝/63关注

扁平化设计的流行趋势UI中使用动效的3个关键点

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2017 UI.CN