网页设计 » 视觉设计 » Figma的使用技巧与插件推荐

Figma的使用技巧与插件推荐

发表于: 视觉设计. 评论
Sponsor

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

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

Figma的使用技巧与插件推荐

7个Figma插件:

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

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

Content Reel - Figma 内容填充插件

2. Figmotion – Figma 动效义肢

Figmotion - Figma 动效义肢

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

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

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

Unsplash - 摄影作品填充插件

4. Mapsicle – 地图制作插件

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

Mapsicle - 地图制作插件

5. Image Palette – 图像取色插件

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

Image Palette - 图像取色插件

6. Iconify – 图标库插件

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

Iconify - 图标库插件

7. Autoflow – 流程绘制插件

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

Autoflow - 流程绘制插件

8个Figma技巧:

8个Figma技巧

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

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

用 Arc 功能为椭圆图层易形

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

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

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

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

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

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

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

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

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

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

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

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

使用 Smart Selection 玩转图层网格

5. 在 Figma 中调用本地字体

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

在 Figma 中调用本地字体

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

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

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

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

创建你的第一个 Figma 设计稿

8. 熟悉 Figma 的设计工作台

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

熟悉 Figma 的设计工作台

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

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }