 WORKSHOPYes Design 🧪 提到UI设计师必备的设计工具，你首先想到的是什么？ Sketch？Adobe XD？InVision？ 根据UXTOOLS公司2017-2019年发布的Design Tools Survey显示，Sketch连续三年占据榜首。然而，有一匹黑马不容小觑——设计工具Figma，在2017-2018短短一年内，从原来的第五名飞速跃升至第二名，至今保持第二，甚至大有超过Sketch的势头。 Yes Design拥有多年原型工具教学的经验，时时关注设计最新趋势，提供学生最新鲜咨询。
△ Logo of Figma Figma是什么？你还不知道吗？那就跟随Yes Design的课程一起来领略Figma的魅力与强大之处吧！ Figma是一个基于浏览器的实时协作UI设计工具，Sketch所具有的功能，Figma都能做到。它可以在Web浏览器中使用，也有一些本机应用程序可以让设计师脱机工作。 相比于传统设计工具，Figma基于浏览器的这一特性使其能跨越多种操作系统（Mac、Windows、Linux甚至Chromebook）。加上其实时协作的功能，意味着，在同一团队中，使用不同操作系统的每个人都可以共享、打开和编辑Figma文件。 在许多组织和团队中，设计人员使用Mac，而开发人员使用Windows。Figma的特别之处就是将这些群体聚集在一起，优化了设计师和工程师之间来回沟通、反复传输文件的繁琐程序，提升了团队协作效率。 讲到这里，Figma的优点已经非常明确了： 1、设计文件是一个共享链接，提升沟通效率； 2、无需下载安装即可使用，更不用操心更新问题； 3、无需保存或担心文件丢失，工作文件自动上传至云端。 虽然Figma的界面与Sketch相似，但其功能却比Sketch强大得多。 首先，即使是基于浏览器的设计工具，Figma并不像传统网页版工具那样不给力，其速度甚至优于Sketch，处理大文件时也是如此。
△ Figma和Sketch速度对比（图源 Twitter） 作为一款以UI设计为主的工具，Figma实在非常“顶”，直观来看： Figma= Sketch（UI设计）+ Abstract（版本控制）+ InVision （原型设计 + Dropbox（云端上传）+ Craft（内置评论）+ Liveshare（实时分享）+ Freehand（多人合作）+ Zeplin（开发者交接）+ Team Library（团队资源库）+ Web API（第三方接口）+ ······ 具体而言： 1、 Sketch：Figma具有与Sketch相似的界面和所有相同的绘图工具，操作快捷键也相近，并支持导入Sketch文件，易于上手。 2、Abstract：Figma包括所有合作者的版本历史。使用者可以回到历史状态，便于版本控制。 3、InVision：Figma具有可点击的原型制作功能，无需同步设计图至第三方平台，可以直接在Figma上进行原型演示，预览效果。 4、Dropbox：不依赖本地存储，设计师可以直接将文件上传至云，便于团队中任何一方取阅或编辑。 5、Craft + Liveshare + Freehand：知道链接的任何人都可以在设计的任何位置添加评论，使用者可以标记评论中的人，将评论标记为已解决。所有人都可以在屏幕上看到彼此的头像，如果单击某人的头像，使用者将看到他在屏幕上看到的内容并跟随他的进程。团队合作流畅进行。
△ 在Figma中查看团队成员进程（图源 Toptal） 6、Zeplin：开发人员可以在Figma中获取尺寸、样式，并从项目链接中下载图标和图像，非常高效。 7、Team Library：可以在跨项目共享和更新组件（Components）、元素等。 8、Web API：Figma现在具有开发人员API，令使用者能够查看和提取任何对象、层及其属性，因此可以在其他平台展示设计，与任何基于浏览器的应用程序进行真正的集成。不少公司正在使用API在应用程序中集成设计文件以实时显示，公司内任何人都可观看并提供反馈。
△ 使用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中任何层的属性，而无需将其与Master Component分离，嵌套Component也是如此。
△ 创建一个Master Component，并复制以创建Instance（图源 Prototypr）
△ 对Master Component的更改会立即同步到所有Instance（图源 Prototypr）
△ 除非更改了Master Component，否则任何属性都将被覆盖（图源 Prototypr） 在创建Component时，不必担心命名结构（Icon/Search），稍后可重命名一个Master Components，它将同步更新至Instance，而在Sketch中不会。要创建Component的类别，只需将它们分组至一个Frame中，然后命名该Frame为类别名即可。也就是说只需拖动组件就可以轻松重新组织Component。可以在较大视图的上下文中编辑Master Component，而不必转到单独的页面进行编辑。
△ 在大视图下编辑Master Component（图源 Figma） 不难发现，Figma的出现使得设计师的工作更简便了，和开发者之间的距离进一步缩小了。在实际项目中，交互设计是一项团队工作，Figma也在针对设计师和开发者之间的沟通协作问题进行不断优化，未来设计师和开发者之间的界限会更加模糊。作为未来的设计师，应该不断提升自己的逻辑思维和表达能力，如此，在今后的职场中才能正确沟通，高效协作，快速推进项目。  · 策划：Yes Design 视觉设计：TL 审核：yaya & 晓小猫 · 部分内容和图片来源于网路，如有侵权请及时联系我方 · 未经许可，谢绝一切形式的转载 |
|
|
