赞助商
立即赞助

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

设计神器3年前 (2021)发布 流光
2.4K 0 0

这一篇关于Figma全面介绍的章,非适合入门,

目录总览

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

前言

为什要说Figma,最直观的受就是,这个工真的非常好用,使用起来非常流畅。可以提高计效率,用起来爽,然后想享给大家

最重要的是,Figma已经成为主流原型设计工具,为什么么说?我们来看一份来自UXTOOLS查2019年的设计工具使用报告(2020年Figma的用户应该更),报告详情请查看:https://uxtools.co/survey-2019

1. 报告总结几点

自2018年以来,Sketch使用率从42%的受访者下降到31%,而Figma从12%增长到26% Mac中用的最的设计工具是Sketch,Win系统用的最的是Figma(当Win也不能用Sketch)

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

很人肯定早就听Figma的名字,看到很设计同行在推荐,自己也使用很长一段时间,也疯狂的安身边的朋使用,它到底有什么让么设计师弃Sketch从Figma的魅力?下面的内容将为大家详细分享FIgma相关的一识点,向大家介绍款时常听到,但是还不太熟悉的工具。

Figma是什么

是一款平台使用的使用软件,和Sketch功能差不;但是他以在Mac,Windows PC,Linux计机甚至Chromebook,目前iPad也以使用。不受系统的,只要你以打开网页,理论上基以使用款工具

  • 它不需要使用苹果笔记本脑也能使用
  • 它储存文件不需要占用地内存
  • 它可将你的设计一个链接的形式分享给有人
  • ……

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

Figma 有哪些功能亮点

1. 全平台使用

这个是Figma最大特,回想我买苹笔记本原是Sketch不可以在Win上使用,“斥巨资”吃了24个月泡才用上Sketch。现在终于有款没有设备限制,和Sketch工具不多功能软件了,喜极而泣

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

2. 云端文件

Figma创建的文件全部都保存的账的,不用占用本内存。依旧回起我“斥巨资”的苹果笔记本可怜的256G内存,Sketch文件的越越多,我需存网盘或者存硬盘,且理起太难了。重的,时候应该Sketch升级,打低版本的文件,设稿全费了……猛男落泪

3. 历史版本

Figma自动保存功能不细讲了,这设具必备功能,历史版本(免费版多保存 30 天。专业或团队版无限制)基于自动保存实的,举例一场景:老板,她半月的第一稿的设,这时候就可以打Figma,点击一下,恢复源文件,完事~

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

4. 共享协作

Figma可将任何件,页面或面(在他设计工具中称为画)的基于同权限(查看,编辑权限)进行共享。件就是一个几十个字符的链接,非轻。试想团队成员想看/修改你的作,你直接甩一个连接过就可了。之前大件传输,真要了命,更一次我要传一次件,累瘫了~

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

5. 时协

个就很有趣,基前面的分享功能。当别人拿到个链接时就以进到你个设计界面,个功能它以做什么呢?

  • 可以多人在一个页面共同完成一个项目。
  • 以时时刻刻看你有没有在做设计(老师催学生业很有用)
  • 可评论你的设计
  • 可以实时查看的设度

6. 团沟通

团沟通其也是属时协的一种,项目组成,不单单是我们设计师内部,它以给到产品、开、测试相关的同,以时在一个设计文档中沟通,讨论方案,也就以引申出上时设计评审,在疫情期间,个为设计评审工具太

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

7. 组件和共享式

你可以使用这个功能,它来系统性地复用一些界面模块和式属性。创建一个组件后,它就是一个主组件,之后从它复制出去的组件都是它的组件实例,修改 主组件会同步它所有的实例。所以,当你需要更新一些西,比如说基本链颜色和某个图标,只需要调整主组件或来源式即可

Figma和sketch对比有什么优势

彼得.木曾经说过,受一个新的事物,那就从旧的事物比较开始,就来对比下最熟悉的Sketch比较有什异同之,主要从以下个维度来进行比较

1. 开方式

Figma支持在 Figma 中开 sketch 文件(直拖拽丢Figma工即可),但Sketch不能开Figma的,如果需要Figma开Sketch文件,需要借助第三方工xd2sketch,需要收费。

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

2. 协作

Figma协作常简单,接分享链接,到应权限即可开始协作。可以进时编辑文件,评论等等

要达协作方式,Sketch则国内计最始方式就是直发送源文件给对方,然后进行协作。

还有一种方式就是使用Abstract(以进行文件协,同时还有版控器功能),种协方式流程太长,使用来比复,劝退大部分设计师(我有验,也被劝退)

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

3. 计稿交付

国内Sketch一是使用蓝湖插件,将计稿导出之后,上传蓝湖,开发只要开蓝湖对应的地址即可获得标注、切图。目前蓝湖也进行了收费,企业年费按照协作人数算(60人队,一年费用大概是1W左右)

国内Figma目前付给到开还是是用插件(推荐个插件,Juuust Handoff 面插件篇详细介绍),以直接进行付,也非常方便。

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

4. 离线公

种工都可以离线工作,但 Figma 不能加载组件,离线的候会动将文件保存在本地中,网的候在上传云端。但 Sketch本身是离线工,所以不会有什响

5. 插件系统

Sketch插件数量非常多,不好的一点就是,容易出现插件和工不兼容的问题,Sketch更新有会更换代码逻辑,容易导致插件在新版本不可用,这是开发和使用最大的懊恼,有候好不容易找这个插件可以解决的痛点,下载安装发现不可以用,~难了。

Figma的插件目前是放在区中,数量逐渐增,兼容比,同样在没有网络的情况下,使用来比慢。

6. 组件功能

Sketch的组件功能比,修改来相对比繁琐,需要进行级的修改,但是,在Figma没出现之前,我得它是一个非常的功能

Figma的组件功更灵,自由。篇幅限制,后续章会专门说Figma的组件功,总之,好

7. 自适应布

Sketch的功叫Smart Layout,Sketch想要创建自适应布,必须需要先创建一个组件

Figma的功能叫Auto Layout,普通图层建立组别之后既可以创建自应布局。模块之间的间距调节加智能方便

这里做功能比,暂不做功能演示,具体操作,后续会说到,相比较下,Figma自适应布局更加灵活(智能),使用起来更加高效,前Sketch我要实现类似Figma自适应布局功能,般是借助插件Anima来实现。

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

最后再来张图标比,议接收藏保存

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

写到这里Figma基础部分算是简单介绍完了

插件推荐-建议收藏

作为个个新工具不太熟悉小白,学习款新工具,般有两个步骤,第是找各教程,另个是,搜罗堆插件,边找,边哇哇哇哇,这个可以,收藏起来先。反正是先收藏起来,下肯定有用,这是我们学习新东西常态,可避免,我也是这么走过来。

了200款插件,挑选了这十款插件享给你(互网标题模式),基本能解决大家工作中大部景。

插件快捷搜索,快捷键 ⌘ / 呼出搜索,输插件名点击使用即

1. 画板整理/重命名工具-Super Tidy

简直就是强迫症的音,一键整理画板,还支持节间和。以根据其画位置轻松对齐,重命名和重新排列框架

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

2. Insert Big Image_插入大图

Figma对导入的图片大是有限制的,你想要输出比较高清的图片,或者导入更加高清的图片,这个插件可以帮助你解决问题,毕竟计的图片质量度是非常重要的

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

插入并保留大图像的始辨率。插入大图像开一个对话框,通过该对话框可以选择一个或多个图像文件。智能地拆每个图像文件并将其作为一组较的图像插入。(这是为了解决Figma中的一个限制,在该限制中,尺寸大于4096像素的图像按比例缩)

3. Easometric-2.5D 插画创作

对于2.5D插画的创作,轴测图的制作,非常高些便捷

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

4. Unsplash

这个不用多介绍了,图片免版权图片填充插件,免版权商用插件必备

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

5. 设交付插件 Juuust Handoff (类似蓝)

的离线文件,发觉得 Figma 打很慢可以试用这插件(具体使用查看:https://www.figmacn.com/handoff-landing 这网址详细的教程

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

6. LottieFiles(画库)

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

动画库,使用个插件你以将成千上万的免费 Lottie 动画为 GIF 或者 SVG 插到你的设计当中,以说非常非常给力

7. Vectary 3D

Vectary 3D 以将 3D 元素插 Figma 中,更有趣的在你能将的设计稿置预设的互的 3D mockup 导出图到 Figma 中,从此包装设计稿不用愁找不到适合的 mockup ,自己动手食。

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

另外 Vectary 3D 款插件背的产品,是一款与其同名的基浏览器的在 3D 设计工具,也非常轻便容易上手。

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

8. Autoflow(线)

Autoflow 可以让计直选中个素后动画上流程线,去了画流程图过程中标注箭头的繁琐工作

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

9. Time Machine(版本收)

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

担某版本的文档保存?这插件能够全自动帮复制保存的这版本,备份到另外一「Time Machine」的文档当中,并且会基于所属的框架时间行命,完全不用操。

10. Chinese User Data Generator

中文用户数据器,随机以下用户数据。

姓名、年龄、性、手号码、E-mail、职业、地址、省份、城市、身份证、占位文。

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

11. Chinese Font Picker

可以 Figma 里使用中文字体选择器(Chinese Font Picker)选择预览系统中已安装的中文字体

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

12. Detach Master(组件分离)

Figma创建组件之后可逆的,这款插件可帮助你快速使得组件分离

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

13. Fonts Changer(批量换字)

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

14. Table Paste(表格文替换到设计)

这个常实做表格相关使用,常高效便

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

15. Camera Color Copy Paste (实时拍摄取色插件)

很好玩的一插件,这插件可以帮直接用手机相机拍摄取色,并将实中的颜色复制到 Figma 中

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

概先分享这些,欢迎家论区分享推荐好用的插件,后续再出一插件合集。

从sketch迁移到figma步骤

文章看到这里,可能也许概应该,些同学从Sketch换到Figma了,那切换过程中一些需注意的还家分享下,避一下坑。

1. 导入

对于轻的文件,设样式也比较简单的,直接导入即可,导入完之后,再归类整理好即可

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

2. 整样式

导入成之后需要重创建样式,因为Sketch拖进来的件,是会自生成组件的,需要自己重再次创建,命名时整样式快捷键(/)就可进行快速的分组。

3. 阴影

当有阴影效果时候,如果是打了组的,则在Figma会显示来,需要手解开组才可

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

4. 文字

点需要注意的是,Figma需要下载并安装 Font Helper才以链接到地的字,没有的就字丢失,显示A?黄的样式。建议提前安装。

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

5. 结

阴是比较经常遇的,之前以为是不兼容,来是组的因,把组解开就可以了,文字的话,有候本地是有的,但是Figma还是没法识别,这个就坑,换字体的话有可能会导致行间距不一致,都需要调整,这个目前还没有找比较好的方法,有解决的同学,可以评论多多交流。

如何推动Figma在团队中使用

相有多人懊恼这个问题,你觉得这个西棒,也能提升比较高的计效率,但是就是推动不了在队内部落地,然后你工作中依旧还是使用你不喜欢的计工

1. 推进现状举例

Q:你有和领导提了一下,说Figma好用,可以云端的,不用Mac可以用的

A:领导说;“我们现在的个工具不是挺的吗,先用着吧”

Q:好,那可

Q:老板提了一下,Figma很好用,可以云端的,不用Mac也可以用的

A:领导说;要钱吗?

Q:要的,每人$144/年,折人币:968.1552/人,计部4人,费用是:3872.62/每年

A:还有花钱呀,,你们先用着目前的工具

Q:好,我们先着

当然还有一方面公司觉得端数据全

还考虑到需联网可以设

需要学才能更快访问设计文件等等

使用软件还需要花钱

它又是一个新的设计工具,团学习来还需要花时间,

这要换过值得吗?
……

以上都是不能推进的理由,也真实存在

但我想说的是,想要做一件情只有一个理由,不想做一件情有千万种理由,只要你想,一定能成

2. 推进事情步骤

我们先按照人物角来说

有绝对语权

类通常是老板、领导,他们推进一个情,想比我们来说简单很,估计也就是一个通的情

没有绝对语权

没办法一下子就能决定的,需要请示,需要申请的,通常是我们设计师身想要推进个情,推进个情到团中使用则需要一技巧。

往往在团队中推进一个事情没那么简单,会遇到很多的阻,这个时候则需要较强的推。

我们向级申请一事团队中推行,一般的骤就找到直接决策人,以文档形式提交。告知行动利益点

具体为,分析目前我们是怎么样,比竞品有什么这样做优势什么,我们采用它那案会带来什么样结,结是:分析-比-假设-试-验证。在这里感谢美设计负责呆胶布分享动思路。

体方式,直使用一个模板给大家,建议直收藏保存

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

希望你成功,不成功可以再一起交流下。成功也可以在评论享下。

Figma常用快捷键

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

学习网站推荐

  • 教程插件推网站:https://www.figmacn.com/
  • 插件个Figma源文件推荐(种类非常富:https://ui.figma.cool/
  • Figma 秘笈:https://ifigma.design/
  • B站UP主:素范:https://space.bilibili.com/15741969/channel/detail?cid=15693
  • B站UP主:草帽sMao:https://space.bilibili.com/108104104?spm_id_from=333.788.b_765f7570696e666f.2
  • 官网教程(需要科学)https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA/featured
  • 官方区:https://spectrum.chat/figma?tab=posts

答疑解惑

Q:Figma个收费吗?

A:个人版免费

Q:Figma上手吗?

A:很好上手,基本和Sketch

Q:Figma界面中文的吗?

A:安卓化插件即可,(https://figma.cool/ )网页端和客户端都有

Q:Figma对网络要求高吗

A:不太高,需要科学(买一个稳定的科学即)

Q:Figma如何和开发交付对接(标注、切图)

A:可以直接交付,但网络原因,建议使用插件 Juuust Handoff 可以实离线交付

Q:Figma 断网了怎么办?设计内容会不见吗?

A:只要开了计稿,断网的候仍然可以做计的,Figma会动给你保存在本地,等有网的再同步云端

Q:Figma 何下载插件

A:打开Figma,双击“社区”,插件名字复制到搜索,跳转到插件页面,点击即可

参考文献

  • https://blog.prototypr.io/from-sketch-to-figma-daeb05eb7a44
  • https://www.figma.com/file/x4kpcFDNDpPdwMVhVMi3a7/%E4%B8%BA%E5%95%A5%E9%80%89Figma-(Copy)
  • https://uxdesign.cc/should-i-switch-figma-sketch-79c9828684a

欢迎关注作者微信公众号:「七设计坊」

新晋黑马神器!Figma完全入门指南(附超多插件+教程)

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

什么时候会需要用到屏幕录像工具呢?举例来说,制作教学素材让远程工作学习的对象可以更容易理解内容;或是建立影音教学,让...
屏幕录制
本文主要介绍了羚珑动图产品侧对压缩GIF格式文件的探索,其中归纳了压缩GIF的各种方法以及相关开源工具,可以为需要压缩GIF文...
GIF压缩
在世界范围内,Figma 已经作为主流的原型和数字设计软件而存在,和 Adobe XD 和 Sketch 相比,Figma 作为在线工具,有着更强...
Figma
以前要对图片去除背景、只保留画面中的人物或其他物体,对设计师来说可能是很耗费时间的工作,而且要处理到非常细微并不容易...
BgEraser
有时候我们需要一些好看的背景素材,时间一紧张可能就做得不咋地,没关系,今天给大家推荐一个自动生成背景纹理的网站。 http...
glitchart
越来越多的设计团队开始从 Sketch 迁移到 Figma 这是大势所趋。但是这两个工具之间有差异,这篇文章我会为你分享一些无缝切换...
Figma
UI 设计的工具层出不穷,每年都有不同的设计软件、动效工具、标注工具、原型工具问世。原因是因为 UI 类设计操作太简单,所以...
ui设计
2021 年全球设计师的年度盛会 Figma Config 刚刚在 4 月 21-22 日举办。这次大会上,Figma CEO Dylan 为设计师们带来了众多全...
Figma