Figma下一代UI设计神器设计达人

随着日新月异的技术发展,互联网时代进入深水区。行业环境越复杂,设计师将面临越多机遇和挑战。设计不同于艺术,本质是为了解决问题,而设计工具直接影响着设计师思考问题和解决问题的能力。设计工具的背后,体现着设计行业的整体水平和效率。

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

2010年前,界面设计师普遍使用的是AdobePhotoshop(简称PS),那时界面设计还在起步阶段。PS的定位是图像处理软件,是一个全面的设计工具,界面设计只是使用这个工具的一个行业分支。2010年后,界面设计飞速发展,PS的性能和效率都无法匹配这个新兴行业的需求。因此,Sketch顺应而生,聚焦界面设计,并迅速占领界面设计的市场。

放眼当下,各类新型界面工具相继出现,挖掘和突破Sketch的短板。Sketch只面向Mac用户,其它系统无法使用,XD成为Windows上最接近Sketch的工具替代,但过于相似、缺少独特也意味着XD目前难以超越Sketch。另外,Sketch在原型和交互设计上发挥不足,inVision很好的从这个环节独立出来。再如Framer,基于开源原型框架,在代码上的优势,为设计和技术的融合搭建桥梁。

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

Figma是基于浏览器的界面设计协作工具。它的最大特点就是基于浏览器和设计协作。

Figma以浏览器为载体,依靠网络,全程在线操作,所有文件保存在云端。简单理解,Figma是打开一个网页使用,Sketch等是打开本地软件使用。

云端的最大优势就是不受物理设备限制,多平台共享,使用灵活。Figma全平台可用,操作系统支持Win,Mac,Linux等,设备支持电脑,平板,手机。在线意味着不需要下载安装包到本地,软件插件都会自动更新,不再漫长地等待下载和频繁安装更新。

支持多人在线同时编辑,意味着团队可并行工作,同时修改一个文件。项目是一个整体,而不再是被分割的多个文件。文件是一个链接,而不再是需要传送的源文件。如此,极大地降低团队的沟通、修改、维护成本。

互联网行业追求高效,俗话说“众人拾柴火焰高”,集合众人的力量方能让价值最大化,资源共享必不可少。如Github是全球最大的社交编程及代码托管网站,其社交化编码、开源共享的理念改变着整个开发社区的生态,让全球开发者共同创造了无数优质项目。在设计行业,Dribbble和Behance作为最知名的国际设计社区,是设计师们展示作品、合作招聘的最大平台,但一般只展示设计作品而不共享源文件。

技术趋势

·数字化

信息,泛指人类社会传播的一切内容。数字化是将信息转变为数字、数据,建立数字化模型,而后转变为一系列二进制代码,引入计算机内部进行处理的过程。当下信息爆炸的时代,更多信息以数字化形式存在,人与世界的互动将更多以网络为媒介。

·云计算

·大数据

·人工智能

即Al,是以人类智能相似的方式做出反应的智能机器。人工智能使机器能像人一样思考,并能够胜任一些通常需要人类智能才能完成的复杂工作。未来机器人是否能超越人类,甚至接管世界,至少,我们的世界正在更自动化,更高效化。

·5G

第五代移动通信技术,是最新一代蜂窝移动通信技术。我们的网络信号,主要就来自于通信基站。随着网络基础设施日渐完善,世界的运作和发展将会更快。在未来,当5G全面覆盖,且所有的设施都实现了智能化后,我们将真正的进入到一个“万物互联”的时代。

新技术的浪潮下,工具行业的发展和趋势,整体来看,呈现云端化和一体化。

云端化

云端化是工作载体的变革,从本地到云端,信息以最快的方式触达和共享。用户无需在本地安装软件和插件,直接在浏览器上使用工具,摆脱了电脑硬件的束缚。云端拥有强大的计算能力,使用性能远超一般的本地软件。拷贝传送式的本地模式在文件的共享上,效率远不如链接式的云端模式。比较典型的例子就是各类在线文档编辑工具。

一体化

一体化是工作模式的颠覆,流程、工具、资源都应当打破壁垒,让协作更通畅。一体化可以理解为将不同的个体有机融合为一个整体,形成协同效力,实现团体的整体效率和利益最大化,这里的团体可以是项目团队,可以是公司,也可以是整个行业。用技术的方式扫除沟通协作的障碍,能大大提供团体的专业和效率。

Figma的模式

Figma的愿景是成为设计界的GoogleDocs,打造类似GitHub的设计共享与协作的社区。这也是我认为Figma现阶段逆袭的原因所在,它敏锐的捕捉到了云端和协同的价值。在过去,设计师和产品、开发者都有明确的角色分配,但随着全栈设计和全链路设计的升温,设计师的角色定位有了更多可能性,可以更进一步融入产品的设计开发流程中。全栈全链路设计,二者本质上都需要设计师拥有更强的综合思维能力。Figma的跨界功能集成优势,很好的匹配了这种职业发展方向。

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

组件的内部逻辑,可以用父子关系来形容。原始被复制的组件是父件,复制出来的组件是子件。以父子关系比喻是因为,在组件逻辑中,父件有变化,子件们会继承,同步变化。这点上,Figma和Sketch是一致的。

Figma组件逻辑比Sketch高明在,子件可以灵活处理继承和嵌套关系。子件可以各自调整如形状、颜色、尺寸等样式属性,当我们发现某个元素样式复用频率高,也能轻松转变成新的父件。如此,一个相同的组件可以应对不同场景变化成不同的样式,建构组件体系变得更灵活。Sketch的子件只能复刻父件,任何对组件的修改,都会以完全覆盖掉原始组件的模式完成。因此,当我们使用Sketch构建组件体系时,需要提前把所有可能的样式全部罗列出来。随着项目日渐复杂,组件复杂臃肿,后续的维护极其繁琐。

使用Figma时,父件可以放置任何页面任何位置。比如把父件放在子件旁边,调整父件的细节时就可以同步看到子件在整个页面中的效果,很方便。而使用Sketch时,组件被固定放置在另外一个页面名为Symbols的页面,设计组件和浏览页面效果需要在不同页面切换查看。

Figma演示

Sketch演示

·高保真可交互原型设计

Figma可制作高保真的交互原型,无缝完成从设计到原型演示的切换。它比Sketch生硬的页面跳转友好,适合demo展示。如需制作更复杂的交互,Figma也提供导入Principle的功能。在手机上预览效果可用FigmaMirror。支持导入gif文件,演示更加灵活。

·设计评审反馈

·前端协作

每个Figma文件都有代码模式,工程师可以在其中查看设计文件。工程师能在设计图上获取标注,并自行导出所需资源(包括CSs.iOS、Android样式)。

·共享灵活

Figma支持任何文件,页面或画板的共享。提供权限管理功能,自定义共享人员编辑和查看的权限范围。当创建共享链接时,单击该链接的人将打开Figma的浏览器版本。这种共享形式,使共享方式准确高效便捷。

Figma是在线使用,极少占用本地内存,处理文件速度极快。使用体验是,飞一般的丝

滑。Sketch太容易卡顿,设计文件一大一多卡顿得就更严重。但Figma的服务器在外网,打开的时候需要加载,进入界面设计就完全流畅了。可以通过科学上网提高Figma的网络使用体验。每个人的网络环境会有差异,笔者在不使用科学上网的情况下,也能正常使用。

对于有Sketch使用经验的设计师,1天足够。Figma的界面和快捷键,都和Sketch基本相似。而且Figma支持Sketch导入,所有的信息和内容都得到了最大限度的保留,这对项目迁移非常友好。对于未使用Sketch的设计师,笔者认为Figma是目前最易上手好用的设计软件了。

Figma分成初级免费版,专业付费版,企业付费版和教育免费版。个人使用,选择初级免费版就完全足够,无限的文件存储空间,30天版本历史记录,但只能2人同时编辑。专业版适合团队,比免费版优在有无限的版本历史记录,无限编辑者,无限项目。费用是按月15美元/月/人或按年12美元/月/人。企业版比专业版优在有更多定制化服务。满足条件的教育者或者学生,可以免费使用。

在接下来的10年、20年、50年,设计工具还会给我们带来怎样的惊喜谁都无法完美预测,但能肯定的是,能脱颖而出的是那些,在流程和模式上做出创举,代表未来方向的产品。至少现阶段,Figma打破了原有工具的局限建立了自己独特的核心竞争力,并且未来可期。

THE END
1.全面解读2020最值得上手的界面设计工具:Figma优设网另外,Sketch在原型和交互设计上发挥不足,inVision很好的从这个环节独立出来。再如Framer,基于开源原型框架,在代码上的优势,为设计和技术的融合搭建桥梁。 总体来看,界面设计工具在往两个方向分化。 一种是模仿者,进行功能效仿或内部整合。另一种是跨界者,横向扩展,做不同领域的功能集成。工具战场是力量的决胜,亦是速https://www.uisdc.com/comprehensive-interpretation-of-figma/
2.Penpot:开源设计协作平台Penpot是一个开源的设计和原型制作工具,它专为团队协作而构建,允许设计师、开发者和产品经理在同一平台上无缝地创建、分享和迭代设计项目。这个平台基于Web,因此它能够在任何操 Penpot是一个开源的设计和原型制作工具,它专为团队协作而构建,允许设计师、开发者和产品经理在同一平台上无缝地创建、分享和迭代设计项目https://pidoutv.com/sites/16921.html
3.设计师必备!8款在线原型图工具分享友友原型图在线Penpot是一种免费的开源原型图设计工具,基于合作,与团队成员分享、反馈、测试和优化设计方案,使您的设计过程更加流畅。 Proto.io Proto.io 它是一种功能非常丰富的在线原型图工具,具有良好的性能,矢量工具和组件库非常强大,可以很容易地绘制各种在线原型图。您也可以在IOS或Android应用程序中运行您的在线原型图。 https://blog.csdn.net/weixin_44070413/article/details/136484988
4.最全零代码nocode/低代码lowBildr构建交互式网站的强大方式。界面就像一个设计工具(例如Figma)而不是标准的网站建设 uibakery:使用其可视化构建器构建前端UI组件,并导出格式良好的Angular代 BubbleVisual Web app builder。空间中的领导者。您可以使用Zeroqode的模板开始或使用他们的如何构建教程 https://www.tanmer.com/blog/707
5.软件界面原型设计工具OSCHINA体验【开源中国】全新 APP,一站式掌握开源技术动态,即刻下载,开启您的开源技术探索之旅! UIDesigner,简称 “UID”,是一款进行软件界面原型设计的工具。 它拥有强大的模板和预制功能,能够快速的搭建起软件界面的高保真原型。可以实现设计师、产品经理、程序开发工程师三者间的快速沟通,减少不必要的工作内耗。 展开阅读全https://www.oschina.net/p/uidesigner
6.吐血推荐2万字总结Mac所有应用程序软件工具和相关资料MockFlow - 用于网页设计和可用性测试的在线原型设计套件。 pencil - 开源免费制作软件原型的工具 Mockplus - 更快更简单的原型设计工具。 OmniGraffle - 可用来绘制图表、流程图、组织结构图、思维导图以及插图或原型。 XMind - 一款实用的思维导图软件。 https://blog.51cto.com/codeshallow/5257905
7.MasterGo比如集成 IconPark 开源图标库的插件、查找与替换插件、AI 一键抠图插件、图层倾斜、涟漪渐变插件等等。 MasterGo 软件特点:一个工具完成所有设计师工作 一站式创作: 从界面设计到交互制作再到查看演示,用 MasterGo 都能搞定。 跨平台:提供 Win / Mac 客户端以及在线网页版,打开浏览器就能用 共享原型: 通过一个https://www.iplaysoft.com/mastergo.html
8.菜鸟工具菜鸟工具,为开发设计人员提供在线工具,网址导航,提供在线PHP、Python、 CSS、JS 调试,中文简繁体转换,进制转换等工具。致力于打造国内专业WEB开发工具,集成开发环境,WEB开发教程。..https://c.runoob.com/
9.15款在线画图软件深度测评:第一款绝对不要错过在当今数字化时代,在线画图软件成为了创作、设计和表达创意的重要工具。无论您是专业设计师还是创意爱好者,这些在线画图软件都将帮助您实现创意的无限可能。本文将为您介绍15款在线画图软件,从功能特点、优缺点和适用场景三个方面深度测评,助您找到最适合您需求的工具。 1. 流程图和图表软件 (1)博思白板boardmix 博https://boardmix.cn/article/15-online-drawing-softwares/
10.产品经理,设计师,前端工程师必备的绘图工具(原型图,思维导图,UMLAxure RP是一款专业设计师不容错过的免费原型设计工具,设计师可以用它快速创建应用软件或Web线框图、流程图、原型和规格说明文档。 作为一款专业的设计工具,它能快速、高效的创建原型 网站地址:https://www.axure.com/ 墨刀 墨刀致力于简化产品制作和设计流程,采用简便的拖拽连线操作,作为一款在线原型设计软件,墨刀支https://www.huoban.com/news/post/8837.html
11.最受产品经理关注的10个原型设计工具Mockingbird 是一款使用纯javaScript开发的基于Cappuccino 的在线原型设计工具。为用户提供完全基于浏览器窗口的产品原型设计服务,由于Mockingbird 采用了Cappuccino开源框架,能够较为逼真的模拟 Axure 这类桌面软件,给用户极大的亲切感。Mockingbird 内置常用的各种Web控件,包括Text, Link, Button, Image, List, Box 等等,鼠https://www.jianshu.com/p/b2ef15d764d9
12.SDK开发中用到的工具Android开发教程Android设计规范原型设计工具 交互设计工具 UI效果预览工具 配色工具 设计稿版本控制工具 图标处理工具 在线Icon库 取色工具 不透明度16进制值 手机To电脑同步预览工具 Gif图片录制工具 UI Programming Language Tutorials Games Guides Android设计指南非官方简体中文版 Android Cheatsheet for Graphic Designers Google Material Design 中文https://github.com/inferjay/AndroidDevTools
13.在线接口文档工具在线文档apigithub地址: https://github.com/Redocly/redoc 开源协议:MIT License 用户:docker、redocly 推荐指数:★★★☆ 示例: redoc自己号称是一个最好的在线文档工具。它支持swagger接口数据,提供了多种生成文档的方式,非常容易部署。使用redoc-cli能够将您的文档捆绑到零依赖的 HTML文件中,响应式三面板设计,具有菜单/滚https://www.eolink.com/news/11464.html
14.十大必备界面设计工具,让你的设计更出彩!软件介绍:Origami是一款基于Quartz Composer的交互原型设计工具,这款工具可在无需编程的情况下轻松实现与设计原型进 立即查看 6.Pencil原型图绘制工具 3.0.4 Pencil是一款开源的手绘风格原型图绘制工具,适用于各种架构图和流程图的绘制。它提供了多种原型设计模板、多页背景文档、跨页超链接等功能,并支持富文本编辑。用https://app.zol.com.cn/jiqiao/69907.html
15.10个超棒的界面设计工具UI软件编程这是一个在线设计工具,你可以用它设计按钮、菜单、图表和功能区,设计好后可以一键生成 HTML 或 CSS 代码,生成的图标还可以直接导出 PNG 格式的图片。总之,这款 UI 设计工具不要求你有多么丰富的代码知识。 Fluid UI Fluid UI 是目前最快的移动 app 原型设计工具,它可以在移动设备上测试各种低保真和高保真的 aphttps://www.open-open.com/news/view/27f0a6
16.UI设计师导航网Octopus.do是一个可以让你对网站或应用程序结构创建详细可视化站点地图并进行原型设计的在线工具,同时提供动态计算项目成本的功能,并以简单的链接形式进行分享。 Read more ? Draw.io Draw.io是一个专业的开源图表工具,可以创建和共享流程图、组织结构图、UML图、ER模型、网络图等等,无需注册即可免费在线、PC桌面及http://so.uigreat.com/
17.Paradigm用户体验设计 使用线框,情节提要和原型工具可视化屏幕流和布局。 用例管理 使用用例工具对文档进行建模并管理项目目标。 视觉造型 创建UML,BPMN,DFD,ERD,SysML和SoAML模型。 特色 在线图工具 在线绘制图表。流程图,维恩,UML,DFD,ERD等。 表格设计师 收集数据,获取反馈并组织结果。无需编码。 生成https://www.evget.com/product/3434
18.w3schools在线教程w3schools 在线教程提供主要网络编程语言的免费学习教程,参考资料和实例练习。涵盖HTML,CSS,JavaScript,Python,Java,C,C++,C#,SQL,PHP,Bootstrap,XML,AI,ChatGPT,Bard,人工智能,编程语言,数据库,大数据分析,编程工具,运维工具,通信技术等热门主题。https://m.w3schools.cn/
19.Bootstrap单页动画Html5WebApp设计工具UniApp可视化DIY官网做好的拖拽式可视化设计工具,提供最微信小程序设计、Bootstrap页面设计、单页动画设计、WebApp可视化设计、代码生成器及导出工具,app低代码工具,低代码开发生成源码,一键生成app源码,app可视化开发,app制作,手机app,app软件,app开发,助力900万UniApp开发者http://www.diygw.com/
20.Web必备5款前端设计工具,效率开挂!对于设计前端页面这件事,每位设计师都有专属自己的设计理念。但面对快节奏的设计需求,效率比理念而言更加重要,前端设计工具Pixso多人在线前端设计工具不仅简单易操作,内部更向设计师提供了多智能化设计功能,譬如Pixso自动布局功能,采用全新交互UI组件,调解便捷灵活,可对页面进行绝对定位、负间距堆叠、画布空间操作等功能。https://pixso.cn/designskills/front-end-development-tools/