这一篇关于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的名字,看到很设计同行在推荐,自己也使用很长一段时间,也疯狂的安身边的朋使用,它到底有什么让么设计师弃Sketch从Figma的魅力?下面的内容将为大家详细分享FIgma相关的一识点,向大家介绍款时常听到,但是还不太熟悉的工具。
是一款平台使用的使用软件,和Sketch功能差不;但是他以在Mac,Windows PC,Linux计机甚至Chromebook,目前iPad也以使用。不受系统的,只要你以打开网页,理论上基以使用款工具
- 它不需要使用苹果笔记本脑也能使用
- 它储存文件不需要占用地内存
- 它可将你的设计一个链接的形式分享给有人
- ……
1. 全平台使用
这个是Figma最大特,回想我买苹笔记本原是Sketch不可以在Win上使用,“斥巨资”吃了24个月泡才用上Sketch。现在终于有款没有设备限制,和Sketch工具不多功能软件了,喜极而泣
2. 云端文件
Figma创建的文件全部都保存的账的,不用占用本内存。依旧回起我“斥巨资”的苹果笔记本可怜的256G内存,Sketch文件的越越多,我需存网盘或者存硬盘,且理起太难了。重的,时候应该Sketch升级,打低版本的文件,设稿全费了……猛男落泪
3. 历史版本
Figma自动保存功能不细讲了,这设具必备功能,历史版本(免费版多保存 30 天。专业或团队版无限制)基于自动保存实的,举例一场景:老板,她半月的第一稿的设,这时候就可以打Figma,点击一下,恢复源文件,完事~
4. 共享协作
Figma可将任何件,页面或面(在他设计工具中称为画)的基于同权限(查看,编辑权限)进行共享。件就是一个几十个字符的链接,非轻。试想团队成员想看/修改你的作,你直接甩一个连接过就可了。之前大件传输,真要了命,更一次我要传一次件,累瘫了~
5. 时协
个就很有趣,基前面的分享功能。当别人拿到个链接时就以进到你个设计界面,个功能它以做什么呢?
- 可以多人在一个页面共同完成一个项目。
- 以时时刻刻看你有没有在做设计(老师催学生业很有用)
- 可评论你的设计
- 可以实时查看的设度
6. 团沟通
团沟通其也是属时协的一种,项目组成,不单单是我们设计师内部,它以给到产品、开、测试相关的同,以时在一个设计文档中沟通,讨论方案,也就以引申出上时设计评审,在疫情期间,个为设计评审工具太
7. 组件和共享式
你可以使用这个功能,它来系统性地复用一些界面模块和式属性。创建一个组件后,它就是一个主组件,之后从它复制出去的组件都是它的组件实例,修改 主组件会同步它所有的实例。所以,当你需要更新一些西,比如说基本链颜色和某个图标,只需要调整主组件或来源式即可
彼得.木曾经说过,受一个新的事物,那就从旧的事物比较开始,就来对比下最熟悉的Sketch比较有什异同之,主要从以下个维度来进行比较
1. 开方式
Figma支持在 Figma 中开 sketch 文件(直拖拽丢Figma工即可),但Sketch不能开Figma的,如果需要Figma开Sketch文件,需要借助第三方工xd2sketch,需要收费。
2. 协作
Figma协作常简单,接分享链接,到应权限即可开始协作。可以进时编辑文件,评论等等
要达协作方式,Sketch则国内计最始方式就是直发送源文件给对方,然后进行协作。
还有一种方式就是使用Abstract(以进行文件协,同时还有版控器功能),种协方式流程太长,使用来比复,劝退大部分设计师(我有验,也被劝退)
3. 计稿交付
国内Sketch一是使用蓝湖插件,将计稿导出之后,上传蓝湖,开发只要开蓝湖对应的地址即可获得标注、切图。目前蓝湖也进行了收费,企业年费按照协作人数算(60人队,一年费用大概是1W左右)
国内Figma目前付给到开还是是用插件(推荐个插件,Juuust Handoff 面插件篇详细介绍),以直接进行付,也非常方便。
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基础部分算是简单介绍完了
作为个个新工具不太熟悉小白,学习款新工具,般有两个步骤,第是找各教程,另个是,搜罗堆插件,边找,边哇哇哇哇,这个可以,收藏起来先。反正是先收藏起来,下肯定有用,这是我们学习新东西常态,可避免,我也是这么走过来。
了200款插件,挑选了这十款插件享给你(互网标题模式),基本能解决大家工作中大部景。
插件快捷搜索,快捷键 ⌘ / 呼出搜索,输插件名点击使用即
1. 画板整理/重命名工具-Super Tidy
简直就是强迫症的音,一键整理画板,还支持节间和。以根据其画位置轻松对齐,重命名和重新排列框架
2. Insert Big Image_插入大图
Figma对导入的图片大是有限制的,你想要输出比较高清的图片,或者导入更加高清的图片,这个插件可以帮助你解决问题,毕竟计的图片质量度是非常重要的
插入并保留大图像的始辨率。插入大图像开一个对话框,通过该对话框可以选择一个或多个图像文件。智能地拆每个图像文件并将其作为一组较的图像插入。(这是为了解决Figma中的一个限制,在该限制中,尺寸大于4096像素的图像按比例缩)
3. Easometric-2.5D 插画创作
对于2.5D插画的创作,轴测图的制作,非常高些便捷
4. Unsplash
这个不用多介绍了,图片免版权图片填充插件,免版权商用插件必备
5. 设交付插件 Juuust Handoff (类似蓝)
的离线文件,发觉得 Figma 打很慢可以试用这插件(具体使用查看:https://www.figmacn.com/handoff-landing 这网址详细的教程
6. LottieFiles(画库)
动画库,使用个插件你以将成千上万的免费 Lottie 动画为 GIF 或者 SVG 插到你的设计当中,以说非常非常给力
7. Vectary 3D
Vectary 3D 以将 3D 元素插 Figma 中,更有趣的在你能将的设计稿置预设的互的 3D mockup 导出图到 Figma 中,从此包装设计稿不用愁找不到适合的 mockup ,自己动手食。
另外 Vectary 3D 款插件背的产品,是一款与其同名的基浏览器的在 3D 设计工具,也非常轻便容易上手。
8. Autoflow(线)
Autoflow 可以让计直选中个素后动画上流程线,去了画流程图过程中标注箭头的繁琐工作
9. Time Machine(版本收)
担某版本的文档保存?这插件能够全自动帮复制保存的这版本,备份到另外一「Time Machine」的文档当中,并且会基于所属的框架时间行命,完全不用操。
10. Chinese User Data Generator
中文用户数据器,随机以下用户数据。
姓名、年龄、性、手号码、E-mail、职业、地址、省份、城市、身份证、占位文。
11. Chinese Font Picker
可以 Figma 里使用中文字体选择器(Chinese Font Picker)选择预览系统中已安装的中文字体
12. Detach Master(组件分离)
Figma创建组件之后可逆的,这款插件可帮助你快速使得组件分离
13. Fonts Changer(批量换字)
14. Table Paste(表格文替换到设计)
这个常实做表格相关使用,常高效便
15. Camera Color Copy Paste (实时拍摄取色插件)
很好玩的一插件,这插件可以帮直接用手机相机拍摄取色,并将实中的颜色复制到 Figma 中
概先分享这些,欢迎家论区分享推荐好用的插件,后续再出一插件合集。
文章看到这里,可能也许概应该,些同学从Sketch换到Figma了,那切换过程中一些需注意的还家分享下,避一下坑。
1. 导入
对于轻的文件,设样式也比较简单的,直接导入即可,导入完之后,再归类整理好即可
2. 整样式
导入成之后需要重创建样式,因为Sketch拖进来的件,是会自生成组件的,需要自己重再次创建,命名时整样式快捷键(/)就可进行快速的分组。
3. 阴影
当有阴影效果时候,如果是打了组的,则在Figma会显示来,需要手解开组才可
4. 文字
点需要注意的是,Figma需要下载并安装 Font Helper才以链接到地的字,没有的就字丢失,显示A?黄的样式。建议提前安装。
5. 结
阴是比较经常遇的,之前以为是不兼容,来是组的因,把组解开就可以了,文字的话,有候本地是有的,但是Figma还是没法识别,这个就坑,换字体的话有可能会导致行间距不一致,都需要调整,这个目前还没有找比较好的方法,有解决的同学,可以评论多多交流。
相有多人懊恼这个问题,你觉得这个西棒,也能提升比较高的计效率,但是就是推动不了在队内部落地,然后你工作中依旧还是使用你不喜欢的计工
1. 推进现状举例
Q:你有和领导提了一下,说Figma好用,可以云端的,不用Mac可以用的
A:领导说;“我们现在的个工具不是挺的吗,先用着吧”
Q:好,那可
Q:老板提了一下,Figma很好用,可以云端的,不用Mac也可以用的
A:领导说;要钱吗?
Q:要的,每人$144/年,折人币:968.1552/人,计部4人,费用是:3872.62/每年
A:还有花钱呀,,你们先用着目前的工具
Q:好,我们先着
当然还有一方面公司觉得端数据全
还考虑到需联网可以设
需要学才能更快访问设计文件等等
使用软件还需要花钱
它又是一个新的设计工具,团学习来还需要花时间,
这要换过值得吗?
……
以上都是不能推进的理由,也真实存在
但我想说的是,想要做一件情只有一个理由,不想做一件情有千万种理由,只要你想,一定能成
2. 推进事情步骤
我们先按照人物角来说
有绝对语权
类通常是老板、领导,他们推进一个情,想比我们来说简单很,估计也就是一个通的情
没有绝对语权
没办法一下子就能决定的,需要请示,需要申请的,通常是我们设计师身想要推进个情,推进个情到团中使用则需要一技巧。
往往在团队中推进一个事情没那么简单,会遇到很多的阻,这个时候则需要较强的推。
我们向级申请一事团队中推行,一般的骤就找到直接决策人,以文档形式提交。告知行动利益点
具体为,分析目前我们是怎么样,比竞品有什么这样做优势什么,我们采用它那案会带来什么样结,结是:分析-比-假设-试-验证。在这里感谢美设计负责呆胶布分享动思路。
体方式,直使用一个模板给大家,建议直收藏保存
希望你成功,不成功可以再一起交流下。成功也可以在评论享下。
- 教程插件推网站: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
欢迎关注作者微信公众号:「七设计坊」