工欲善其必先其器,器即工具。选择一种工具的质是选择一种方式。个人的选择或许是基喜习惯,行业的选择则伴随行业工模式的变化。为互联网行业的设计师,我们应当时时跟进技术的展,锁新模式和新工具。
1. 概述
随日新月异的技发展,互联网时入深水区。行业环境越复杂,设师将面临越多机遇挑战。
设计不同艺术,质是为决问题,而设计工具直接影响着设计师思考问题和决问题的能力。设计工具的背,现着设计行业的整水平和效率。
如把设计工具竞争类比战场,笔者今天探讨是互联网时代最受关注界面设计战场。
界设计是指软件交互、操作逻辑、界美观体设计。
2. 历史追溯
在界面设计领域,设计工具一直以惊人的速度演化,竞争愈演愈烈。从曾经的PS一家独大,到近年Sketch新晋王者,到当下的各类新工具百家齐放。
2010年前,界设计师普遍使用是Adobe Photoshop(简称PS),那时界设计在起步阶段。PS定位是图像处理软件,是个全设计工具,界设计是使用这个工具个业分支。2010年后,界设计飞速发展,PS性能和效率都法匹配这个新兴业需求。
因此,Sketch顺应而生,聚焦界面设计,并迅速占领界面设计的场。
放眼当下,各类新型界面工相继出现,挖掘和突破Sketch的短板。Sketch只面向Mac用户,其它系统无法使用,XD成为Windows上最近Sketch的工替代,但过于相似、缺少独也味着XD目前难以超越Sketch。
另外,Sketch原型交互设发挥不足,inVision很好的从这环节独立出。再如Framer,基于源原型框架,码的优势,设技的融合搭建桥梁。
总体看,界面设具往两方向分化。
一种是模仿者,进行功能效仿或内部整合。另一种是跨界者,横向扩展,做不同领域的功能集成。工具战场是力量的决胜,亦是速度的角逐。
3. 黑马逆袭
近来,有一匹黑马,频繁出现在设计师的信息视野,成为设计行业的热门题,团使用逐渐覆盖国内外龙头企业。
国如微软、谷歌、Facebook等,国内如里,腾讯,节跳动,网易。
这匹黑马,就是 Figma。
如今,从 Sketch 迁移至 Figma 已然成为趋势。Figma逆袭的奥义何在,如此受到设计师和团队的青睐。探讨之前,我们妨先来了解这款软件。
Figma是基于浏览界设计协作工具。它最大特是基于浏览和设计协作。
1. 基于浏览器
Figma以浏览器为载,依靠网络,程在操,所有文件存在云端。
简单理解,Figma是打开个网页使用,Sketch等是打开本地软件使用。
端的最大优势就是受物设备限制,多平台共享,使灵。
Figma全可用,操作系统支持 Win,Mac,Linux等,备支持脑,板,机。在线味着不需要下载安装包本地,软件插件都会动更新,不再漫长地等待下载和频繁安装更新。
2. 设计协作
Figma是第一个真正意义上的设计协作工具。协作,是Figma对界面设计师这个角色的重定位。
如Sketch专注于计个人完成计工作,就像一个一的点,如需和外界产生关,需要借助第三方工。
Figma从团体的角度去设,界面设不仅仅设师人的事。
团内,设计师需要更高效地衔接设计流程的上下节,设计师和设计师之间以更轻松地协沟通,共同完成设计工。
团队,设计业应有分享精神,站在业巨肩膀上再创新,动设计业更加高效。
流程衔接——跨界工具集成
传统流程中,设计师在不同节,需要使用不同工具进行设计工。
流转在不工具过程,会造成时成本消耗,生流转误。
使Figma就免切换工具的烦恼,因为它本身就全面覆盖了产设计中有重要的步骤,工作流程更效整统一。
令人赞叹的地方是,这的工集成体,界面却比Sketch更简洁易上。
沟通——多人在线同时编辑
支持多人在线同时编辑,意味着团队可并行工作,同时修改一个件。
项目是一个整体,而不再是被割的多个文件。
文件一链接,不再需传送的源文件。如此,极降低团队的沟通、修改、维护本。
资源共享——开源社
互网行业追求高效,俗话说“众人拾柴火焰高”,集众人的力量方能让价值最大化,资源必不可少。
如Github全球的社交编程及码托网站,其社交化编码、源共享的理念改变整发社区的态,让全球发者共同创造了无数优质项目。
在设计行业,Dribbble和Behance为最名的国际设计区,是设计师们展示品、合招聘的最大平台,但一般只展示设计品而不共享源文件。
Figma社区功能,和Github有异曲工妙。
一方面设计师们可一键取世界顶尖公司及设计师精心制作的设计系统和模,快速构建质量的设计作,节省重复基础性工作的时间精,工作效率。
另一方面,计可以轻浏览行业一线计作品,开拓计视野,并进行互动沟通。
择工具是一件慎重的事情,特别对团队来说,需要从整体的角评估成本、险和报。
个人的选择或许是基于喜好习惯,而行业的选择则是伴随行业工作模式的变化。如前文所说,从 Sketch 迁移至 Figma 已然成为行业趋势。
互联网行业发怎样的变化,面对未的技趋势,我们关注什么。
1. 技术趋势
数字化
信息,泛指人类社会传播的一切容。数字是将信息转变为数字、数据,建立数字模,而后转变为一系列二进制代码,引入计算机进行处的过程。当信息爆炸的时代,更多信息数字形式存在,人与世界的互将更多络为媒介。
计算
“”实质上是一个络,一种计算资源共享池。
云计算,把计算资源通过网络让资源被快速取用。未来的代是云计算的代,用户通过网络就可以获取无限资源,同获取的资源不受间和空间的限制。
信息处理拥多时间自由性空间灵活性,意我们获取使用信息可以随时随,即所得。
数据
数据信息的基础,智慧的提,所新技的依托。数据数据的集合,对海数据行专业化处理,形价,行业竞争、产业实盈利的关键。
大数据和云计是深度结合的,并和物联网、移动互联网等新兴计形态密切相关。
人工智能
即AI,是以人类智能相似的方式做出反应的智能机器。
工智能使能像样思考,并能够胜任些常需要类智能才能完成复杂工作。
未来机器人是否超越人类,甚至接管世界,是个尚待讨论的话题。至,我们的世界正在借助AI的量更自,更效。
5G
第五代移通信技术,是最一代蜂窝移通信技术。
的网络号,主要就来于通基站。随着网络基础施日渐完善,界的运作和发展将会更快。
未,当5G全面覆盖,且所的设施都实了智能化后,我们将真的入到一“万互联”的时。
2. 工具趋势
新技的浪潮下,具行业的发展趋势,整体看,呈云端化一体化。
云端化
云端化是工作载体的变革,从本地云端,息以最快的方式触达和共享。用户无需在本地安装软件和插件,直在浏览器上使用工,摆脱了脑硬件的束缚。
云端拥强的算能力,使用性能远超一般的本软件。拷传送式的本模式文件的共享,效率远不如链接式的云端模式。比较典型的例子就各类线文档编辑具。
一体化
一体化作模式的颠覆,流程、具、资源都应当打破壁垒,让协作通畅。
一化以理为将不同的个有机融合为一个整,形成协同效力,现团的整效率和益最大化,里的团以是项目团,以是司,也以是整个行业。用技术的方式扫除沟通协的障碍,能大大提升团的业和效率。
Figma的模式
Figma的愿是成为设计界的 Google Docs,打造类似 GitHub 的设计共享与协的区。
这也是我认为Figma现阶段逆袭原所在,它敏锐捕捉到了云端和协价值。
在过,设计师和产、开发者都有明确的角色分配,但随着全栈设计和全链路设计的升温,设计师的角色定位有了更多可性,可更进一步融入产的设计开发流程中。
全栈全链路计,二者本质上都需要计拥有更的综思维能力。Figma的跨界功能集成优势,好的匹配了这种职业发展方向。
大家最关注的,应该还是在体功能使用上,Figma底有何亮点。下面,详细聊聊那些本人目前觉得Figma比Sketch更优的功能。
1. 全局组件
计组件化的概念是从程序的开发模式中演变而来,是将界面拆成更部件使之易于管理的方式。形象化去理解,界面计就像搭积木,组件是积木,页面是模型,计使用组件(积木)搭建成页面(模型)。
组件的内部逻辑,可以用父子关系形。原始被复制的组件父件,复制出的组件子件。以父子关系比喻因,组件逻辑中,父件变化,子件们会继承,同变化。这点,FigmaSketch一致的。
Figma组件逻辑比Sketch高明在,子件以灵活处理继承和嵌套关系。
子件可以各自调如形状、颜色、尺寸等样属性,我们发现某个元素样复用频率高,也能轻松转变成新父件。如此,个相组件可以应不场景变化成不样,构组件体系变更灵活。
Sketch的子件只复刻父件,任何对组件的修改,都会全覆盖掉原始组件的模式成。
因此,当使用Sketch构建组件体系,需要提前把所有可能的式全部罗列出来。随着项目日渐复杂,组件复杂臃肿,后续的维护极其繁琐。
使用Figma,父件可以放置任何页面任何位置。
比如把父件子件旁,调整父件的细节时就可以同看到子件整页面中的效果,很方便。
而使用Sketch时,组件被固定放置在另外一个名为Symbols的页面,设计组件和浏览页面效果需要在不同页面切换查看。
△ Figma演示
△ Sketch演示
2. 跨流程工具
高保真可交互原型设
Figma可制作高保真的交互原型,无缝完从设到原型演示的切换。
它比Sketch生硬的页面跳转,适合demo展示。
如需制作更复杂交互,Figma也提供导入Principle功能。在手上预览效可用 Figma Mirror 。支持导入gif文件,演示更加灵活。
设计评审反馈
内置评论功能,在设计和原型模式下支持注释。
设计和协作是可以时进,任何都可以在设计图任何地添加评论。可以在评论 @其他或将评论标记为已解决。
但可于设计评审,是设计走查反馈的利器。
前端协作
个 Figma 文件都有代码模,工程师可以在其查看设计文件。工程师能在设计图上获取标注,并自导出所需资(括 CSS、iOS、Android 样)。
共享灵活
Figma支持任何文件,页面或画板的共享。提供权管理功能,自定义共享人编辑和查看的权范围。
创共享链接时,单击该链接将打开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」