赞助商
立即赞助

全面解读2020最值得上手的界面设计工具:Figma

设计神器3年前 (2021)发布 流光
2.7K 0 0

前言

工欲善其必先其器,器即工具。选择一种工具的质是选择一种方式。个人的选择或许是基喜习惯,行业的选择则伴随行业工模式的变化。为互联网行业的设计师,我们应当时时跟进技术的展,锁新模式和新工具。

设计工具的战场

1. 概述

随日新月异的技发展,互联网时入深水区。行业环境越复杂,设师将面临越多机遇挑战。

设计不同艺术,质是为决问题,而设计工具直接影响着设计师思考问题和决问题的能力。设计工具的背,现着设计行业的整水平和效率。

如把设计工具竞争类比战场,笔者今天探讨是互联网时代最受关注界面设计战场。

界设计是指软件交互、操作逻辑、界美观体设计。

全面解读2020最值得上手的界面设计工具:Figma

2. 历史追溯

在界面设计领域,设计工具一直以惊人的速度演化,竞争愈演愈烈。从曾经的PS一家独大,到近年Sketch新晋王者,到当下的各类新工具百家齐放。

2010年前,界设计师普遍使用是Adobe Photoshop(简称PS),那时界设计在起步阶段。PS定位是图像处理软件,是个全设计工具,界设计是使用这个工具个业分支。2010年后,界设计飞速发展,PS性能和效率都法匹配这个新兴业需求。

因此,Sketch顺应而生,聚焦界面设计,并迅速占领界面设计的场。

放眼当下,各类新型界面工相继出现,挖掘和突破Sketch的短板。Sketch只面向Mac用户,其它系统无法使用,XD成为Windows上最近Sketch的工替代,但过于相似、缺少独也味着XD目前难以超越Sketch。

另外,Sketch原型交互设发挥不足,inVision很好的从这环节独立出。再如Framer,基于源原型框架,码的优势,设技的融合搭建桥梁。

全面解读2020最值得上手的界面设计工具:Figma

总体看,界面设具往两方向分化。

一种是模仿者,进行功能效仿或内部整合。另一种是跨界者,横向扩展,做不同领域的功能集成。工具战场是力量的决胜,亦是速度的角逐。

3. 黑马逆袭

近来,有一匹黑马,频繁出现在设计师的信息视野,成为设计行业的热门题,团使用逐渐覆盖国内外龙头企业。

国如微软、谷歌、Facebook等,国内如里,腾讯,节跳动,网易。

这匹黑马,就是 Figma

如今,从 Sketch 迁移至 Figma 已然成为趋势。Figma逆袭的奥义何在,如此受到设计师和团队的青睐。探讨之前,我们妨先来了解这款软件。

全面解读2020最值得上手的界面设计工具:Figma

Figma是什么

Figma是基于浏览界设计协作工具。它最大特是基于浏览和设计协作。

全面解读2020最值得上手的界面设计工具:Figma

1. 基于浏览器

Figma以浏览器为载,依靠网络,程在操,所有文件存在云端。

简单理解,Figma是打开个网页使用,Sketch等是打开本地软件使用。

端的最大优势就是受物设备限制,多平台共享,使灵。

Figma全可用,操作系统支持 Win,Mac,Linux等,备支持脑,板,机。在线味着不需要下载安装包本地,软件插件都会动更新,不再漫长地等待下载和频繁安装更新。

全面解读2020最值得上手的界面设计工具:Figma

2. 设计协作

Figma是第一个真正意义上的设计协作工具。协作,是Figma对界面设计师这个角色的重定位。

如Sketch专注于计个人完成计工作,就像一个一的点,如需和外界产生关,需要借助第三方工。

Figma从团体的角度去设,界面设不仅仅设师人的事。

团内,设计师需要更高效地衔接设计流程的上下节,设计师和设计师之间以更轻松地协沟通,共同完成设计工。

团队,设计业应有分享精神,站在业巨肩膀上再创新,动设计业更加高效。

全面解读2020最值得上手的界面设计工具:Figma

流程衔接——跨界工具集成

传统流程中,设计师在不同节,需要使用不同工具进行设计工。

流转在不工具过程,会造成时成本消耗,生流转误。

使Figma就免切换工具的烦恼,因为它本身就全面覆盖了产设计中有重要的步骤,工作流程更效整统一。

令人赞叹的地方是,这的工集成体,界面却比Sketch更简洁易上。

全面解读2020最值得上手的界面设计工具:Figma

沟通——多人在线同时编辑

支持多人在线同时编辑,意味着团队可并行工作,同时修改一个件。

项目是一个整体,而不再是被割的多个文件。

文件一链接,不再需传送的源文件。如此,极降低团队的沟通、修改、维护本。

全面解读2020最值得上手的界面设计工具:Figma

资源共享——开源社

互网行业追求高效,俗话说“众人拾柴火焰高”,集众人的力量方能让价值最大化,资源必不可少。

如Github全球的社交编程及码托网站,其社交化编码、源共享的理念改变整发社区的态,让全球发者共同创造了无数优质项目。

在设计行业,Dribbble和Behance为最名的国际设计区,是设计师们展示品、合招聘的最大平台,但一般只展示设计品而不共享源文件。

Figma社区功能,和Github有异曲工妙。

一方面设计师们可一键取世界顶尖公司及设计师精心制作的设计系统和模,快速构建质量的设计作,节省重复基础性工作的时间精,工作效率。

另一方面,计可以轻浏览行业一线计作品,开拓计视野,并进行互动沟通。

全面解读2020最值得上手的界面设计工具:Figma

工具的技术趋势

择工具是一件慎重的事情,特别对团队来说,需要从整体的角评估成本、险和报。

个人的选择或许是基于喜好习惯,而行业的选择则是伴随行业工作模式的变化。如前文所说,从 Sketch 迁移至 Figma 已然成为行业趋势。

互联网行业发怎样的变化,面对未的技趋势,我们关注什么。

1. 技术趋势

数字化

全面解读2020最值得上手的界面设计工具:Figma

信息,泛指人类社会传播的一切容。数字是将信息转变为数字、数据,建立数字模,而后转变为一系列二进制代码,引入计算机进行处的过程。当信息爆炸的时代,更多信息数字形式存在,人与世界的互将更多络为媒介。

计算

“”实质上是一个络,一种计算资源共享池。

云计算,把计算资源通过网络让资源被快速取用。未来的代是云计算的代,用户通过网络就可以获取无限资源,同获取的资源不受间和空间的限制。

信息处理拥多时间自由性空间灵活性,意我们获取使用信息可以随时随,即所得。

数据

数据信息的基础,智慧的提,所新技的依托。数据数据的集合,对海数据行专业化处理,形价,行业竞争、产业实盈利的关键。

大数据和云计是深度结合的,并和物联网、移动互联网等新兴计形态密切相关。

人工智能

即AI,是以人类智能相似的方式做出反应的智能机器。

工智能使能像样思考,并能够胜任些常需要类智能才能完成复杂工作。

未来机器人是否超越人类,甚至接管世界,是个尚待讨论的话题。至,我们的世界正在借助AI的量更自,更效。

5G

第五代移通信技术,是最一代蜂窝移通信技术。

的网络号,主要就来于通基站。随着网络基础施日渐完善,界的运作和发展将会更快。

未,当5G全面覆盖,且所的设施都实了智能化后,我们将真的入到一“万互联”的时。

2. 工具趋势

新技的浪潮下,具行业的发展趋势,整体看,呈云端化一体化。

全面解读2020最值得上手的界面设计工具:Figma

云端化

云端化是工作载体的变革,从本地云端,息以最快的方式触达和共享。用户无需在本地安装软件和插件,直在浏览器上使用工,摆脱了脑硬件的束缚。

云端拥强的算能力,使用性能远超一般的本软件。拷传送式的本模式文件的共享,效率远不如链接式的云端模式。比较典型的例子就各类线文档编辑具。

一体化

一体化作模式的颠覆,流程、具、资源都应当打破壁垒,让协作通畅。

一化以理为将不同的个有机融合为一个整,形成协同效力,现团的整效率和益最大化,里的团以是项目团,以是司,也以是整个行业。用技术的方式扫除沟通协的障碍,能大大提升团的业和效率。

Figma的模式

Figma的愿是成为设计界的 Google Docs,打造类似 GitHub 的设计共享与协的区。

这也是我认为Figma现阶段逆袭原所在,它敏锐捕捉到了云端和协价值。

在过,设计师和产、开发者都有明确的角色分配,但随着全栈设计和全链路设计的升温,设计师的角色定位有了更多可性,可更进一步融入产的设计开发流程中。

全栈全链路计,二者本质上都需要计拥有更的综思维能力。Figma的跨界功能集成优势,好的匹配了这种职业发展方向。

Figma的利器

大家最关注的,应该还是在体功能使用上,Figma底有何亮点。下面,详细聊聊那些本人目前觉得Figma比Sketch更优的功能。

1. 全局组件

计组件化的概念是从程序的开发模式中演变而来,是将界面拆成更部件使之易于管理的方式。形象化去理解,界面计就像搭积木,组件是积木,页面是模型,计使用组件(积木)搭建成页面(模型)。

组件的内部逻辑,可以用父子关系形。原始被复制的组件父件,复制出的组件子件。以父子关系比喻因,组件逻辑中,父件变化,子件们会继承,同变化。这点,FigmaSketch一致的。

Figma组件逻辑比Sketch高明在,子件以灵活处理继承和嵌套关系。

子件可以各自调如形状、颜色、尺寸等样属性,我们发现某个元素样复用频率高,也能轻松转变成新父件。如此,个相组件可以应不场景变化成不样,构组件体系变更灵活。

Sketch的子件只复刻父件,任何对组件的修改,都会全覆盖掉原始组件的模式成。

因此,当使用Sketch构建组件体系,需要提前把所有可能的式全部罗列出来。随着项目日渐复杂,组件复杂臃肿,后续的维护极其繁琐。

全面解读2020最值得上手的界面设计工具:Figma

使用Figma,父件可以放置任何页面任何位置。

比如把父件子件旁,调整父件的细节时就可以同看到子件整页面中的效果,很方便。

而使用Sketch时,组件被固定放置在另外一个名为Symbols的页面,设计组件和浏览页面效果需要在不同页面切换查看。

全面解读2020最值得上手的界面设计工具:Figma

△ Figma演示

全面解读2020最值得上手的界面设计工具:Figma

△ Sketch演示

2. 跨流程工具

高保真可交互原型设

Figma可制作高保真的交互原型,无缝完从设到原型演示的切换。

它比Sketch生硬的页面跳转,适合demo展示。

如需制作更复杂交互,Figma也提供导入Principle功能。在手上预览效可用 Figma Mirror 。支持导入gif文件,演示更加灵活。

全面解读2020最值得上手的界面设计工具:Figma

设计评审反馈

内置评论功能,在设计和原型模式下支持注释。

设计和协作是可以时进,任何都可以在设计图任何地添加评论。可以在评论 @其他或将评论标记为已解决。

但可于设计评审,是设计走查反馈的利器。

全面解读2020最值得上手的界面设计工具:Figma

前端协作

个 Figma 文件都有代码模,工程师可以在其查看设计文件。工程师能在设计图上获取标注,并自导出所需资(括 CSS、iOS、Android 样)。

全面解读2020最值得上手的界面设计工具:Figma

共享灵活

Figma支持任何文件,页面或画板的共享。提供权管理功能,自定义共享人编辑和查看的权范围。

创共享链接时,单击该链接将打开Figma浏览版本。这共享形,使共享准确高效便捷。

全面解读2020最值得上手的界面设计工具:Figma

你可能有这些疑问

1. Figma英文,我看不懂怎么办?

打网站:https://figma.cool/ 支持客户端汉化补丁Chrome插件。

2. Figma基于浏览器,会慢吗?

Figma线使用,极少占用本内存,处理文件速度极。

使用验是,飞一般的丝滑。

Sketch 太容易卡顿,设计文件大多卡顿更严。

3. Figma学习成本高吗?

于有Sketch使用经验设计师,1天足够。

Figma的界面和快捷键,都和Sketch基本相似,而且Figma支持Sketch导入,有的信息和容都得到了最大限的保留,这对项目迁移非友好。

对于未使用Sketch的计,笔者认为Figma是目前最易上好用的设计软件了。

4. Figma收吗?

Figma分成初级免版,专付版,企付版和免版。

个人使用,选择初免费版就完全足够,无限的文件存储空间,30 版本历史记录,但只能2人同编辑。

专业版合团队,比免费版优无限的版本历史记录,无限编辑者,无限项目。费用按月15元/月/人或按12元/月/人。

企业版比业版优在有更定化服务。满条件的教育者或者学生,以免费使用。

5. Figma的教程、插件、资源在哪里?

最优的教程就是Figma官网——https://www.figma.com/ Figma身就自带区功能,提供富的资源、插件,而且一直在更新,Figma的生态境将越来越。

优秀国内Figma学习网站荐:

  • https://figmachina.com/
  • https://figmacn.com/

结语

接下的10、20、50,设具还会给我们怎样的惊喜?

谁无法完美预测,但能肯定的是,能脱颖而出的是,在流程和模式上做出创举,代表未来方向的产品。

至少现阶段,Figma打破了原有工具局限立了自己独特核心竞争力,并未来可期。

大问题和阐述更多思考。

欢迎关注作者公众号:「美柚UED」

全面解读2020最值得上手的界面设计工具:Figma

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

Figma作为一个线上协作设计平台,因其强大的组件功能,越来越受到设计团队的青睐。 为帮助用户对组件进行更加高效的管理,20...
Figma
我一贯主张不要为工具所累,所以在各种诱人的 Sketch 插件面前,我总是提前思考下自己的真正需求,这款软件是将我奴役,还是...
Anima
由于最近的工作原因对图标有了更加全方位的认识,虽然之前写过《如何系统学习功能图标?来看资深设计师的全面总结!(一)》...
ui设计
互联网的产品视觉设计师又分为界面视觉设计师和运营视觉设计师,那么,这两者有何区别呢? 随着时代进步,互联网的发展让我...
界面设计
编者按:这篇总结来自资深设计师Danny Sapio,他根据自己的工作经验总结了下面29个实用的设计网站和工具~ 其实如果你想要获...
干货
今天,我们来讲解下组件的动态响应式,这是组件库搭建的重中之重,也是 Sketch 搭建组件库系列的终篇! 依旧,来一个大纲: ...
sketch
风筝kk:从聊天界面中常见的文字部分、图片部分来分析,看看聊天界面在设计时需要注意哪些细节。 参考文章:《聊天缩略...
界面设计
Sketch 推出了 62 Beta 版本来迎接 2020。从一月的 53 开始到现在,总共推出了 10 个大版本更新。下面就一起看下 62 版本的新...
sketch