-Yeeeees，我们是你的设计生涯加油站！-
提到UI设计师必备的设计工具，你首先想到的是什么？
Sketch？AdobeXD？InVision？
根据UXTOOLS公司-年发布的DesignToolsSurvey显示，Sketch连续三年占据榜首。然而，有一匹黑马不容小觑——设计工具Figma，在-短短一年内，从原来的第五名飞速跃升至第二名，至今保持第二，甚至大有超过Sketch的势头。
△LogoofFigma
Figma是什么？你还不知道吗？那就跟随小Yeah一起来领略Figma的魅力与强大之处吧！
Figma-基础篇
Figma是一个基于浏览器的实时协作UI设计工具，Sketch所具有的功能，Figma都能做到。它可以在Web浏览器中使用，也有一些本机应用程序可以让设计师脱机工作。
相比于传统设计工具，Figma基于浏览器的这一特性使其能跨越多种操作系统（Mac、Windows、Linux甚至Chromebook）。加上其实时协作的功能，意味着，在同一团队中，使用不同操作系统的每个人都可以共享、打开和编辑Figma文件。
在许多组织和团队中，设计人员使用Mac，而开发人员使用Windows。Figma的特别之处就是将这些群体聚集在一起，优化了设计师和工程师之间来回沟通、反复传输文件的繁琐程序，提升了团队协作效率。
讲到这里，Figma的优点已经非常明确了：
1、设计文件是一个共享链接，提升沟通效率；
2、无需下载安装即可使用，更不用操心更新问题；
3、无需保存或担心文件丢失，工作文件自动上传至云端。
Figma-功能篇
虽然Figma的界面与Sketch相似，但其功能却比Sketch强大得多。
首先，即使是基于浏览器的设计工具，Figma并不像传统网页版工具那样不给力，其速度甚至优于Sketch，处理大文件时也是如此。
△Figma和Sketch速度对比（图源Twitter）
作为一款以UI设计为主的工具，Figma实在非常“顶”，直观来看：
Figma=Sketch（UI设计）+Abstract（版本控制）+InVision（原型设计+Dropbox（云端上传）+Craft（内置评论）+Liveshare（实时分享）+Freehand（多人合作）+Zeplin（开发者交接）+TeamLibrary（团队资源库）+WebAPI（第三方接口）+······
具体而言：
1、Sketch：Figma具有与Sketch相似的界面和所有相同的绘图工具，操作快捷键也相近，并支持导入Sketch文件，易于上手。
2、Abstract：Figma包括所有合作者的版本历史。使用者可以回到历史状态，便于版本控制。
3、InVision：Figma具有可点击的原型制作功能，无需同步设计图至第三方平台，可以直接在Figma上进行原型演示，预览效果。
4、Dropbox：不依赖本地存储，设计师可以直接将文件上传至云，便于团队中任何一方取阅或编辑。
5、Craft+Liveshare+Freehand：知道链接的任何人都可以在设计的任何位置添加评论，使用者可以标记评论中的人，将评论标记为已解决。所有人都可以在屏幕上看到彼此的头像，如果单击某人的头像，使用者将看到他在屏幕上看到的内容并跟随他的进程。团队合作流畅进行。
△团队成员在Figma中添加评论（图源Toptal）
△在Figma中查看团队成员进程（图源Toptal）
6、Zeplin：开发人员可以在Figma中获取尺寸、样式，并从项目链接中下载图标和图像，非常高效。
7、TeamLibrary：可以在跨项目共享和更新组件（Components）、元素等。
8、WebAPI：Figma现在具有开发人员API，令使用者能够查看和提取任何对象、层及其属性，因此可以在其他平台展示设计，与任何基于浏览器的应用程序进行真正的集成。不少公司正在使用API在应用程序中集成设计文件以实时显示，公司内任何人都可观看并提供反馈。
△使用Figma同步展示内容（图源Figma）
Figma-优化工作流程篇
基于以上功能，Figma具体是如何改善工作流程的呢？
1、通过实时协作使迭代更快
因为在更新软件、保存、取阅、同步屏幕、演示效果、反复发送文件、等待反馈等环节浪费的时间在Figma中都被消除了。设计师进行设计、审查，即时更新，并立即获得开发者有关更改的反馈。
2、设计流程变得更加包容和无缝
Figma中的设计文件是一个链接，且易于查看历史。团队中任何人都可以取阅并讨论设计文件。作为设计师可以更轻松地并行工作，探索选项并以较短的增量进行迭代。作为开发人员可以尽早查看设计，发现和解决技术问题。作为项目经理或任何知道链接的人都可以看到设计从想法到实现，无需等待繁琐的展示。设计过程不再分散在多个文件中，而是在一个地方讲述整个故事并随着设计过程的发展而演变。
3、从设计到代码的过渡可能会更快、更一致
在Figma中，引入了与开发概念相似的变量概念。Figma和Sketch的一个重要区别在于Figma中使用“框架（Frames）”而非“画板（Artboards）”——Frames可以互相嵌套。当我们把一个较小的Frame拖到另一个较大的Frame上时，前者会自动成为后者的子集。使用者可以通过Frame将屏幕划分为不同的内容区域，然后在不同的区域内嵌套组件（Components）。一个Component又被赋予了不同的状态和样式，允许点击切换，让同一Component状态的切换变得更易于操作和理解。
△同一组件不同状态样式（图源Figma）
使用这样的框架对开发人员很有帮助，因为Figma中的Frames类似于HTML中的容器。当开发者能够更直观地看到嵌套在各自容器中的UI元素，这意味着他们在编写代码时将对布局有更准确的了解，由此可以轻松快速地建立一致且响应迅速的设计。
△Figma中的Frames（
图源Prototypr）
4、设计将更加灵活且易于操作
Sketch采用Symbol，而Figma采用Component，后者比前者更灵活。
访问Figma中的Component比访问Sketch中的Symbol更容易。不必从嵌套菜单中以命名结构一层层去找，我们可以直观看到Component的缩略图列表。
△通过“图层”面板中的选项卡查看和访问Component（图源Prototypr）
修改Component中任何层的属性，而无需将其与MasterComponent分离，嵌套Component也是如此。
△创建一个MasterComponent，并复制以创建Instance（图源Prototypr）
△对MasterComponent的更改会立即同步到所有Instance（图源Prototypr）
△除非更改了MasterComponent，否则任何属性都将被覆盖（图源Prototypr）
在创建Component时，不必担心命名结构（Icon/Search），稍后可重命名一个MasterComponents，它将同步更新至Instance，而在Sketch中不会。要创建Component的类别，只需将它们分组至一个Frame中，然后命名该Frame为类别名即可。也就是说只需拖动组件就可以轻松重新组织Component。可以在较大视图的上下文中编辑MasterComponent，而不必转到单独的页面进行编辑。
△在大视图下编辑MasterComponent（图源Figma）
不难发现，Figma的出现使得设计师的工作更简便了，和开发者之间的距离进一步缩小了。在实际项目中，交互设计是一项团队工作，Figma也在针对设计师和开发者之间的沟通协作问题进行不断优化，未来设计师和开发者之间的界限会更加模糊。作为未来的设计师，应该不断提升自己的逻辑思维和表达能力，如此，在今后的职场中才能正确沟通，高效协作，快速推进项目。
---------End---------
转载请注明：http://www.0431gb208.com/sjszlfa/1814.html
