Figma比sketch好在哪里呢？

Figma 是一个云端编辑的在线 UI 界面设计软件，支持 Windows 和 macOS 等多个平台。根据 UXTOOLS 的数据，Figma 已经是目前使用排名前五的设计工具了。与 Sketch 等传统工具不同的是，Figma 是第一款真正支持协作的 UI 设计软件，可以让整个团队的成员同时查看并修改协作的项目。

选择一个合适的工具对于设计师之间的协作是非常重要的。

Figma在协作的过程中采用了谷歌文档的模式，允许所有设计师在同一时间，同一个文件上同时开工。你能见到许多鼠标在页面上，可以看到其他设计师正在做什么。

老实说，我个人不大喜欢有人一直盯着我看，或者和别人在一个文件上工作。因为当文件放大时，两个人想要在同一个屏幕上工作时，简直崩溃。但有一些设计师更喜欢这样的工作方式。

当你设计完一个版本的时候可以保存一个版本，而且你

设计的时候，figma会自动保存，在你保存的大版本下拉还有更多的时间点的小版本，你可以把需要的时间点版本复制出来，相对于sketch的本地保存，figma的云端保存就方便很多了，不会因为硬件的损坏而丢失，永远可以存在网上。

Figma有很多的插件，我们可以看到figma的插件排行，还可以查看最新上线的Figma插件，因为figma是基于网页端的设计，所以它不像sketch经常要更新版本，所以大家下载插件后就可以开开心心的使用，而且不用担心版本更新后插件不能使用的问题。

这里我们比较常用的插件是Unsplash和Figmotion。

Unsplash可以用来填充图片。

Figmotion可以让figma建立关键帧，还可以调节动效曲线，做一些简单的GIF动画效果

我们可以用web API的方式调用token来同步修改设计稿和开发稿，当你设计稿改变的时候，开发同步改变

Figma可以直接实现原型交互效果，比如网页的hover效果，还有页面的侧滑，上滑，下滑等等交互效果，实现之后可以通过链接分享给团队需要的人，如果你是用组建搭建的原型，那么你可以一键改变组建的颜色，原型上也会同步改变。

Figma可以直接生成代码，可以生成css、安卓、ios三种代码，还可以切换展示形式，你只要把链接发给开发

开发就可以直接使用了，开发还可以通过你给的链接来进行切图，只要选中图标就可以导出各种开发所需要的格式

有点时候网速不是很好的，开发会抱怨进去太慢，那我们还可以通过一个插件解决，就是Sympli Handoff 。Sympli Handoff 是一个标注交付工具，支持查看标注、样式、尺寸，切图下载，版本控制，以及和 Jira、Slack、Xcode、Android Studio 等第三方工具整合，帮助你更好地和开发配合。

Figma可以在云端保存，像我们用sketch的时候，每次回家，得把文件从公司电脑复制到自己的macbookpro上，带到家里，第二天又得从笔记本上拷贝到公司的电脑上，特别麻烦。有了fima，所有的设计稿都可以在云端保存，存储，就不用把文件传来传去了

Figma可以和你的产品经理、前端开发进行实时地进行讨论设计稿，你还可以在figma里面添加表情😊，友善的对待你的开发吧。你还可以@你的设计师小伙伴，让他帮忙修改你的设计稿😄。当然你也可以生成评论的链接给到你的小伙伴。

Figma可以把你的设计稿随时发给你的领导看，他注册了之后，下次看就可以通过历史记录进行查看，特别方便

团队组建库是专业版本用的，一年大概1千多块钱，我向公司申请开通了这个功能，你不光自己可以使用做的组建，也可以把这个组件库给你的UI小伙伴使用，非常方便。

当你和产品经理用figma讨论设计图的时候，你们两个账号登陆，你可以点击他的头像，就可以同步画面到他的操作，你们通过一个微信语音，加figma同步画面，就可以进行远程协助了。

你可以用figma的网格模式进行编辑图形，你可以添加点，然后点那个像指南针的图标，进行块的填充，和取消，这个功能和AI的路径选择器很像，在图标制作的时候可以用它快速的做出图形的布尔运算

在 Figma 中可以使用 group（组）或 frame（画框）来组织元素，但它们又有一些不同。合理地选择如何使用它们，能够帮助我们更好地设计。

group（组）

使用常规方法调整 group 的边界大小时，子元素的矢量图形将按照你希望的情况比例缩放。但是效果、文字尺寸和描边的大小不会自动进行缩放。如果你希望同时缩放这些属性，请使用缩放工具（按下 K 切换）。如果要设置子元素的 constraints（自适应约束）调整方式，请考虑使用 frame，因为子元素将始终相对于最接近的父级 frame 的边界大小进行自适应调整，而不是相对于父级 group 的边界大小。

frame（画框）

在理解上，你可能会想到其他设计工具中的 artboard（画板），实际上 frame 可以作为我们在 Figma 中的画板使用。与此同时，画板 frame 还可以理解为未定义前的 component（组件）。frame 和 component 是在 Figma 中创建动态布局的重要组成部分。与 group 类似，你可以选择画布上的现有元素，并通过按 ⌘ + Opt + G（Mac）或 Ctrl + Alt + G （Win）将其组合为一个 frame。如果你希望执行相反的操作并删除 frame，键盘快捷键与取消编组相同：⌘ + Shift + G。

边界大小

frame 的边界大小独立于其子元素。如果在 frame 内重新定位或缩放子元素，frame 的边界不会自动调整。如果希望 frame 的尺寸重新调整以适应内容，可以单击右侧属性面板中的“调整边界大小以适应”按钮。

调整边界

默认情况下，对 frame 的边界大小调整不会影响其子元素的尺寸。但是你可以给子元素设置 constraints（自适应约束），这样当你调整 frame 时，内部子元素会根据你设置的 constraints 来自适应。默认情况下 constraints 被设置为顶部和左侧距离固定。（如果要在调整 frame 边界大小时忽略 constraints，请在拖动 frame 边框时按住 ⌘）

总结

推荐在以下情况下使用 group：

1.你希望将多个元素组合到一起，但不影响他们的可编辑性

2.你希望将多个元素组合在一起，以便在缩放时保持跟随缩放（例如：由多个形状组成的logo或符号）

3.你希望在操作 group 的边界大小时可以使子元素自动适应

推荐在以下情况下使用 frame：

1.你希望独立于子元素控制 frame 的边界大小

2.你希望定义子元素的自动调整行为（自适应约束）

3.你希望对象被 frame 边界大小剪切，或者位于 frame 的边界大小之外

4.你希望原型中具有嵌套滚动的行为（例如：水平轮播或者可以随意移动的地图）

5.你希望在该元素中使用网格布局

在 Figma 中可以按住option键，然后滑动调节图形右边的所有参数，这一点比sketch方便了很多。

从组建的嵌套来看，Figma中的component复制后产生新的Instances，比symbol强大的地方在于，存在母子级的关系。相当于你可以调整一个实例样式，但又不会干扰到母组件的样式，而修改母组建的样式又能修改全局。（已修改样式的子组件，该样式不受母组件干扰）

另外比较好用的一点就是figma生成的组件可以和用该组件的设计稿在同一个页面，你修改了组件，设计稿同时可以看到，不像sketch你修改了组件之后要跳转页面才能看到（sketch修改组件需要进入单独的组件页面）

还有比较好用的一点就是figma生成的组件，可以在左侧直接展示，你只要直接拖动就可以了，如果是相同一级的子组件，你还可以直接拖动替换。

大家可以看一下下方figma的自动布局可以达到的效果

https://www.bilibili.com/video/av69270926/

figm自动布局，是开发的思维，都是左右上下对称的设计，你可以设定一个左右，或者上下的数值来做自动布局。

当你隐藏其中一个元素的时候，自动布局也更着进行变化这一点是sketch里面所没有的

我之前使用sketch的symbols来制作组件库感觉挺难做的，我做文本样式的组件的时候必须把每种状态都列出来。但是当我开始使用Figma后，我发现在组件化这块做的更加优秀。figma的组件更加原子化，可以进行单个元素（比如对齐方式）的修改。（先看下图sketch的组件样式）

我们来看下Sketch是如何工作的：当你定义任何文本或图层成组件样式时，Sketch会将所有属性保存在这个样式中，如果想要修改symbols中的任何样式，都是以编辑母版的方式来完成修改。例如，如果你希望有不同的对齐方式或不同的颜色的组件，在用Sketch时，就必须提前做好所有可能的文本/图层样式。

让我们再来看看同样的情况Figma是怎么处理的：

Figma的惊人之处在于它的组件更具原子级，在component属性面板中的每一个属性都可以直接定义样式，它的工作模式更符合设计师的需要，你可以单独保存颜色，字体，投影，不仅可以任意组合成你想要的主要样式，而且有更多的自由度，可以在组件中自定义文字对齐方式，这是sketch这所没有的。种工作流程是非常有帮助的，因为如果当我想要改变颜色时，我不在需要像Sketch那样深入到元件中去调整文本风格或者是图层颜色。在Figma中，你可以真正做到修改一处就能改变所有。

sketch能实现的功能figma都能实现，而且实现的更好，相信随着5G的到来，云端编辑和设计将成为主流。如何你会sketch或者ps，那么上手figma很快，画完几个页面，用个一周时间就能学会了。我也是一边用一边学习这个软件，软件是一个工具，我们的目的是通过这个这个功能实现更加轻松高效的设计。有figma相关的问题欢迎和我联系沟通，一起学习进步。