22 / 07 / 08

给产品同学的Figma使用指南——介绍和安装

大概是在22年6月份的时候在公司内部做的一个Figma分享,当时产品设计工具一团乱,人员流动起来很多本地的历史版本都找不到,最后和产品总监沟通下,准备统一一下设计工具,刚好当时我在研究Figma也比较擅长,就在内部做了一个分享,在这里把分享的内容做个备份

开始的一些废话

大家好,我自己用Figma做设计已经挺久了,之所以从其他设计工具切换到Figma就是因为,它真的太好用了!

好用到我逢人就想推荐,但至于好用在哪,我又说不出个123,所以一直以来我就想出一个「给产品同学的Figma教程」

之前在公司内部做了一个MasterGo的分享,因为时间仓促准备的不是很充分,而且用飞书会议的形式其实并不是工具类产品最佳的分享形式。

下来后我就在想,该用什么样的方式分享,才能让没有用过Figma的同学快速的接受并且快乐的学起来?

录屏,最简单粗暴的方式就是录屏然后做成视频,毕竟现在已经很少有人愿意看纯文本类型的教程了,而且视频可以反复看。

但同时视频还不能太长,太长很容易看着看着就睡着了,因为现在大家最爱看的还是短视频,所以接下来我会分P介绍Figma的使用,尽量控制好时长,大家可以按需观看。

因为是第一次录屏出教程,难免会有些紧张,说话磕磕绊绊,大家就先忍一忍,把重点放在工具的使用上。

好,废话到此为止,我们直接开始。

什么是Figma?

按照惯例,在正式介绍Figma如何使用之前,我想先简单的介绍一下什么是Figma

其实Figma就是一个设计工具,只不过它是一个基于web的设计工具,也就是说只要你有一台可以联网的电脑,理论上你任何浏览器里使用,不用下载任何软件,同时也不用担心文件丢失,并且Figma面向个人是完全免费的。

用它可以做原型设计UI设计多人协同编辑、设计稿在线评审、设计稿版本管理、交互动画等 基本上实现了围绕产品设计工作 All-In-One

我一直认为市场占有率最能反应出一个工具型产品的好用程度,从这一点上看,用户已经用脚投票了,下图是uxtools统计的2021年原型设计工具使用占比,可以看出Figma的占比已经一骑绝尘了。

另外,各大厂的设计系统,像我们常用的ElementUI、AntDesign等他们官方现在都会出一个Figma版的设计资源,而且这些资源都会发布在Figma的官方社区里,我们在使用的时候可以一键导入到自己的团队里,而且是真正意义上的一键导入,反观XD,就不那么受人待见,很多设计系统都不会单独出XD版本源文件,属于一直被嫌弃的存在

大家应该都用过飞书文档和Word吧,相信用过飞书文档之后再让你用回Word肯定会不习惯

Figma之于XD就相当于飞书文档之于Word

Figma

Adobe XD

不限量的文件云端存储

设计文件版本管理

资源社区

(汇聚全球优质设计资源)

AutoLayout和变体功能

强大的组件功能

链接分享

(通过邮件或链接邀请成员编辑)

高效丰富的沟通方式

(随时在线评论,校对,贴纸)

自带标注模式

我经常给其他设计师举的一个例子,Figma就是电驱动的智能汽车,Sketch是自动挡燃油车,而XD就是手动挡燃油车,如果不考虑续航(网络,因为Figma需要联网使用)让你选你怎么选?我反正肯定选智能电动汽车

总之一句话,Figma要比xd好用太多了!

那么问题来了,这么好用的工具要怎么用呢?

前边说了,只要有浏览器就行,好,打开浏览器输入 www.figma.com 回车

这里我就不演示如何注册账号了,大家可以先注册账号,一边注册一边听我说,接下来的操作,请大家务必跟着我的步骤一步步来,先不要问为什么,直接跟着操作就行。

首先我假设你已经注册好账号并且在浏览器里登录成功了

第一步,下载中文版客户端

Figma是国外的软件,所以对中文的支持不是很友好,其实如果只是界面上的操作是英文倒也没多大问题,只不过Figma对于中文字体选择支持真的是一言难尽,所以我们不要纠结不要犹豫,直接下载FigmaEX,一次性解决以上两个问题

登录这个网站 https://moonvy.com/figmaEX/

然后跟着网站上的说明一步步操作就行

第二步,申请教育版团队权限

因为我们知道Figma面向个人使用是完全免费的,那它怎么赚钱?

当然是面向团队的收费模式了,个人版和团队版最大的一个区别就是个人版在多人协作方面不能使用团队组件库的功能,而我们用Figma,就是为了用这个功能。

我们去到官网,可以看到Figma团队的定价,每个月12美刀,折人民币是80块钱,一个月80,一年960块钱,也不少了。而且Figma是这样的,要用团队版功能,那团队里的每个人都得是团队版的付费用户,这么一算的话,也是一笔不小的开支了。

那有什么办法可以白嫖团队版的功能么?当然有,教育版权限

补充:因为Figma教育版是针对教育工作者和在读学生的特殊福利,这里用教育版只是为了演示团队组件的功能,我个人不鼓励非以上身份的人申请教育版权限,如果有能力的话,最好是付费,只有让开发者赚到钱,才会让软件更好用,实现一个良性循环

如何申请教育版权限呢?跟着操作走

完成以上两步走之后,恭喜你,现在可以不受限制的使用Figma的所有功能了。

在正式进入编辑界面之前,我们先对Figma主界面这些模块做一个说明。

最近、草稿、社区、右上角切换主题

重点是团队这里,团队你可以认为就是整个产品组的所有人,团队里可以有不同的项目,比如我们在团队里创建两个项目,一个叫「美好」一个叫「协和」,项目里我们可以直接创建设计稿了,设计稿的创建,建议采用分业务的模式,比如业务一,业务二,业务三,分管不同业务的产品同学就可以在各自的设计稿里作相应的设计了,这里插一句,团队组件库会有专门的人来维护,大家在各自的设计稿里,可以共用一套团队组件库,并且共享同一样式,字体,颜色等,这些后边讲组件的时候我会统一讲到

不用每个人都创建团队,到时候会有专门的人来创建团队邀请假如团队,大家只管用就行了。

结尾

好,以上就是第部分的内容,希望大家可以按照视频的步骤提前安装设置好,因为下一部分内容就要正式开始介绍Figma的使用了,OK,那么我们下节课见。

Powered by Gridea