这些鹅厂设计师都爱用的神器，个个都让你效率爆棚！
在鹅厂工作，少不了会和同事互相安利好用的网站软件。而今天，我特意整理了几款鹅厂设计师爱用的办公“神器”，对提高效率很有帮助，有软件有插件也有网站，推荐大家都来试试！Adobe Color网站链接：https://color.adobe.com/zh/create/color-wheel刚入行的设计师们，如果没有系统学过配色，对颜色把握不够，担心自己审美不过关，都可以来试玩下这个网站，Adobe 官方的——Adobe Color（前身是Kuler）它可以调整颜色色度、明度、饱和度，有成千上万的海量预制配色方案。最重要的是可以调用上面的色彩方案，直接导入到 Photoshop、AI、InDesign 等软件中。上至做网页设计，下至做 PPT，想要好看的配色方案，用它准没错！TinyPNG网站链接：https://tinypng.com/做好的图片太大，担心影响网站加载速度，又不想压缩影响图片质量？那 Tiny PNG 这个网站就必须了解一下了！能够对图片进行高压缩，但是不影响图片质量。重点是完全傻瓜式操作，打开网站，拖动图片上传，即可压缩下载。ProWork网站链接：https://prowork.qq.com/互联网公司少不了需要团队协作，但对于很多缺乏管理流程的小公司来说，只要需求一多，排期一赶，就容易出问题。想要让团队协作事半功倍？那鹅厂人都在用的项目管理工具 Prowork 就很适合你了！个人日历视图下，员工可以把任务拆解到每天，让工作目标清晰。多人视图下，管理层能轻松了解项目或团队成员的工作安排和进度，及时安排工作跟踪进度做到内容透明，信息互通。它能根据个人任务自动生成排期表，一键发送到相关成员的邮箱中。最亮眼的是它的自动化收集功能，节省了人工汇报的时间。还有数据报表，让管理者从人员，项目，负荷等各方面对团队进行了解，对有风险的地方，能及时发现问题做出有效决策。对要写工作周报的人来说简直是福音，快让你们公司的人用起来！CoDesign网站链接：https://codesign.qq.com/?ref=zh对于 UI 设计师而言，工作中少不了设计交付，而 CoDeisgn 可以在线预览设计稿，制作交互原型，支持交互原型展示，定点标注与评论。还会自动记录设计稿的更新历史，并且提供设计源文件云端备份能力，可随时回溯历史版本。跟市面上的同类竞品对比，它的优势就是支持 Sketch、Adobe XD、Figma 跟 PS 插件，据说之后还会支持 Axure！而且重点是它免费！还承诺不对个人用户收费（毕竟腾讯旗下的，真的不差钱）在鹅厂，现在已经实现设计师全覆盖了。不仅用户量在逐步攀升，功能也在不断的迭代中，现在入手真的很香！Screen to Gif网站链接：https://pc.qq.com/detail/13/detail_23913.html最后一个神器，来自个人的好用推荐！没有广告，才 3m 的大小，非常轻便的一款录屏软件！不仅能够随手录制电脑屏幕的各种画面，还能调整动图的文件大小跟帧数大小，裁剪，编辑，加水印，加字幕都很行!重点是上手超简单，想要制作演示动图的朋友，赶紧用起来！最后，这五款“神器”，都是入职鹅厂后同事安利的，对他们来说可能就是常用工具，但对于我这种小白而言，真的有大大提高办公效率，之后如果有再用到啥好用的办公软件，我再来推荐！原作者：优设@ 零帝小武
7000字超多神器！腾讯设计师也在用的高效设计工具
近年来界面设计工具不断推陈出新，一些新兴的实用界面设计工具渐渐走进设计师们的视野，逐步改变着设计师的工作模式。作为互联网设计师，效率至上的工作原则敦促我们不断尝试新工具，建立新的工作模式。本文将回顾界面设计工具的发展历程，并着眼界面设计工具的发展趋势，为大家推荐一些新兴、高效的界面设计工具，涉及UI、动效设计领域，希望对大家有所帮助。界面设计工具的发展历程随着互联网行业的日益繁荣，界面设计领域逐渐走向成熟，界面设计工具也一直在以惊人的速度发展。界面设计工具的发展历经了三个阶段：第一阶段是最早期界面设计领域刚刚起步，设计师普遍使用PS来制作界面。但PS是一个全面的而非专门针对界面设计的工具，因此界面设计师在界面的绘制、文件的交付上都存在一定不便。第二阶段是Sketch的出现。虽然Sketch是一款Mac端软件，但其作为一款专门针对界面设计的工具，以其高效、小巧的优势迅速占领界面设计市场，逐步取代PS成为各大设计团队的首选。由于Sketch在动效制作方面的欠缺，出现了Principle、Flinto、Protopie等专门设计界面动效的工具，一般设计师都会将其搭配使用。当前阶段各种新兴设计工具如XD、Figma、Framer Web逐渐走进设计师们的视野，它们专注于界面设计领域，不断挖掘和突破Sketch的短板，为设计师们打造更良好的使用体验。界面设计工具的未来发展趋势界面设计工具的发展改变着设计师们的工作方式。界面设计工具也渐渐从单一专注设计本身向云端性、协作性、通用性发展，旨在实现更高效的设计生产活动。1. 云端性随着云计算的发展，界面设计工具也在逐步走向云端化。设计从本地转向云端，不再依赖于本地硬件的性能，云端的计算能力让使用性能得以提高。设计也不再受时间和空间的限制，只要有网络，设计师可以随时随地的工作，临时使用其他电脑工作时省去了安装软件、同步设计文件的麻烦。 设计文件的共享从传送本地文件给对方，变成发送链接给对方。前者耗费本地内存与下载时间，后者有网即可打开。设计工具的云端性使得设计的灵活度增强，设计效率大大提高。2. 协作性注重不同工种之间的高效协作也是设计工具的一个发展趋势。新兴的设计工具（如Figma、Framer Web）试图将产品、设计、开发、测试融为一个整体，让不同工种之间可以高效讨论、同步设计方案。实现整个团队效率的最大化。利用技术降低反复沟通的成本、减少同步不一致情况的发生，扫除各工种之间的协作障碍。3. 通用性今年9月Figma举办的第二届Config Europe大会，其主题是让设计和代码连接更紧密。可以看出设计工具越来越注重其通用性，设计工具不仅可以帮助设计师输出设计稿本身，而且致力于打破设计与代码之间的壁垒，降低交接成本。让设计实现变得更加轻松高效。界面设计工具推荐UI工具篇FigmaFigma是一款全平台通用的在线界面设计软件。2019年UXTOOLS设计工具使用报告中显示，Figma的使用率从12%增长至26%，在今年的Config Europe大会上Figma也预告了一些即将推出的功能迭代，其便捷高效的特性使其受到众多设计师的追捧，正在逐步抢占sketch的用户市场。Figma与Sketch相比，亮点功能有哪些？Windows用户也可随心使用与sketch只支持苹果生态系统相比，Figma最大的好处是windows用户也可以使用。他支持在Mac、windowsPC机甚至ipad上使用，理论上只要你能打开浏览器，就可以使用Figma愉快地设计。云端文件使用不卡顿，支持离线编辑Figma创建的文件全部存储在用户的云端账户中，不占用本地内存。当文件过大时，sketch会出现卡顿现象，拖拽一个图层都会变得很困难。而Figma对本地资源的消耗很小，大文件也几乎不存在卡顿的情况。设计师们最关心的无网或若网情况下Figma的使用问题，Figma也给出了相应的解决方案。其支持离线编辑，离线时会自动把内容保存在本地，当网络恢复后自动同步到云端。一键导入sketch文件Figma可导入Sketch文件，大大降低了文件迁移成本。如果你想迁移全部工作到Figma是十分便捷快速的。更强大的组件功能Figma和Sketch都拥有组件功能。当原始组件更改时，复制组件就会同步变化，在这点上二者是相同的。但Figma在组件逻辑上比Sketch更进一步，复制组件可以灵活处理与原始组件的同步关系。当设计师修改复制组件的样式时，原始组件不受影响。此时二者的关联逻辑仍然存在，当再次修改原始组件，复制组件仍然会同步变化。相比于Sketch，Figma把组件做的更加灵活限制更少。同时Figma也在不断优化其组件功能，在Config Europe大会上，Figma预告在今年11月会正式上线组件Variants功能。该功能是将一系列有关联的内容生成一个Variants组件，在使用时可以直接通过识别出来的组件属性改变组件样式。其优势在于使用组件时可以更轻松的切换所需组件的不同状态,再也不需要像在sketch中一样逐级寻找了。如下图中的按钮组件，设计师可以将所有的按钮状态都列举出来并按层级、颜色、状态、大小命名。然后选中所有按钮将其组成一个Variants组件。与代码紧密结合在使用sketch输出设计稿时，设计师往往需要借助蓝湖或zeplin输出标注文件。Figma则与代码紧密结合，本身自带交付功能。 其文件中的每个模块都有代码模式，只需要将开发同学的账号开通查看权限并发送链接，就可以直接在设计文件上获取标注，也可自行导出所需的CSS、ios、Android样式。一键恢复历史版本Figma会将设计师的每一次修改存成对应的历史版本，当老板说想要某一版时，设计师只要恢复至老板想要的版本就ok啦。如果其他设计师误删除或错误修改文件，也有机会一键抢救。团队协作团队协作功能可谓是Figma最大的核心竞争力。当几位设计师需要维护同一份设计文件时，Figma可以支持几位设计师同时在线修改，只要将文件链接分享给对方并给到相应权限（查看、编辑权限）即可。如果使用sketch，设计师一般会发送源文件给对方修改来达到协作效果。来回传输源文件不仅容易造成文件同步出错，而且有一定的下载时间成本和存储成本，相比之下Figma的优势显而易见。除了设计师之间的协作，Figma也有效提高了设计评审的效率。与在工作群截设计图标红再描述相比，Figma的评论功能使得同事可以在设计文件中实时标注讨论方案，提高了线上评审效率。小结设计师受文件本地存储的限制，在工作中把源文件给同事、设计稿给产品、切图给开发、一项简单的输出对接任务变得琐碎起来。Figma的出现打破了设计师长久以来的孤岛工作状态，设计师只需分享一个链接，同事可以修改设计稿、产品可以评审、开发可以查看界面模块的属性甚至查看代码，大大提升了设计师的工作效率。如果您的团队正在考虑更换设计工具,Figma是一个不错的选择。动效工具篇Framer WebFramer Web是一款在线动效设计软件，于今年5月上线正式版，相比于Framer家族的前两款产品Framer classic、Framer X, Framer Web突破了其以代码为操作核心的理念，上线的新版本对设计师来说更加易用友好。Framer Web的核心亮点是什么？网页端全平台可用相比于Framer classic和Framer X作为本地客户端软件只支持Mac电脑，Framer Web是一款基于浏览器的在线设计工具，因此windows用户也可以安心使用。同时个人版本免费，大大降低了设计师的使用成本。文件导入Framer Web可通过import选项导入Sketch甚至Figma文件，可搭配Sketch和Figma快速制作高保真动效。轻松实现复杂动效Framer一直主打利用代码实现复杂可控的交互动效,。虽然可以保证输出高质量的动效，但对于设计师们来讲十分不友好，学习成本过高。此次发布的Framer Web为了解决这一问题，增加了适合设计师使用的可视化界面控制动效，设计师可以通过Magic Motion轻松实现复杂动效。Magic Motion与principle、keynote的动画实现原理类似。当你选择目标元素添加了交互行为后，可以在Magic Motion中选择一个过渡方式。只要两个画板中的元素名称一致且在不同面板中拥有不同的形态，那么在画板切换时该元素就会生成补间动画发生相应变化。同时Framer也新增了一些特别的交互控制实现一些特殊动效。比如自带控件中的video，本身会有一些独特的交互行为如End、Pause、Play（播放、停止、暂停），当进行这些操作时，会触发相应的页面变化。从设计到代码代码一直是Framer的核心功能。Framer Web默认隐藏了代码面板，设计师还是可以在设定了动效后，通过点击顶部的handoff调出相应代码。如果你是一个需要使用代码的设计师，你仍然可以通过编辑代码实现更复杂的动效。对于设计师来说，Framer提供的丰富动效已经可以满足绝大部分诉求。绝大部分设计师已经无需再关注代码部分，通过可视化界面完全可以做出很丰富的交互效果。而Framer Web最终的野心是希望设计师通过可视化界面设计出参数化的动效，可以直接导出相应的能交付生产端的代码。目前Framer Web 已经可以实现导出相应动效代码，但导出的效果仍有待完善，只是可以导出Transiton的参数而已。高效协作Framer Web和Figma一样，也非常注重团队协作。设计师可以将链接分享对方进行查看、编辑，方便几位设计师合作一个项目的情况。与需要反复传输文件相比，Framer Web省时省力，大大提高了设计师的工作效率。小结Framer Web放弃了攻占界面设计领域的策略，转而和Figma官方达成积极的战略合作，专注于做专业的动效设计软件。因此Framer Web非常适合和Figma搭配使用。随着产品策略的调整，相信在不久的将来Framer Web还会为设计师们提供更丰富、高效的动效设计功能，非常值得期待。插件篇虽然云端化的设计工具正逐渐兴起，但sketch仍然是目前较为主流的界面设计工具。因此接下来除了为大家介绍一些可以提升工作效率的Figma插件外，也会介绍一些好用的sketch插件，大家可以根据自己的需求自行尝试体验。Design Lint（Figma）设计师在做较大项目时可能会绘制几十个页面，难免会存在界面丢失元素的情况。Design Lint就能帮助你解决这一问题。它可以在你工作的时候进行实时更正，检查不同界面直接的差异，包括颜色、字体、填充、半径值等样式差异并纠正错误。如果你做了一些修改，Desgn Lint也会根据你的修改实时更新。这款插件可以让你更专注于设计本身，而不用浪费时间检查不同页面的元素是否使用正确，大大提高了设计师的工作效率。https://www.figma.com/community/plugin/801195587640428208/Design-LintTinyImage Compressor（Figma）设计师在做较大项目时导出的设计稿过大，存储和传播的成本高。用这款插件最多可以比Figma默认导出的文件小90%。同时支持导出多格式文件，导出多个图片时还会自动生成一个zip压缩包。https://www.figma.com/community/plugin/789009980664807964/TinyImage-CompressorlDesign System Organizer（Figma）这款插件帮助设计师在设计组件系统时管理组件系统。在设计组件系统时，会遇到如图所示的：“Buttons-Small-Default…”的组织形式。该插件可以对组件进行管理、如分组、取消分组、移动、重命名。当重命名组后，该组中所有组件的名称都会随之改变，十分方便。https://www.figma.com/community/plugin/802579985985331070/Design-System-OrganizerJuuust Handoff（Figma）Figma本身自带交付功能，但该插件的好处是生成的是离线文件，导出的文件可直接交付开发。开发同学可以不受网络影响随时查看间距、色值等信息。https://www.figma.com/community/plugin/830051293378016221/Juuust-HandoffImage Optim （Sketch）设计师在导出设计稿时有时图片过大，Image Optim可以在导出图片时压缩图片，但不会影响图片的质量。使用时需先安装app再安装Sketch插件。https://oursketch.com/plugin/imageoptimFontFinder（Sketch）设计师在做较大项目时可能会绘制几十个页面，难免会存在字体使用错误的情况，Font FInder就能帮助你解决这一问题。它可以检测出文件中存在的所有字体，你可以勾选想要更改的字体就可以一键将其改成目标字体。再也不需要在几十个页面中逐个寻找更改，大大提升了工作效率。https://oursketch.com/plugin/font-finderCraft（Sketch）Craft插件十分强大，其中填充功能可以大大提升设计师的效率。在设计如列表页时，设计师为了效果需要编辑不同的标题、图片，都要冥思苦想编内容。Craft可以一键填充文字，如姓名、文章、日期、邮箱、地址、国家等。不同类别下面也设置了一些分类，方便设计师选择。除此之外，Craft还可以一键填充真实不重复的照片，为设计师节省了很多时间。https://www.invisionapp.com/craftBaseAlign（Sketch）Sketch自带的对齐工具对形状来说很好用，但对于文字来讲一般是文字的文本框对齐，并不是文字本身对齐。BaseAlign插件使用的是文字自身的基线对齐，这样就以保证不同大小的文字都可以对齐，设计效果更完美。https://oursketch.com/plugin/basealign协作工具篇XSHOWXSHOW是一款由ISUX研发的高效设计协作平台。XSHOW连接了产品经理、开发等各个不同工种，提高了设计资源输出和分发效率。设计师将设计文件上传到XSHOW，就可以将文件链接分享给产品经理、开发等同学。产品经理在手机小程序上就可以预览方案，设计师每次更新的方案也可以直接预览。开发同学可以直接查看标注和切片。同组设计师也可以直接下载源文件、甚至查看历史迭代版本。网址：https://xshow.tencent.comXSHOW是如何实现高效协作的？对于设计师：可视化上传文件。设计师先在Sketch中安装XSHOW插件，可使用快捷键或直接点选需要上传的文件画板，接着直接选择XSHOW中的“导出”，就可直观快速的将文件上传到XSHOW。视频链接：https://v.qq.com/x/page/z3135fvf22r.html记录所有版本迭代，轻松找回第一稿。设计师每一次上传的文件都会有云端记录，设计师可以通过时间轴便捷找回历史文件，轻松找回第一稿。视频链接：https://v.qq.com/x/page/j3135ivya38.html灵活丰富的分享权限。对于项目分享的权限，XSHOW的设置更为灵活，除了支持私密、公开、指定人或团队可见外，也可以控制权限的时效。视频链接：https://v.qq.com/x/page/h3135c9jrey.html对于项目管理者直观了解团队输出,组建团队展示能力空间。XSHOW除了个人使用外还可以组建团队。项目管理者可以通过XSHOW直观查看整个团队的设计稿件输出修改情况，同时可以组件团队展示能力空间。视频链接：https://v.qq.com/x/page/c3202lstyp3.html方案变更及时知道。XSHOW有记录所有版本迭代的能力，因此作为项目管理者可以及时知道团队成员对方案的修改变更，解决了团队内部有时同步不及时的问题。便捷组建项目和管理团队成员。项目管理者可以在XSHOW便捷组建项目和管理团队成员，大大提高了项目管理者的管理效率。对于合作产品经理或甲方多端查看更方便。XSHOW支持web和小程序两种沉浸式查看方案的方式。在小程序上查看方案方便合作方直观感受方案在手机上的真实效果，如果合作方身边没有电脑也可以及时查看稿件。视频链接：https://v.qq.com/x/page/a3135laeftc.html查看历史变更XSHOW的历史变更功能可以使合作方也及时了解方案的变更情况，大大提升了信息同步效率。对于开发工程师便捷查看标注与管理切片。设计师将文件上传到XSHOW后，只要将链接分享给开发，开发就可以直接在线查看文件标注、下载切片。视频链接：https://v.qq.com/x/page/m3135rq8fvp.html小结XSHOW作为一款高效协作工具可以大大节省设计师稿件输出成本，提升工作效率。希望大家多多体验，体验地址：https://xshow.tencent.com结语在未来界面设计工具会继续向云端性、协作性、通用性发展。大家可以根据自身情况尝试使用Figma、Framer Web等新兴工具来提高设计与协作效率，形成良性的协作体系，使自己更专注于设计本身，创造更大的设计价值。欢迎关注作者微信公众号：「腾讯ISUX」作者： 腾讯ISUX
保姆级教程！最容易上手的 Figma 操作指南！
如果你是从零开始了解Figma，或是从平面切换到UI，或者（像我一样）从Sketch切换，那不妨一起来学习！在过去的几年中，我是发自内心的喜爱Sketch，是它的忠实粉丝。但后来发现，其团队协作和交付方面，比如在Dropbox，Abstract，Craft，Zeplin和InVision之间切换使用，就变得非常麻烦。无论我使用哪种组合，效果都不怎么好，还会有额外费用产生，而且原型制作也不是很流畅。但Figma的出现，使多软件协作的混乱局面不再出现。优点：它是免费的（每个帐户最多建立2个用户和3个项目）；在Mac和PC上运行（Sketch只能应用在Mac端）；实时团队协作；可以导入Sketch文件（Sketch并不支持）；适用于Mac和PC的集成开发人员交接/说明；出色的团队库/设计系统；高质量原型制作缺点：云端线上协作， 不过可以保存文件至本地进行处理，方便以后再次添加。入门1. 安装Figma进入Figma.com官网，按照说明进行注册，注册成功即可使用啦！△ 登录并开始应用进入应用界面，Figma会引导你创建团队与项目。现在，只需在任意位置（点击菜单或CMD + N）创建一个新文件即可快速使用。△ 主界面与Sketch不同，Figma的文件不是存储在本地计算机上，而是在云端，你可以随时随地通过浏览器访问所有工作。2. 导入Sketch文件Figma可快速准确地导入Sketch文件，只需将Sketch文件拖拽到Figma画布，就可以继续操作使用。△ 将Sketch文件拖放到屏幕上缺点：无法将单个项目从Sketch复制和粘贴到Figma（若拖拽，会转换为图像），若将单个项目存成SVG，就能从Sketch复制单个项目！提示：建议先下载Figma App再从Sketch导入，因为在浏览器中无法呈现本地字体，还会弄乱文件。用Figma设计1. 建立新画板与Sketch中操作一样，按A或F在右侧的属性面板中查看所有画板选项，选择要使用的尺寸或先随意建立一个。以1倍视角（实际像素大小）工作，因为在Figma内调整大小并不会损失图片质量，导出时选取合适的尺寸即可。△ 按“ F”设置新框架与传统的画板不同，可将画板彼此嵌套，便于以后创建相更复杂的交互设计。2. 栅格和布局移动端，可使用标准的8点栅格；Web端，建立布局栅格很重要，所以在设计前，先建立12栏引导栅格。以我个人的喜好，自定义CSS栅格会更快速便捷，最好事先与开发人员商定好。在右侧的栅格属性菜单中调整列与行，以及是否固定，并根据需要设置边距。△ 创建栅格、列和行Figma中关栅格和列的妙处在于，可以设置多个网格并将其存储为样式。这是一个非常方便的功能，不仅使布局适应各种设备，还能与团队成员共享或在其他项目中简单地重复使用。提示：使用Ctrl + G切换可见性。3. 图层和组与Sketch一样，在屏幕的左侧找到图层面板。△ 左侧的图层面板图层→添加的每个新元素都会自动创建一个图层。您可以通过拖放来重新排列图层；分组图层→确保将图层分组（选择图层，然后按cmd + G）以使文件井井有条。它还可以帮助您跨帧快速移动和复制。在croup中选择元素，请按cmd，然后单击该项目；页面→设置设计的不同部分或区域，我通常会建立单独的页面，用于头脑风暴，线框图和最终版本的交互；资源→组件保存在此处，库按钮也位于此；嵌套框架→在Figma可以嵌套框架，进行结构设计和原型制作时会非常方便。4. 矢量形状Figma使用一种称为Vector Networks的方法，用来创建复杂的形状。△ 用Figma创建形状在顶部菜单中选择，或按R（矩形），L（直线）或O（椭圆）绘制形状。按住Shift键以保持比例不变，每个形状都会自动创建自己的图层。要制作更复杂的形状，请点击P，或从顶部菜单中选择钢笔。完成后按Enter自动闭合路径，可以在设计过程中随时通过右侧的属性菜单更改属性并操纵矢量形状。注意：矢量图形可缩放并以任何大小导出，但文件会很小。它们是简单形状，按钮，图标，徽标和各种简单插图的理想选择。5. 图片在Figma中，图像始终放置在形状蒙版内部。更改图像的形状，打开图像属性，点击右侧属性窗口上的“填充”。△ Figma中的图像下拉菜单中的选项：填充→进行图像填充；适合→当我们调整大小时，图像将不会被裁剪或隐藏；裁剪→将图像裁剪为所需的尺寸和选择。请注意，这里不会像在Photoshop中那样丢失，而只是遮盖图像；平铺→根据需要重复原始图像，可调整平铺的大小。Figma允许调整颜色和饱和度等属性，多次调整也不会改变原始图像属性。注意：用图像填充现有形状时，单击形状，转到填充，然后从下拉列表中选择图像，否则将设置颜色。注意图片版权，推荐Unsplash，图片质量非常高，还有Figma插件。6. 版式Figma预装了Google字体，如果更喜欢使用本地字体，则需要安装Font Helper或Figma桌面应用程序，并确保其他所有访问该文件的人都安装了相同的字体。按T建立文本窗口（或单击并开始键入），在右侧的属性菜单上设置文本属性。△ Figma中的文字提示：确保文本不小于16px，最好设置为18px，甚至加宽行高提升可读性。样式样式可以保存和重新应用的属性。这样，大文件可以立即更新，也能为颜色，文本，网格和效果（例如阴影）创建样式。要查看所有使用的样式，请单击欢画板旁边的灰色背景，它们将显示在右侧的属性菜单中。1. 创建颜色样式Figma中的颜色和渐变样式很棒，设置一种样式就可以在文本，填充和轮廓上重新使用。你可以在设计过程中随时右键单击样式来更改和删除。创建和使用颜色样式：创建形状：将填充更改为所需的颜色值；单击包含颜色样式的正方形符号；单击“ +”添加。️️提示：命名颜色时，最好定义其具体用途，而不是颜色本身。例如，命名“突出显示颜色”而不是“橙色”。2. 创建文字样式与Sketch不同，Figma中的文本样式仅存储字体系列、大小、行高和间距。这样就可以使样式库保持美观和简短。设置文本样式与颜色样式几乎相同：单击您想要制作样式的文字：在右侧的属性菜单上，单击样式正方形图标；单击+并为样式命名；将样式添加到现有文本中，只需单击文本，然后通过样式方框从右侧菜单中选择所需的样式；添加样式后，还可以通过同一菜单更改属性或分离样式。提示：命名文本样式时，最好在使用后调用，例如“ H1”或“ paragraph”“ quote”，而不是有关字体或大小的特定描述。3. 更多款式Figma并不止于此，网格也可以保存、共享和重新用作样式。此外，还有效果样式，例如阴影、内部阴影、图层模糊和背景模糊。组件组件是UI元素，可以在设计文件中重复使用。组件使设计保持一致性，还能更新和缩放，节省了很多工作！1. 创建可再用组件选择对象，然后按屏幕顶部或cmd + alt + K创建组件按钮。在“图层”面板中，紫色的组件图标代表创建了一个主组件。△ 主组件和实例复制此主组件创建一个相同的副本，称为原样复制。主组件中的任何更改都将导致对所有实例进行相同的更改。在左侧图层旁边的资产选项卡中找到所有组件，将它们拖动到框架上。提示：从长远来看，应将Figma组件与前端组件（例如ReactJS中的组件）对齐，最好与技术团队协调一致。2. 交换和嵌套组件可以嵌套在主组件内部，这意味着可以在组件内部，拥有多套组件。使用右侧实例交换菜单来交换嵌套组件，或按住cmd + alt + option将其从团队素材库中拖放。3. 覆盖实例在大小和总体布局上始终遵循主组件，但是您可以更改实例的属性，例如 colour，text和outlines。若将其重置为原始状态，请注意右侧属性菜单中的还原按钮。可通过右键单击来分离。4. 命名组件同Sketch中一样，使用“/”命名组件，例如，将“ share-icon”更改为icon / share。Figma将自动创建一个名为icon的父类别。△ 确保正确命名您的组件顺便说一句，如果您在多个页面上都有主组件，它们将按页面进行组织。提示：要想组件井井有条，请为每个组新建一个框架，例如“按钮”或“表单”。自动版面自动布局允许创建动态框架，这些框架会随着更改内容而增大或缩小。这是一项巨大的改进，因为它节省了大量的调整时间，还可以一键式检查设计是否正确。1. 将图层改为自动版面输入内容；shift + A将使用垂直和水平填充在文本层周围自动创建一个新的自动布局框架。您可以在右侧的自动布局属性菜单中调整这些值；更改内容会看到按钮自动调整大小。2. 嵌套自动布局嵌套自动布局框架，将水平和垂直布局属性组合在一起，以实现引人注目的界面设计。选择对象，单击shift + A，自动布局框架现在是父框架内的子框架。在右侧的属性菜单上选择垂直或水平分布，防止文本框架沿一个方向生长，请确保选择固定为或高度。提示：仅移动图层即可在父帧中交换子帧的位置；注意：任何自动版面都可以另存为组件。Figma中的原型Figma为您的网络和应用程序设计提供了出色的原型制作。您将不需要其他任何工具。1. 建立原型选择一个框架，然后在右侧的属性菜单上单击“原型”。单击“原型设置”，然后选择要设计的设备。点击右上角的播放按钮查看设计，也能下载Figma Mirror在设备上进行实时预览。△ 原型菜单2. 连接画面确保在右侧的“原型”菜单中，选中元素时周围会出现蓝色小圆圈。单击并按住该圆圈拖动，会出现连接示意的图标。在右侧的属性面板中，选择动作（滑动、单击、鼠标悬停等）和动画类型（移入、推入、滑出等）。3. 滚动形式除了垂直滚动之外，Figma还提供了其他非常逼真的页面滚动形式。水平滚动→选择所有元素并将其分组。绘制一个所需大小的框架，将其移动或复制到内部，从而使滑动隐藏起来，在下拉菜单中，选择水平滚动。像Google地图一样平移→画一个框并添加图像。在滚动形式中，选择水平和垂直滚动。固定元素→要使标题或按钮具有粘性，请确保已选择“固定位置”（在右侧属性菜单的“设计”>“约束”中）4. 智能动画智能动画会寻找匹配的图层，以识别差异并为原型中的帧之间的图层设置动画，可以创建功能强大的原型。与他人共享和合作1. 演示模式按下菜单右上角的播放图标，会在新标签页上演示移动端设计原型，你可以对其发表评论、共享演示链接。△ 演示模式2. 创建团队和项目Figma上的团队可以与他人合作，你可以邀请成员，添加项目并存储至库。要创建团队，只需点击Figma概述上的“创建团队”按钮，然后按照说明进行操作即可。付费可试用更多强大的功能。△ Figma中的团队，项目和文件团队→一组人员，例如设计师，开发人员，撰稿人等；项目→将相关文件放在一起；文件→单个设计文件。注意：您可以随时在项目和团队之间移动文件。3. 共享库团队工作时，要确保所有组件实时更新，且存储位置是所有团队成员都可以访问的，Figma共享库就能很好地处理这种情况。注意：设计系统是当今UX/UI的重要组成部分，值得花一些时间来熟悉概念和不同的方法。创建共享库：在左边的菜单中，进入Assets并单击book图标；点击发布；命名发布，同时保存一份副本；在团队中打开一个新文件；进入Assets选项卡，单击库图标并激活刚创建的共享库。更新共享库：当改变设计内容或风格时，Figma会提示你更新团队库。更新后，所有其他团队成员都会收到用更新通知，他们可以同步查看。注意：共享库非常强大，可以成为设计过程的强大支撑。在工作中使用共享库，会有很多资源供你参考实践。4. 与其他设计师和开发人员共享顶部菜单中的蓝色按钮可以发送共享邀请，或者直接输入电子邮件地址或复制链接。发送给设计者和文字撰稿者→设置为可编辑模式，被共享者可访问所有功能。您将看到其他用户，在同一文件中实时协同工作！△ 编辑模式开发人员→设置为开发模式，向技术人员显示所有规格（切换CSS，iOS和Android代码）。他们还可以访问和下载原型。△ 查看模式注意：如果在仍在处理文件的同时与开发人员共享，最好设置一个新页面，以避免混淆。5. 资源导出如上所述，在Figma中，即使仅授予“查看”权限，也可以直接从共享文件中以任何大小导出所有资产，因此，作为设计者，您无需自己导出任何内容。但是，如果您希望在任何情况下都是这样的：△ 在Figma导出资源选择对象；单击右侧属性菜单上的导出。注意：请记住使用“ /”命名，例如image / home / imagename，icon / iconname，它们会自动将导出内容分类到文件中。备忘单，什么时候导出什么：SVG→用于矢量文件，例如徽标和图标。SVG可扩展到任何大小而不会降低质量；Jpg→用于各种不透明的矩形图像和照片，确保提供实际大小（1x）和视网膜分辨率（2x）；Png→如果图像或照片需要透明背景时导出，还需要1x和至少2x导出；1x/2x→ 1x是实际大小，是2x大小的两倍，视网膜显示器上的清晰图像需要2倍。请注意，2x，3x等带有@2x，@3x后缀，技术在编码时会应用；wh→设置图片宽、高，例如300w=宽度为300px的图像；Pdf→如果要导出整个页面，例如用于邮寄或添加到演示文稿中的高质量图像，则使用Pdf。欢迎关注作者微信公众号：「UX辞典」原作者：优设@ 辞典酱
新晋黑马神器！Figma完全入门指南（附超多插件+教程）
这是一篇关于Figma全面介绍的文章，非常适合刚刚入门，目录总览前言我为什么要说Figma，最直观的感受就是，这个工具真的非常好用，使用起来非常流畅。可以提高设计效率，用起来很爽，然后想分享给大家最重要的是，Figma已经成为主流原型设计工具，为什么这么说？我们来看一份来自UXTOOLS调查2019年的设计工具使用报告（2020年Figma的用户应该会更多），报告详情请查看：https://uxtools.co/survey-20191. 报告总结几点自2018年以来，Sketch使用率从42％的受访者下降到31％，而Figma从12％增长到26％ Mac中用的最多的设计工具是Sketch，Win系统用的最多的是Figma（当然Win也不能用Sketch）很多人肯定早就听过Figma的名字了，看到很多设计同行在推荐，自己也使用了很长一段时间，也疯狂的安利身边的朋友使用，它到底有什么让那么多设计师弃Sketch从Figma的魅力？下面的内容将会为大家详细分享FIgma相关的一些知识点，向大家介绍这款时常听到，但是还不太熟悉的工具。Figma是什么是一款全平台可使用的使用软件，和Sketch功能差不多；但是他可以在Mac，Windows PC，Linux计算机甚至Chromebook，目前iPad也可以使用。不再受系统的限制，只要你可以打开网页，理论上基本可以使用这款工具它不需要使用苹果笔记本电脑也能使用它储存文件不需要占用本地内存它可以将你的设计以一个链接的形式分享给所有人……Figma 有哪些功能亮点1. 全平台使用这个是Figma最大的特点，回想我买苹果笔记本的原因就是Sketch不可以在Win上使用，“斥巨资”吃了24个月泡面才用上Sketch。现在终于有一款没有设备限制的，且和Sketch工具差不多功能的软件了，喜极而泣2. 云端文件在Figma创建的文件全部都是保存在你的账号上的，不用占用本地内存。依旧回想起我“斥巨资”的苹果笔记本可怜的256G内存，Sketch文件的越来越多，我需要存在网盘或者存在硬盘，且管理起来太难了。最重要的是，有时候应该Sketch升级，打开低版本的文件，设计稿全费了……猛男落泪3. 历史版本Figma自动保存功能不细讲了，这是设计工具必备功能，历史版本（免费版最多保存 30 天。专业或团队版无限制）是基于自动保存来实现的，举例一个场景：你老板说，她想要你半个月前的第一稿的设计，这个时候你就可以打开Figma，点击一下，恢复源文件，完事~4. 共享协作Figma可以将任何文件，页面或面板（在其他设计工具中称为画板）的基于不同权限（查看，编辑权限）进行共享。文件就是一个几十个字符的链接，非常轻便。试想团队成员想看下/修改下你的作品，你直接甩一个连接过去就可以了。之前大文件传输，真要了命，更新一次我要传一次文件，累瘫了~5. 实时协作这个就很有趣了，基于前面的分享功能。当别人拿到这个链接时候就可以进到你这个设计界面，这个功能它可以做什么呢？可以多人在一个页面共同完成一个项目。可以时时刻刻看你有没有在做设计（老师催学生作业很有用）可以评论你的设计可以实时查看你的设计进度6. 团队沟通团队沟通其实也算是属于实时协作的一种，项目组成员，不单单是我们设计师内部，它可以给到产品、开发、测试相关的同事，可以实时在一个设计文档中沟通，讨论方案，那也就可以引申出线上实时设计评审，在疫情期间，这个作为设计评审工具太棒了7. 组件和共享样式你可以使用这个功能，它们来系统性地复用一些界面模块和样式属性。创建一个组件后，它就是一个主组件，之后从它复制出去的组件都是它的组件实例，修改 主组件会同步到它所有的实例。所以，当你需要更新一些东西时，比如说基本链接颜色和某个图标，只需要调整主组件或来源样式即可Figma和sketch对比有什么优势彼得.木曾经说过，接受一个新的事物，那就从旧的事物比较开始，我们就来对比下我们最熟悉的Sketch比较有什么异同之处，主要从以下几个维度来进行比较1. 打开方式Figma支持在 Figma 中打开 sketch 文件（直接拖拽丢到Figma工具即可），但Sketch不能打开Figma的，如果需要Figma打开Sketch文件，需要借助第三方工具xd2sketch，需要收费。2. 协作方式Figma的协作方式非常简单，直接分享链接，给到对应权限即可开始协作。可以进行同时的编辑文件，评论等等要达到协作方式，Sketch则我们国内设计最原始方式就是直接发送源文件给对方，然后进行协作。还有一种方式就是使用Abstract（可以进行文件协作，同时还有版本控制器功能），这种协作方式流程太长，使用起来比较复杂，足于劝退大部分设计师（我有体验过，也被劝退了）3. 设计稿交付国内我们Sketch一般是使用蓝湖插件，将设计稿导出之后，上传到蓝湖，开发只要打开蓝湖对应的地址即可获得标注、切图。目前蓝湖也进行了收费，企业级年费按照协作人数算（60人团队，一年费用大概是1W元左右）国内Figma目前交付给到开发还是是利用插件（推荐这个插件，Juuust Handoff 后面插件篇会详细介绍），可以直接进行交付，也非常方便。4. 离线办公两种工具都可以离线工作，但 Figma 不能加载组件，离线的时候会自动将文件保存在本地中，联网的时候在上传到云端。但 Sketch本身是离线工具，所以不会有什么影响5. 插件系统Sketch插件数量非常多，不太好的一点就是，很容易出现插件和工具不兼容的问题，Sketch更新有时会更换代码逻辑，很容易导致插件在新版本不可用，这是开发和我们使用最大的懊恼，有时候好不容易找到这个插件可以解决我们的痛点，下载安装发现不可以用，我~太难了。Figma的插件目前是放在社区中，数量逐渐增多，兼容性比较好，同样在没有网络的情况下，使用起来会比较慢。6. 组件功能Sketch的组件功能限制比较多，修改起来相对比较繁琐，需要进行多层级的修改，但是，在Figma没出现之前，我觉得它是一个非常棒的功能Figma的组件功能更加灵活，自由。篇幅限制，后续文章会专门说下Figma的组件功能，总之，好用7. 自适应布局Sketch的功能叫Smart Layout，Sketch想要创建自适应布局，必须需要先创建一个组件Figma的功能叫Auto Layout，普通图层建立组别之后既可以创建自适应布局。模块之间的间距调节更加智能方便这里只做功能对比，暂不做功能演示，具体操作方式，后续会说到，相比较之下，Figma的自适应布局更加灵活（智能），使用起来更加高效，之前Sketch我要实现类似Figma自适应布局的功能，一般是借助插件Anima来实现。最后再来一张图标对比，建议直接收藏保存写到这里Figma的基础部分就算是简单介绍完了插件推荐-建议收藏作为一个对一个新工具不太熟悉的小白，学习一款新的工具，一般有两个步骤，第一就是找各种教程，另一个就是，搜罗一堆插件，边找，边哇哇哇哇，这个可以，收藏起来先。反正就是先收藏起来，下次肯定有用，这是我们学习新东西的常态，无可避免，我也是这么走过来的。我看了200款插件，挑选了这十几款插件分享给你（互联网标题模式），基本能解决大家工作中大部分场景。插件快捷搜索，快捷键 ⌘ / 呼出搜索，输入插件名点击使用即可1. 画板整理/重命名工具-Super Tidy简直就是强迫症的福音，一键整理画板，还支持调节间和。可以根据其画布位置轻松对齐，重命名和重新排列框架2. Insert Big Image_插入大图Figma对导入的图片大小是有限制的，你想要输出比较高清的图片，或者导入更加高清的图片，这个插件可以帮助你解决问题，毕竟设计师的图片质量精度是非常重要的插入并保留大图像的原始分辨率。插入大图像打开一个对话框，通过该对话框可以选择一个或多个图像文件。智能地拆分每个图像文件并将其作为一组较小的图像插入。（这是为了解决Figma中的一个限制，在该限制中，尺寸大于4096像素的图像按比例缩小）3. Easometric-2.5D 插画创作对于2.5D插画的创作，轴测图的制作，非常高些便捷4. Unsplash这个不用多介绍了，图片免版权图片填充插件，免版权商用插件必备5. 设计交付插件 Juuust Handoff （类似蓝湖）生成的是离线文件，开发觉得 Figma 打开很慢可以尝试用这个插件（具体使用查看：https://www.figmacn.com/handoff-landing 这个网址有详细的教程6. LottieFiles（动画库）动画库，使用这个插件你可以将成千上万的免费 Lottie 动画作为 GIF 或者 SVG 插入到你的设计当中，可以说非常非常给力了7. Vectary 3DVectary 3D 可以将 3D 元素插入 Figma 中，更有趣的在于你能将的设计稿置入预设的可交互的 3D mockup 后导出图片到 Figma 中，从此包装设计稿不用愁找不到适合的 mockup 了，自己动手丰衣足食。另外 Vectary 3D 这款插件背后的产品，是一款与其同名的基于浏览器的在线 3D 设计工具，也非常轻便容易上手。8. Autoflow（连线）Autoflow 可以让设计师直接选中两个元素后自动画上流程线，省去了画流程图过程中标注箭头的繁琐工作9. Time Machine（版本收集）担心某个版本的文档没有保存？这个插件能够全自动地帮你复制你想要保存的这个版本，备份到另外一个名为「Time Machine」的文档当中，并且会基于所属的框架和时间来进行命名，你完全不用操心。10. Chinese User Data Generator中文用户数据生成器，随机生成以下用户数据。姓名、年龄、性别、手机号码、E-mail、职业、地址、省份、城市、身份证、占位文。11. Chinese Font Picker你可以在 Figma 里使用中文字体选择器（Chinese Font Picker）选择和预览系统中已安装的中文字体12. Detach Master（组件分离）Figma创建组件之后不可逆的，所以这款插件可以帮助你快速使得组件分离13. Fonts Changer（批量换字体）14. Table Paste（表格文字替换到设计中）这个非常实做表格相关的使用，非常高效方便15. Camera Color Copy Paste （实时拍摄取色插件）很好玩的一个插件，这个插件可以帮你直接用手机相机拍摄取色，并将现实中的颜色复制到 Figma 中大概先分享这些，欢迎大家评论区分享推荐好用的插件，后续再出一个插件合集。从sketch迁移到figma步骤文章看到这里，可能也许大概应该，有些同学想要从Sketch换到Figma上了，那在切换过程中有一些需要注意的还是和大家分享下，避一下坑。1. 导入对于轻量的文件，设计样式也比较简单的，直接导入即可，导入完成之后，再归类整理好即可2. 整理样式导入完成之后需要重新创建样式，因为Sketch拖进来的文件，是不会自动生成组件的，需要自己重新再次创建，命名时整理样式快捷键（/）就可以进行快速的分组。3. 阴影当有阴影效果时候，如果是打了组的，则在Figma不会显示出来，需要手动解开组才可以4. 文字层这点需要注意的是，Figma需要下载并安装 Font Helper才可以链接到本地的字体，没有的话就会字体丢失，显示A？黄色的样式。建议提前安装好。5. 小结阴影是我比较经常遇到的，之前以为是不兼容，原来是打组的原因，把组解开就可以了，文字的话，有时候本地是有的，但是Figma还是没办法识别，这个就很坑，换字体的话有可能会导致行间距不一致，都需要调整，这个目前我还没有找到比较好的方法，有解决的同学，可以评论多多交流。如何推动Figma在团队中使用相信有很多人很懊恼这个问题，你觉得这个东西很棒，也能提升比较高的设计效率，但是就是推动不了在团队内部落地，然后你工作中依旧还是使用你不太喜欢的设计工具推进现状举例Q：你有和领导提了一下，说Figma很好用，可以云端的，不用Mac可以用的A：领导说；“我们现在的这个工具不是挺好的吗，先用着吧”Q：好吧，那也可以Q：你有和老板提了一下，说Figma很好用，可以云端的，不用Mac也可以用的A：领导说；要钱吗？Q：要的，每人$144/年，折合人民币：968.1552/人，设计部4人，费用是：3872.62元/每年A：还有花钱呀，那算了，你们先用着目前的工具Q：好吧，我们先用着当然还有一方面公司觉得云端数据不安全还考虑到需要联网才可以设计还需要科学才能更快的访问设计文件等等使用软件还需要花钱它又是一个新的设计工具，团队学习起来还需要花时间，这要换过去值得吗？……以上都是不能推进的理由，也真实存在但我想说的是，想要做一件事情只有一个理由，不想做一件事情有千万种理由，只要你想，一定能成推进事情步骤我们先按照人物角色来说有绝对话语权这类通常是老板、领导，他们推进一个事情，想比我们来说简单很多，估计也就是一个通知的事情没有绝对话语权没办法一下子就能决定的，需要请示，需要申请的，通常是我们设计师本身想要推进这个事情，那推进这个事情到团队中使用则需要一些技巧。往往在团队中推进一个事情没那么简单，会遇到很多的阻力，这个时候则需要比较强的推动能力。我们向上级申请一个事情在团队中推行，一般的步骤就是找到直接决策人，以文档形式提交。告知行动利益点具体方式为，分析目前我们是怎么样的，对比竞品有什么这样做的优势什么，我们采用它那种方案会带来什么样结果，总结就是：分析-对比-假设-试行-验证。在这里感谢豆果美食的设计负责人呆胶布分享的推动思路。具体方式，直接使用一个模板给到大家，建议直接收藏保存希望你成功，不成功我们可以再一起交流下。成功也可以在评论分享下。Figma常用快捷键学习网站推荐教程插件推荐网站：https://www.figmacn.com/插件个Figma源文件推荐（种类非常丰富：https://ui.figma.cool/Figma 秘笈：https://ifigma.design/B站UP主：像素范：https://space.bilibili.com/15741969/channel/detail?cid=15693B站UP主：草帽sMao：https://space.bilibili.com/108104104?spm_id_from=333.788.b_765f7570696e666f.2官网教程（需要科学）https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA/featured官方社区：https://spectrum.chat/figma?tab=posts答疑解惑Q：Figma对个人收费吗？A：个人版免费Q：Figma好上手吗？A：很好上手，基本和SketchQ：Figma界面有中文的吗？A：安卓汉化插件即可，（https://figma.cool/ ）网页端和客户端都有Q：Figma对网络要求高吗A：不算太高，需要科学（买一个稳定的科学即可）Q：Figma如何和开发交付对接（标注、切图）A：可以直接交付，但是网络原因，建议使用插件 Juuust Handoff 可以实现离线交付Q：Figma 断网了怎么办？设计的内容会不见吗？A：只要打开了设计稿，断网的时候仍然可以做设计的，Figma会自动给你保存在本地，等有网的时再同步到云端Q：Figma 如何下载插件A：打开Figma，双击“社区”，插件名字复制到搜索，跳转到插件页面，点击安装即可更多疑惑，欢迎大家评论留言交流。参考文献https://blog.prototypr.io/from-sketch-to-figma-daeb05eb7a44https://www.figma.com/file/x4kpcFDNDpPdwMVhVMi3a7/%E4%B8%BA%E5%95%A5%E9%80%89Figma-(Copy)https://uxdesign.cc/should-i-switch-figma-sketch-79c9828684a欢迎关注作者微信公众号：「木七设计坊」作者： 木七木七
全面解读2020最值得上手的界面设计工具：Figma
前言工欲善其事必先利其器，器即工具。选择一种工具的本质是选择一种方式。个人的选择或许是基于喜好习惯，行业的选择则伴随行业工作模式的变化。作为互联网行业的设计师，我们应当时时跟进技术的发展，解锁新模式和新工具。设计工具的战场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是什么Figma是基于浏览器的界面设计协作工具。它的最大特点就是基于浏览器和设计协作。基于浏览器Figma以浏览器为载体，依靠网络，全程在线操作，所有文件保存在云端。简单理解，Figma是打开一个网页使用，Sketch等是打开本地软件使用。云端的最大优势就是不受物理设备限制，多平台共享，使用灵活。Figma全平台可用，操作系统支持 Win，Mac，Linux等，设备支持电脑，平板，手机。在线意味着不需要下载安装包到本地，软件插件都会自动更新，不再漫长地等待下载和频繁安装更新。设计协作Figma是第一个真正意义上的设计协作工具。协作，是Figma对界面设计师这个角色的重新定位。如Sketch专注于设计师个人完成设计工作，就像一个单一的点，如需和外界产生关联，需要借助第三方工具。而Figma是从团体的角度去定位设计，界面设计不仅仅是设计师个人的事情。团队内，设计师需要更高效地衔接设计流程的上下环节，设计师和设计师之间可以更轻松地协作沟通，共同完成设计工作。团队外，设计行业应有分享精神，站在行业巨人的肩膀上再创新，推动设计行业更加高效。流程衔接——跨界工具集成传统流程中，设计师在不同环节，需要使用不同工具进行设计工作。流转在不同工具的过程，会造成时间成本的消耗，产生流转中的错误。使用Figma就能免去切换工具的烦恼，因为它本身就全面覆盖了产品设计中所有重要的步骤，让工作流程更高效完整统一。令人赞叹的地方是，这样的工具集成体，界面却比Sketch更简洁易上手。内部沟通——多人在线同时编辑支持多人在线同时编辑，意味着团队可并行工作，同时修改一个文件。项目是一个整体，而不再是被分割的多个文件。文件是一个链接，而不再是需要传送的源文件。如此，极大地降低团队的沟通、修改、维护成本。资源共享——开源社区互联网行业追求高效，俗话说“众人拾柴火焰高”，集合众人的力量方能让价值最大化，资源必不可少。如Github是全球最大的社交编程及代码托管网站，其社交化编码、开源共享的理念改变着整个开发社区的生态，让全球开发者共同创造了无数优质项目。在设计行业，Dribbble和Behance作为最知名的国际设计社区，是设计师们展示作品、合作招聘的最大平台，但一般只展示设计作品而不共享源文件。Figma的社区功能，和Github有异曲同工之妙。一方面设计师们可以一键取用世界顶尖公司及设计师精心制作的设计系统和模板，快速构建高质量的设计作品，节省重复基础性工作的时间精力，提高工作效率。另一方面，设计师可以轻松浏览行业一线设计作品，开拓设计视野，并进行互动沟通。工具的技术趋势选择新工具是一件慎重的事情，特别对团队来说，需要从整体的角度去评估成本、风险和回报。个人的选择或许是基于喜好习惯，而行业的选择则是伴随行业工作模式的变化。如前文所说，从 Sketch 迁移至 Figma 已然成为行业趋势。互联网行业正在发生怎样的变化，面对未来的技术趋势，我们正在关注什么。技术趋势数字化信息，泛指人类社会传播的一切内容。数字化是将信息转变为数字、数据，建立数字化模型，而后转变为一系列二进制代码，引入计算机内部进行处理的过程。当下信息爆炸的时代，更多信息以数字化形式存在，人与世界的互动将更多以网络为媒介。云计算“云”实质上是一个网络，一种计算资源共享池。云计算，把计算资源通过网络让资源被快速取用。未来的时代是云计算的时代，用户通过网络就可以获取无限资源，同时获取的资源不受时间和空间的限制。信息处理拥有更多时间自由性和空间灵活性，意味着我们获取和使用信息可以随时随地，想即所得。大数据数据是信息的基础，是智慧的前提，是所有新技术的依托。大数据是数据的集合，对海量数据进行专业化处理，形成价值，是行业竞争、产业实现盈利的关键。大数据和云计算是深度结合的，并和物联网、移动互联网等新兴计算形态密切相关。人工智能即AI，是以人类智能相似的方式做出反应的智能机器。人工智能使机器能像人一样思考，并能够胜任一些通常需要人类智能才能完成的复杂工作。未来机器人是否能超越人类，甚至接管世界，是个尚待讨论的话题。至少，我们的世界正在借助AI的力量更自动化，更高效化。5G第五代移动通信技术，是最新一代蜂窝移动通信技术。我们的网络信号，主要就来自于通信基站。随着网络基础设施日渐完善，世界的运作和发展将会更快。在未来，当5G全面覆盖，且所有的设施都实现了智能化后，我们将真正的进入到一个“万物互联”的时代。工具趋势新技术的浪潮下，工具行业的发展和趋势，整体来看，呈现云端化和一体化。云端化云端化是工作载体的变革，从本地到云端，信息以最快的方式触达和共享。用户无需在本地安装软件和插件，直接在浏览器上使用工具，摆脱了电脑硬件的束缚。云端拥有强大的计算能力，使用性能远超一般的本地软件。拷贝传送式的本地模式在文件的共享上，效率远不如链接式的云端模式。比较典型的例子就是各类在线文档编辑工具。一体化一体化是工作模式的颠覆，流程、工具、资源都应当打破壁垒，让协作更通畅。一体化可以理解为将不同的个体有机融合为一个整体，形成协同效力，实现团体的整体效率和利益最大化，这里的团体可以是项目团队，可以是公司，也可以是整个行业。用技术的方式扫除沟通协作的障碍，能大大提升团体的专业和效率。Figma的模式Figma的愿景是成为设计界的 Google Docs，打造类似 GitHub 的设计共享与协作的社区。这也是我认为Figma现阶段逆袭的原因所在,它敏锐的捕捉到了云端和协同的价值。在过去，设计师和产品、开发者都有明确的角色分配，但随着全栈设计和全链路设计的升温，设计师的角色定位有了更多可能性，可以更进一步融入产品的设计开发流程中。全栈全链路设计，二者本质上都需要设计师拥有更强的综合思维能力。Figma的跨界功能集成优势，很好的匹配了这种职业发展方向。Figma的利器大家最关注的，应该还是在具体功能使用上，Figma到底有何亮点。下面，详细聊聊那些本人目前觉得Figma比Sketch更优的功能。1. 全局组件设计组件化的概念是从程序的开发模式中演变而来，是将界面拆分成更小部件使之易于管理的方式。形象化去理解，界面设计就像搭积木，组件是积木，页面是模型，设计师使用组件（积木）搭建成页面（模型）。组件的内部逻辑，可以用父子关系来形容。原始被复制的组件是父件，复制出来的组件是子件。以父子关系比喻是因为，在组件逻辑中，父件有变化，子件们会继承，同步变化。这点上，Figma和Sketch是一致的。Figma组件逻辑比Sketch高明在，子件可以灵活处理继承和嵌套关系。子件可以各自调整如形状、颜色、尺寸等样式属性，当我们发现某个元素样式复用频率高，也能轻松转变成新的父件。如此，一个相同的组件可以应对不同场景变化成不同的样式，建构组件体系变得更灵活。Sketch的子件只能复刻父件，任何对组件的修改，都会以完全覆盖掉原始组件的模式完成。因此，当我们使用Sketch构建组件体系时，需要提前把所有可能的样式全部罗列出来。随着项目日渐复杂，组件复杂臃肿，后续的维护极其繁琐。使用Figma时，父件可以放置任何页面任何位置。比如把父件放在子件旁边，调整父件的细节时就可以同步看到子件在整个页面中的效果，很方便。而使用Sketch时，组件被固定放置在另外一个名为Symbols的页面，设计组件和浏览页面效果需要在不同页面切换查看。△ Figma演示△ Sketch演示跨流程工具高保真可交互原型设计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打破了原有工具的局限建立了自己独特的核心竞争力，并且未来可期。欢迎大家提出问题和阐述更多思考。更多关于Figma的思考：欢迎关注作者微信公众号：「美柚UED」作者： 美柚UED
从 Sketch 迁移到 Figma 半年后：以为是个青铜结果是个王者？！
阅文体验设计YUX – 梁捷 ：去年 10 月开始阅文海外设计从 Sketch 迁移到 Figma。如果你还不了解 Figma 或者在犹豫要不要切换到 Figma，这里会给你答案。Figma介绍：以为是个青铜结果是个王者Figma 是一款基于 Web 的在线设计工具，很多用户包括笔者在内对于在线工具都会下意识地感觉性能差，功能弱，尤其是对于一款专业的生产力工具，这种不靠谱的感觉更为强烈。然而实际体验下来会发现 Figma 不仅功能完善，与 Sketch 相比别无二致。而且操作体验上更是如丝般顺滑，虽然是网页应用，但 Figma 的编辑器是用 C++ 编写，通过 emscripten 将 C++ 编译为 JavaScript 的方式获得更高效的代码与内存控制，得以达到 60fps 的流畅度与 2x 于原生应用的性能。因此你完全可以放心大胆地去使用这款在线设计工具，体验一番 Figma 独特的魅力，从此告别被 Sketch 低下的性能支配的恐惧。Figma与Sketch既然是一款专业的设计工具，与 Sketch 同一赛道的竞争对手，那自然是避不开与 Sketch 的正面交锋。△ Sketch界面△ Figma界面Figma 与 Sketch 的布局与功能整体上非常相似，不过 Figma 异常简洁的导航栏可能会让人怀疑 Figma 的功能真的够完善么？坦率地说 Figma 确实有一些基础功能缺失，比如 Figma 的 Scale 只能手动拖拽目标缩放，不能像 Sketch 一样设定数值进行缩放。但是相比那些无关痛痒的低频功能，Figma 没有 Sketch 的插件功能以及丰富的插件生态也许更让人遗憾。今年6月12日，Figma 官方宣布开始插件功能内测，结合 Figma API 不知道会擦出什么样的火花，非常让人期待。1. 比Sketch弱？不存在的事实上以上功能缺失完全不会影响到日常的设计工作，反而 Figma 所拥有的以下功能让 Figma 在整体的体验上赶超 Sketch 数个身位：多人协作评论观察者模式版本控制标注（Developer Handoff）团队组件库与样式自动保存全平台制霸智能布局（Smart Selection）1～8 项功能均得益于 Figma 在线的特性，让更直接更高效的多人协作模式成为可能，多位设计师可以在一个设计文件内同时进行编辑操作，添加评论进行沟通。而且一个链接就可以让所有人在任何平台上直接访问到设计文件，发送给需求方 Figma 就是你们讨论交流的白板，发送给开发 Figma 就是在线的标注工具。而 Smart Selection 则是笔者最喜欢的功能之一。Smart Selection 主要是用来批量操作矩阵，帮助设计师一步到位调整布局，省去拖拽、调间距等繁琐的操作。△ 通过Smart Selection快速操作列表间距与排序｜图片来自Figma Twitter类似的功能最早出现在 Adobe XD 上，后来 Framer X 也增加了自己 Stack，实现了 CSS 的 Flex 布局一样的效果，Figma 也在去年 10 月左右跟进上线了 Smart Selection，并且经过三个月的迭代从原本只能单独控制行或者列，进化到可以控制矩阵。△ 通过Smart Select快速布局内容｜图片来自Figma Twitter2. 为创造高效生产环境而生的Figma毫不夸张的说设计师的日常工作只有 20% 的时间在发挥创意解决问题，80% 的时间都在重复一些机械操作改颜色、改间距、改排列、改命名等等，最后还要整理文件同步文件，这些都让整个设计工作冗余、低效还无趣。Sketch 每个版本更新后除了更卡、bug 频出、插件又没法用、旧版又没法打开新版文件之外，几乎看不到其主动为设计师创造更高效的生产环境而作出的努力。即便是最近上线的 55 增加的 Smart Distribute 与 Create new layers from SVG code，还是 56 将会上线的 Team Collaborate 提升生产力的功能都是非常被动的从 Figma 抄袭搬运，虽然这些功能在 Figma 上已经上线了半年甚至一年之久。相比不思进取的 Sketch，Sketch 的插件们为了提升设计效率倒是异常的用力，可惜的是优秀的插件却越来越少，从 Measure、Paddy 的退出可以瞥见 Sketch 的插件生态已经大不如前。对比 Sketch，在越发深入的使用 Figma 后，越会发现 Figma 是一款更为先进、更理解设计师工作方式和需求的界面设计工具，除了刚才列举的数个提升生产体验的功能，还包含着大量细节，如矢量网格、批量组件化，快速复用属性，链接 Google Fonts 等等，都在帮助设计师从低效的泥沼中解放出来。不仅如此，Figma 让设计师无需再考虑操作系统，也不需要管理插件、存储，也不需要管同步和协同的问题，设计师唯一要考虑的是设计本身，就像他们自己说的「让设计师专注于设计，其他的都见鬼去吧。」之前在推特上看到 Eddie 发的一条推「If design tools were cars…」△ Eddie Lobanovskiy @lobanovskiy：If design tools were cars… 图片来自Eddie‘s **Twitter应该说总结的非常准确，Sketch 像丰田的凯美瑞，有广大群众基础的老牌厂商的经典车型，而 Figma 则像 Tesla 一样性能卓越，超越时代充满未来感。那未来属于谁？反正不会是凯美瑞。封闭与开放Figma 被运用到海外项目 Webnovel 带来的最显而易见的变化是我们不再使用 Sketch、Mesaure、Dropbox、Svn，白板，因为 Figma 本身整合了以上所有功能，省去了在不同工具之间切换，为我们节约了不少时间与精力，而且这样的整合不只是 1 + 1 + 1 + 1 的功能叠加而已，其中有着奇妙的化学反应，从根本上改变我们的工作模式。1. 设计孤岛设计长久以来都像是一座封闭的孤岛，不仅与上下游的连接困难，甚至设计内部的连接效率都极低。关于前者，设计师交付给需求方的是一张导出的效果图，交付给开发的是标注与切图。设计文件因为专业设计工具的限制或者是共享的问题，项目的上下游基本无法直接访问，这导致了每次设计师的输出都需要经历好几个步骤，而设计又会因为各种问题频繁发生修改，输出设计资源传递给上下游的低效链接方式损耗了设计师大量时间。更深入的说设计过程对上下游的不透明也需要对低效负责。而关于后者，连接设计师进行协作更是噩梦，暂且不提设计文件在项目内的同步共享遇到的诸多问题，多位设计师在一个项目内协作只能单线程处理各自的需求，如果需要多位设计师同时合作完成一个需求，必然需要付出更高的沟通成本以对齐设计师之间的想法与设计效果。2. 协作的全新可能Figma 的到来则打破了设计孤岛的封闭格局，连接设计与上下游仅仅只需要一个链接，原本只能藏匿于设计师之间的 dropbox 共享文件夹的设计文件，现在项目中的所有成员都可以无障碍访问，无论是交互稿还是视觉稿、组件系统、设计规范。△ 分享Figma文件只需要复制链接即可，项目内的成员则可以直接查看对于设计师来说，透明开放的设计文化可以让项目成员更了解设计的工作与思考方式，减少与其他项目节点因信息不对等造成的不必要摩擦。对于项目来说，产品、开发以及合作的设计师都可以看到一个需求是如何演化为设计稿的过程，参与者可以更早的提出想法与设计师交流，在充分的沟通下完成的设计可以有效避免完成后的反复修改。刚才还提到了设计师之间的协作问题，现在我们每个版本的迭代都是由两到三位设计师在一个 Figma 文件内按需求分 Page 一起完成。不仅如此，Figma 的在线协作的特性还给了设计师之间的协作一个全新的可能，我们尝试了更紧密的协作设计模式，在一个子需求下再拆分子任务，比如上个版本中我们将段评需求分为页面框架与评论组件两个子任务，在同一个 Page 内一位设计师搭建页面框架，另一位设计师同步进行评论组件设计，多线程并行的模式让合作的设计师既能专注于各自的任务，又能轻松把控整体的设计效果，朝着一个目标快速前进。也许这就是传说中的「结对设计」吧。Figma组件化实践笔者所在的海外项目的产品 Webnovel 长久来没有统一的设计规范与组件系统，再经手多位设计师，经过多个版本的迭代之后，小到颜色、字体等基础属性，大到页面模块的新旧样式冗余混乱。所以趁海外项目迁移到 Figma 的契机，二月份开始着手 UI 组件库的设计与搭建。组件的设计基本遵循原子化设计理念，从最基础的颜色、字体、字号等 Principle 元素开始，将相关元素放到我们的组件库文件的「Token」页统一管理。△ Webnovel TokenFigma 的 Style 功能可以用来管理所有你需要在项目进行复用的样式，而且 Style 可以像 Component 一样在整个项目内共享。借助该功能将 Token 中的颜色属性、字体样式、阴影样式、分割线样式、栅格系统分别加入 Style，发布 Style 后项目中的所有文件都可以快速访问并使用这些共享的属性或样式。另外如果共享的 Style 发生更改，可以无缝更新到所有项目文件中。△ Style功能演示而 Figma 的 Component 功能与 Sketch 的 Symbol 类似，通过创建组件来复用界面中的模块与元素，不同的是 Master 组件复制生成的 Instance 可以修改除了位置和尺寸以外的所有属性，结合 Style 能快速实现样式替换。△ Component结合Style功能演示其实在 Figma 官方在二月底发了一篇关于组件化最佳实践的博文给了笔者非常大的启发，虽然当时组件库文件已经初具规模，但是还是毅然拆分并重新组织了组件库，因为笔者原本继续沿用了之前在 Sketch 上组件的设计与管理方式，完全没有发挥 Figma 本身的一些特性来提高组件建设效率。当时的重建组件库的改动主要包含两点：拆分组件库和重新组织组件。1. 拆分组件库将原本包含属性样式、图标、基础组件、业务组件等一个庞大的组件库文件按类拆分为几个独立的组件文件，一方面 Figma 通过 Team Library 共享组件非常便捷，即使拆分文件也不会带来任何额外的负担，反而更加方便后续的拓展，另一方面分类后的组件库各司其职更加清晰明了。△ 将组件和样式拆分到不同的文件中2. 重新组织组件Figma 可使用 Page 以及 Frame/Group 的方式将组件归类，意味着我们不再需要像 Sketch 那样使用「/」通过修改命名这种繁琐的方式组织组件（当然 Figma 也支持「/」分类，不过你不会去用它的）。△ 使用Page与Frame组织组件库因此我们可以将 Page 作为组件的大类，如 Buttons，以 Frame 来划分 Buttons 的类型，最后 Buttons 只需要以状态/子类型命名即可。优化后的组织形式方便任何人浏览，而且也更符合直觉，回忆一下 Ant Design、Material Design 等规范类的网站界面的布局，是不是非常接近？△ 左侧Figma上Webnovel组件库，右侧Material design网页除此之外，其实组件本身也做了部分优化，比如对组件与样式添加描述信息；通过实例化 Principle 元素引入更细的粒度让组件更加灵活；在使用约束的基础上加入栅格提升组件自适应效果，但还是处于探索阶段，这里笔者不再赘述，希望以后有机会再分享。组件库设计的核心诉求是方便你的用户（项目中的设计师、开发以及其他任何需要组件库的人员）快速查找、理解和使用。把它当作一款产品去对待，做好组件本身只是产品体验的一个环节，去思考更有效率的形式，尝试接入新技术，时刻倾听用户的反馈才能把这款产品打磨得更优秀。缺点以及Figma值得使用吗？作为一款在线的设计工具，Figma 的缺点也是非常显而易见，受限于网络环境，如果网络状态不佳访问设计文件都非常困难，此外对于国内多数团队来说，将文件完全存放在别人的服务器上几乎是无法接受的事实。那 Figma 值得使用吗？1. 对于设计师个人答案是非常值得体验一番，设计师应该是一群对新趋势新事物新技术保持好奇心的人类，一个工具往往诞生于用户需求与现实产品能力的鸿沟之间，如果它诞生之后还得到了发展、受到众人追捧那必然还顺应时代趋势，甚至影响趋势，如当年扁平化趋势下 Ps 与 Sketch 之争，假如没有扁平化大家还会选择 Sketch 吗？假如没有 Sketch 扁平化会这么快推翻拟物化吗？扁平化后迎来了动效的兴起，各种动效软件群魔乱舞也是同样的道理。体验一下 Figma 就可以发现当下我们的协作方式还会有新的可能，当然还有更多的有趣好玩的细节等你去发现。另外值得一提的是，Figma 个人使用完全免费。2. 对于设计团队对于绝大部分的大公司团队来说不值得，原因是推动设计工具更替困难重重，首先网络和存储就是硬伤，特别是存储问题在很多大公司完全无法跨越。其次设计资源、生产环境的迁移也是问题（Figma 支持导入 Sketch 文件），还有团队使用 Figma 至少 $144/人/年的支出，比 Sketch 贵了不少。Figma 相比 Sketch 虽然更优秀，但并不是革命性的产品。对于小型团队基本上是更友好的。最后如果想上手 Figma，可以先浏览他们在 Youtube 上的官方基础视频介绍，快速刷一遍就可以开始了。欢迎关注作者的微信公众号：「阅文体验设计YUX」作者： 阅文体验设计YUX
想取代 Sketch 的 Figma 好不好用？我花了一年时间给你答案！
第一次知道 Figma 是在 2016 年，但真正用起来还是在去年。那时苦于 Sketch 每次更新都会导致一些插件不能用，且界面不够精致，一直想要为它找一个替代品。直到后来尝试将自己的个人项目都导入到 Figma，这才开始在 Figma 中尝试设计。△ 我的设计文件￼因为 Figma 是基于 Web 的，也就是在线的网页，我总觉得使用起来会受限于性能，而不够流畅，这也是我前几年不敢去用的原因。但直到我真正使用起来，才发现操作非常流畅，而且文件都在云端，免费版保留最近一个月的历史记录，再也不用「最终版1」「最终版2」这种方式管理设计文件了。而随着使用加深，我发现 Figma 的交互也非常符合直觉，还有很多精心设计的小细节。借用一位朋友的话来说，「这是一群设计师为设计师打造的设计工具，让大家专注于设计本身，而不是在设计时还要克服工具自身影响效率的因素」。下面我结合我的使用经验说一说我是怎样用 Figma 做设计的，以及这一年以来我的一些使用心得。我的设计流程在此之前，先说一下我的背景。我平时会做很多业余项目，大多是网页和小程序，平时还会做一些公众号的封面和插图，基本都是在 Figma 中设计完成的。△ 平时处理的一些公众号封面等￼1. 初稿构思一般当我有了一个想法时，我会先在 Figma 中随意勾画出一个初稿。然后，我会在这个基础上不断修改，不断完善自己的想法。这其实相当于原型设计阶段，在这个过程中我不会在意样式是否美观，只会在意功能、结构是否合理。△ 某一个产品的初稿￼因为我的想法会不断变化，说不准什么时候有一个新的想法会加进去，所以在这个阶段它的变化会很大。因为 Figma 可以自动保存最近 30 天的历史（付费版可以保存所有历史），所以你不用担心自己突然想要回到之前的某个版本而没有保存。尽管大胆地构思设计，你可以随时恢复到之前的版本。△ 恢复至某一版本2. ￼设计调整接下来我就会开始调整样式，细化设计了。这个过程中我会用到两个比较重要的东西 —— 组件和栅格。组件可以用来设计重复性模块，提高效率，栅格则可以让我的设计元素的分布保持一致的比例。所谓组件，类似于 Sketch 中的 Symbol、PowerPoint 中的母版，用于绘制可复用的元素。比如说在我的设计中有一个卡片列表，我会在旁边先做这个卡片，微调它的样式，等差不多满意时再复制出多个放到页面中。△ 组件￼最原始的组件叫做 master，而从它复制出去的组件叫做 instance，当你调整 master 的样式时所有的 instance 都会跟着同步。Figma 允许将 master 组件就近放在页面旁边，这样是极其方便的，因为后面难免需要调整细节，这时候你就可以边调整 master 细节边看它在整个页面中的效果，比如下图中我想看一下将 logo 放大的效果。△ master 组件同步到 instance￼而反过来，当你调整 instance 的部分样式时，master 是不会跟着变化的。这样就保证了灵活性，因为总有一些 instance 需要和其它 instance 有一点区别。说完组件，再说说栅格的妙用。在 Figma 中我们可以给页面（即frame）和组件添加栅格，而栅格可以添加网格、行和列。在页面中添加网格可以帮助你对齐元素，但我一般会添加列栅格，因为它可以帮助我把元素排列为等分的几列，并保持元素间隙。下图中红色长条就是列栅格，它将中间内容区域均分为 12 列，我就可以把里面的元素按照 1-8-3 的比例布局。△ 栅格系统￼如果将栅格和组件联合起来，就可以设计出固定内边距的效果。我给卡片组件就设置了一个行栅格一个列栅格（蓝色背景），它们就给整个卡片四周划分出了一个固定的内边距。当我把里面的文字图层的 constraints 设定为左右固定并将它左右边缘对准栅格边缘时，当我放大缩小卡片时这个文字图层就会保持左右的内边距固定。△ 组件+栅格￼用一个动图表示一下，上面这个使用了栅格，下面的没使用，此时上面图片的四周就会紧贴着栅格边缘。△ 组件+栅格动态示意3. 添加交互最后，为了体验真实的效果，我会给它添加一些交互效果。Figma 自带的交互动作包含了跳转、显示浮层、打开链接等，而触发方式包括点击、鼠标悬浮、延时等，还有滚动固定等效果，足以做出一些基本的交互效果了。△ 交互原型￼如果是移动端，我可以用手机直接打开 https://figma.com/mirror 来预览效果。这很方便，不需要额外下载 App，只需要在手机上登录一下就行了。当然，整个设计过程中还会有很多细节会让你觉得十分方便。比如说使用 Fill 来统一代表背景色和文字颜色，方便同时调整文字和图层。还有 Smart Selection 可以让你快速选择一些元素，将它们对齐，并随意互换两个元素的位置。他们会经常在官方博文中告诉你一些小技巧，我也经常会感叹「竟然还有这种操作」。Figma 适合什么样的人？总体用下来，我觉得 Figma 免费版非常适合独立开发者/设计师。因为我们的项目一般不复杂，项目间关联性也不大，就可以用一个文件来设计一个项目，也就不用担心跨文件共享组件要收费的问题。与此同时，Figma 基于 Web 的特性也决定了它易于分享。如果有人想要看你的设计，你可以直接将预览链接发给对方。这也意味着你可以随时随地做设计，即使没有带电脑也没关系。Figma 官方响应也很快，我有时遇到问题会直接去社区反馈，他们也会很快答复。他们还保持着一周一次版本迭代，所以如果你反馈的建议被采纳就可以很快看到更新。目前 Figma 在国外的使用率逐渐攀升，在国内可能受制于网络太慢而比较小众。我还会继续使用它做我的个人项目，如果什么时候可以在团队间普及开来，我会去买它的付费版，这样就可以使用跨文件组件共享多人实时协作设计了。欢迎关注作者的微信公众号：「codesigner」作者： leadream