Figma的使用技巧与插件推荐

使用Figma是一个月左右,这个文章收录的插件都是我作为一个枚设计师,确实觉得有点用的。这些技巧都是我学习 Figma 后总结的经验,均为原创。

最吸引我的地方是跨平台、免费,最让我诛心的地方是网速不稳定。这段时间可以看见 Sketch 和 Figma 相互借鉴(chaoxi)。Figma 上周公布的插件使其离 Iron Throne 更近了一步。

了解一下这7个 Figma 插件,事半功倍

1. Content Reel - Figma 内容填充插件

Content Reel 可快速将文本,头像和图标拖入你的设计中。

2. Figmotion - Figma 动效义肢

在过去,制作动效原型的工作流需要两个及以上的的工具协作:绘制原型,导入 Principle / Flinto / AE 中制作动效,最后编写动效设计说明或是使用 bodymovin 交付。 在 Figma 平台里,Figmotion 插件可以完成一站式的动效设计,输出格式包括:Figma 内部预览、渲染为 gif/mp4/webM 格式、导出 CSS/JSON 代码格式。目前开发版本为0.1.14,不支持编组。

3. Unsplash - 摄影作品填充插件

将 Unspash 中美丽的摄影作品插入你的设计稿中。你可以插入随机照片或者搜索特定的内容。Unsplash 拥有摄影作品作者的许可,你可以免费在个人或商业项目中使用。

4. Mapsicle - 地图制作插件

如果你的作品要用到地图,请不要再去百度/谷歌地图截屏了。使用 Mapsicle,你可以快速顺畅的在演示稿中放置地图。友好的用户界面让你可以轻松制作出完美的地图。

5. Image Palette - 图像取色插件

色搭是设计中的一个重要命题,如果发现一张照片的配色和自己项目格调相似。那么从照片里直接取出关键色,可能会是一个取巧的色搭方法。Image Palette 可以帮助设计师从图像中提取五个关键色,形成一个迷你色盘。

6. Iconify - 图标库插件

还愁找不到合适的图标么?还在为精品图表库付费么?Iconify 提供海量免费精致图标,直接导入 Figma 使用。Iconify 的用户界面非常友好,所有功能所见即所得。支持直接搜索,并可以对图标进行翻转、角度和颜色的定制。

7. Autoflow - 流程绘制插件

Autoflow 简化了在 Figma 中绘制流程线的过程。选择两个设计元素,按下快捷键,元素之间便会生成简约美观的连接线。

8个Figma技巧:

1. 用 Arc 功能为椭圆图层易形

Figma 虽然界面简单,看上去很简洁。但在实际使用的时不时出现一些让人眼前一亮的小功能。这些功能只会在你绘制图形的时候出现,不会聚在工具栏、检视窗等界面上。比如说 Smart Selection。今天介绍的功能 Arc 就只能在椭圆图层上使用。

2. 用 Constraints 功能制作自适应导航栏

Constraints 功能让用户可以通过对图层 x 轴、y 轴布局方式的调整,实现图层按照一定的策略进行缩放,保障不同图层在页面不同位置的布局方式。Constraints 告诉 Figma 设计稿中的元素在用户拉伸他们的框架时应该如何响应,这让你轻松掌控设计稿在不同的屏幕尺寸以及设备上的效果。你可以为框架里的任何元素应用 Constraints。

3. 用 Component 功能制作可改分评分控件

Components 是指那些在整个项目中会被反复使用到的 UI 元素,可以是按钮、图标、模态或者形形色色的图层组合。通过对这些 Components 的复用可以保持整个设计稿的一致性。Components 算一个可玩性比较高的 Figma 功能,了解下面四条规则可以帮我们快速上手:

1、母版 Component 中所包含的图层定义了这个 Component 的所有属性;

2、实例是你可以在设计稿中复用的 Component;

3、你对母版做出的任何改变都会立刻应用在实例上;

4、实例中的一些属性可以复写,这些变化不会影响母版。

4. 使用 Smart Selection 玩转图层网格

Smart Selection,用于高效操作设计稿中的图层网格。Sketch 在 55 版本中也偷偷放上了半个这个功能,离 Smart Selection 还是有一些差距,不过我猜很多同学并没有发现这个小秘密。

5. 在 Figma 中调用本地字体

Figma 在云端,而设计师自己私藏的花里胡哨的字体库在本地。那么让我们来解决这个小小小问题。

6. 用图层插入功能划分页面布局

在 Figma 的设计工作台中,工具栏里有很多图层插入功能,这些功能既基础又核心。让我们掌声请出今天的主角 - 微信小程序「豆瓣评分」,一起通过对其首页的布局划分,来上手这些图层插入功能。

7. 创建你的第一个 Figma 设计稿

最近在知乎看到不少关于 Figma 的安利贴,又重新勾起了我的好奇心。干脆这次系统的学习一遍,顺便记录学习过程,产出一套接地气,手把手的教程。需要注意的是,由于 Figma 是墙外好物,你的使用水平下限取决于网速和英文水平,一定要心平气和。

8. 熟悉 Figma 的设计工作台

正式画稿之前我们需要熟悉一下 Figma 的设计工作台。万幸的是,以 Sketch 为代表的新 UI 设计工具,工作台的布局都差不多。我们以总分的形式拆解 Figma 的设计工作台。先来一张动图遍历一下工作台的大多数功能。

​喜欢这些Figma技巧和插件吗?无论是WIN用户还是 MAC Sketch 用户都可以随时入坑哦。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,875评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,569评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,475评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,459评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,537评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,563评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,580评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,326评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,773评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,086评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,252评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,921评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,566评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,190评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,435评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,129评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,125评论 2 352

推荐阅读更多精彩内容

  • 本文将带你近距离了解Figma的用途,并提供给你20个实用技巧,让你更快更好的使用这个著名的协作交互设计工具进行工...
    iris0327阅读 12,375评论 0 7
  • 在之前的文章中,笔者为大家介绍了Sketch 的入门教程、实用技巧和资源集锦,相信大家对Sketch已经有了初步的...
    huaer阅读 7,125评论 1 8
  • 本书讲了什么 Sketch3基本操作介绍。 作者什么来头 郑成云,社会化媒体营销实践者,专注网络社交领域。从业6年...
    少穻阅读 2,400评论 0 1
  • 音乐对于我们的生活来讲必不可少,也无处不在,自古至今深受人们的青睐,孔老夫子的“移风易俗,莫善于乐”;孟子的...
    翁晓帅阅读 1,282评论 0 1
  • 因为当当搞活动凑金额,更因为这个书名买了这本书,完完全全的标题党。几次都看不下去,除了鸡汤就是鸡汤,全书没有...
    一只小懒猫阅读 383评论 0 0