前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >​Figma教程汇总

​Figma教程汇总

作者头像
徐建国
发布2021-12-16 15:07:36
1.1K0
发布2021-12-16 15:07:36
举报
文章被收录于专栏:个人路线个人路线

详细请看这四篇文章

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 里,设计和协作可以是同时进行的,任何人都可以在设计图的任何地方添加评论, 你可以在评论中@其他人或将评论标记为已解决。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-12-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 坚果前端 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 什么是 Figma
  • Figma是一款基于浏览器的开发工具,那么有什么好处呢?
  • 那它有 Sketch 快么?
  • 但 Figma 有插件么,Sketch 上我依赖很多插件完成工作
  • UI 设计
  • 原型设计
  • 前端协作
  • 实时协作 + 内置评论
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档