作者：翘舌音
https://www.zcool.com.cn/article/ZMTI2MzkzNg==.html
01-工作流程对比
02- 具体问题分析
03- Figma优势总结
什么是 Figma ？
Figma 是一个 基于浏览器 的协作式 UI 设计工具，从推出至今越来越受到 UI 设计师的青睐，也有很多的设计团队投入了Figma 的怀抱。基于浏览器的好处？
1，无需保存，实时保存
2，只需要一台电脑（win/Mac），无论在哪里都可以打开你的设计图，开始工作。# 安全性
1，figma也有桌面应用，线上的figma文件也可导出存在本地
2，Figma 支持 历史版本恢复。
3，Figma 所有的基础架构都分布在 3 个 AWS 数据中心，其中任何一个数据中心意外发生故障，其它数据中心将继续工作。
4，获得了红杉资本领投的 4000 万美元 C 轮融资# 不卡顿
sketch在处理大的文件时，经常会出现卡顿，或者直接死机的情况，最坏的时候，文件没有保存，设计图需要重新画的经历。
但figma则不一样，除了最初的网页加载和部分图片加载需要点时间外，Figma 在处理速度上真的可以说是碾压 Sketch。# Figma功能
我们还需要像【蓝湖】这样的设计交付工具，帮助我们把本地文件变成一个个开发可以看得懂的网址链接；还需要像 Abstract 这样的版本管理工具，帮助我们更好的管理乱七八糟的设计文件；
甚至还需要像 Dropbox、Google Drive 这样的云盘来存储、同步，存储后还需要整理，花费大量精力。
但有了 Figma，这一切变得简单了许多。一个网址，一切在握。更没有中间商赚差价。# 更方便
1，没有传统文件的概念（不用来回传文件）
2，一个项目不需要被拆分成若干个文件，每个人负责哪个模块只需要在对应的page下设计
3，多人协作，只需要切换page, 如果要复用对方的页面样式，直接复制粘贴到自己的 Page 即可。这样就大大减少了设计师内部协作时的沟通成本。
4，无论在哪里，只要有电脑，有网，就可以打开设计稿
5，任何人看到的设计稿永远是最新的# 素材整理与共享
1：win没法打开sketch文件
2：素材携带不方便，需要拷贝，经常会出现本地文件和硬盘文件不同步，需要重新整理
3：太大的sketch素材文件卡顿
4：文件共享速度过慢
# 更强大的组件
# 即拖即用
所有组件即拖即用，配合组件搜索功能，更加高效的完成设计工作
# 高效创建组件
我们可以在任何page下创建组件，而不必转到单独的页面进行编辑。在当前页面编辑组件可以实时预览，界面的设计效果
#灵活的子组件
子组件更加灵活可变，除了位置不可改变外，颜色，边框，圆角等css都可以改变。就拿最简单的按钮举例：# 自动布局
自动布局是指通过预先制定规则，使子级元素在新增或减少时父级尺寸跟随规则自动变化，或父级大小发生变化时，子级元素跟随规则自动变化。
利用自动布局可以极大的缩短重复工作（节约间距计算、元素对齐调整时间），还可以将我们的UI设计稿框架化，帮助我们站在开发视角画界面，有利于提升界面还原度。
毫不夸张的说设计师的日常工作只有 20 %的时间在发挥创意解决问题，80% 的时间都在重复一些机械操作改颜色、改间距、改排列、改命名改改改改改，保存修改保存修改保存修改保存，最后还要整理文件同步文件，这些都让整个设计工作冗余、低效还无趣。# 布局网格
Figma可以给frame和组件添加栅格（网格、行、列）。添加栅格后可以帮助我们快速对齐元素，当我们将元素和栅格对齐后，配合拉伸和缩放时，frame内的元素会跟着设置好的规则随栅格进行变化，更方便我们去做适配。# 拆分组件库-（跨文件共享）
将原本包含属性样式、图标、基础组件、业务组件等一个庞大的组件库文件按类拆分为几个独立的组件文件，一方面 Figma 通过 Team Library 共享组件非常便捷，即使拆分文件也不会带来任何额外的负担，反而更加方便后续的拓展，另一方面分类后的组件库各司其职更加清晰明了。# 图标组件库
sketch的图标库存在导出png，或者ai导入sketch，经常存在不保留安全距离，而figma则不会出现
在ai中画好图标，批量拖入figma，配合批量创建组件的功能，可以很快搭建出图标组件库，在后期的开发过程中，开发直接导出图标的svg格式即可，不需要做多个尺寸的图标。
# 有趣的图形
# 可视化窗口
项目分类明确，可以快速根据分类找到文件，有没有一种打开蓝湖就可以编辑的即视感。
#高保真可交互原型
Figma可制作高保真的交互原型，无缝完成从设计到原型演示的切换。它比Sketch生硬的页面跳转友好，适合demo展示。在手机上预览效果可用Figma Mirror。支持导入gif文件，演示更加灵活。
# 与前端协作
每个Figma文件都有代码模式，工程师可以在其中查看设计文件。工程师能在设计图上获取标注，并自行导出所需资源（包括CSS、iOS、Android样式）
# 丰富的插件环境
地址：https://plugin.figma.cool/。
比如：图表、图标库、自定义地图、自定义插画，设计系统等优秀的插件，帮助我们快速的工作。
插件的开放时间大概是2019年底，短短时间，插件增长的速度非常快Autoflow
Autoflow 可以让设计师直接选中两个元素后自动画上流程线，省去了画流程图过程中标注箭头的繁琐工作
Vectary 3D 可以将 3D 元素插入 Figma 中，更有趣的在于你能将的设计稿置入预设的可交互的 3D mockup 后导出图片到 Figma 中，从此包装设计稿不用愁找不到适合的 mockup 了，自己动手丰衣足食。04-两者缺点
05-团队学习成本
这两种工具几乎具有相同的功能，相同的快捷方式和相同的结构。如果会使用其中一个，另一个往往也能直接上手。并且figma性能体验更加流畅
06- 哪些公司在使用
国外团队有Twitter、Microsoft、Dribbble、Airbnb、Github等；腾讯还研发了CoDesign插件，可以与 TAPD需求单关联设计稿。持在线导入预览设计稿、自动生成设计标注，批量下载切图素材、灵活调用图标库、素材库
07-价格对比
08-总结
其实想做成一件事情真的不是件容易的事情，就像是在团队内推设计工具也是一样。想要做一件事情只有一个理由，不想做一件事情有千万种理由，只要你想，一定能成。加油吧！
移动端弹层还有这些规则？80%设计师都用错了！
3天搞完的虚拟项目竟跟真的一样，这设计师太厉害