​Figma教程汇总

详细请看这四篇文章

Figma软件介绍及基础(一)

Figma常用工具快速上手(二)

Figma组件和自动布局的应用(三)

Figma Variants组件集/变体组件(四)

什么是 Figma

Figma 是一个基于浏览器的协作式 UI 设计工具，Figma 从推出至今越来越受到 UI 设计师的青睐，如今也有很多的设计团队投入了Figma 的怀抱。

Figma是一款基于浏览器的开发工具，那么有什么好处呢？

• 跨平台（Win,、Chrome、Linux、Mac、TNT）
• 无需保存
• 设计文件现在是一个链接
• Figma 支持历史版本恢复，免费版最多保存 30 天。专业或团队版无限制
• Figma 考虑了灾难恢复，所有的基础架构都分布在 3 个 AWS 数据中心，其中任何一个数据中心意外发生故障，其它数据中心将继续工作。

那它有 Sketch 快么？

基于原生 OS 开发的软件自然能更好的使用硬件资源，但 Figma 在速度上完胜 Sketch，即使在处理大文件时也是如此。

但 Figma 有插件么，Sketch 上我依赖很多插件完成工作

Figma 原生支持很多 Sketch 需要插件甚至依靠其它应用才能完成的功能，当然，Figma 也支持插件开发。

Figma = Sketch（UI 设计）+ InVision（原型设计） + Zeplin（标注）+ Dropbox（云端同步）+ Abstract（版本历史）+ Craft-Freehand（实时讨论） + Liveshare（实时分享）+ Team Library （团队组件库）+ Web API（第三方接入）+ …

UI 设计

Figma 是为 UI 设计而生的设计工具，除了有和 Sketch 一样基本的操作和功能，还有许多专为 UI 设计而生的强大功能。

原型设计

你可以在 Figma 里面无缝完成从设计到原型演示的切换，不需要反复同步设计图到第三方平台，我们同样可以利用 Figma Mirror 在手机上预览效果。

前端协作

工程师可以在设计图上量取位置、并且可以导出所需任何资源（包括 CSS、iOS、Android 样式）

实时协作 + 内置评论

在 Figma 里，设计和协作可以是同时进行的，任何人都可以在设计图的任何地方添加评论， 你可以在评论中@其他人或将评论标记为已解决。

其他链接：

https://www.figma.cool/learning-paths

要想在 figma 中创建一个圆形（或其他形状）蒙版的图片，可按以下操作：

1、创建目标形状，可以是圆形、矩形、三角形等；

2、导入目标图片，导入方式可将图片文件拖入或外部复制后黏贴到 figma 中；

3、根据上面两步，你分别获得了一个形状图层 + 一个图片图层，然后选中形状图层，点击上方菜单中的【Use as Mask】蒙版按钮；

4、点击左侧面板中的图片图层，并选中图片，拖动图片图层移至图形图层的上方（此时你的图片可能会消失掉，但放心，图片图层还在，所以不是真的消失了）然后在中间的画板中移动图片到目标效果的位置即可

**注意：**形状图层必须要在图片图片的下层。❤️

在 Figma 里，设计和协作可以是同时进行的，任何人都可以在设计图的任何地方添加评论， 你可以在评论中@其他人或将评论标记为已解决。

喜欢的话，请动动小手点个赞，我是坚果。