figma插画插件-Figma里越来越多的插件,我们该如何管理?

figma常用插件

TimeMachine可以帮助设计师一键将设计稿自动复制一份,收纳到在一个Page里,并按日期与时间排列。这款插件已经是笔者目前最高频使用的插件,因为日常的工作流中设计方案的探索、推导、收敛到最后的落地,会产生数量很多的废稿。以往笔者都要手动创建一个名为「Archive」的Page,然后将废稿手动丢进去。现在只需要_+/然后输入「tim」再一个回车一气呵成。

Cleandocument可以帮助设计师自动「打扫」选中的设计文件,清理隐藏的图层,解除只有单个图层的组,重命名图层,还可以根据元素的位置对图层重新排序。

Autoflow可以让设计师直接选中两个元素后自动画上流程线,省去了画流程图过程中标注箭头的繁琐工作。

方法:在按住_Shift的同时,选择2个对象,一个接一个。

Iconify内有50个图标库,包含超过40,000个图标。如果要找图标直接搜索,然后「addicon」即可。用iconify来处理搭建原型阶段的图标需求再好不过,也省去了打开iconfont网页找图标的麻烦.

Gifs可以让设计师直接搜索并插入来自GIPHY的动图。不过这款插件在平时的工作中用的还是很少的,但是用Figma做PPT就非常适合配合这款插件食用。

Vectary3D可以将3D元素插入Figma中,更有趣的在于你能将设计稿置入预设的可交互的3Dmockup后,导出图片到Figma中。从此包装设计稿不用烦恼找不到适合的mockup了,自己动手丰衣足食。

另外值得一提的是Vectary3D这款插件背后的产品,是一款与其同名的基于浏览器的在线3D设计工具链接。

A11y即Accessibility,随着无障碍设计得到越来越多关注,这类插件也终于开始出现,让我们可以更有效的优化产品设计,让更多用户享受更友好的体验。

A11y系列由Microsoft出品,包含两款插件:ColorContrastChecker、FocusOrderer。

即:色彩对比检查器。用来检查设计稿内文本对比度是否遵守WCAG(WebContentAccessibilityGuidelines)标准,以保证用户可以无障碍阅读文本内容。ColorContrastChecker的使用非常方便,唤起插件,选中需要检测的界面,点击「Check」即可。

Figma里越来越多的插件,我们该如何管理?

Figma的出现改变了很多人的工作方式,不只是功能好用,还提供了强大的设计资源以及海量优质的插件。这些对于设计师来说都相当的有诱惑力,没事就逛逛好看的素材、新奇的插件,随着时间不断累积我们也攒下了厚重的家当。设计素材的管理相对简单,建团队和项目就能把资源进行很好的分类整理。

担心想用的时候找不到,毕竟全是英文对一部分国人来说,还是有些压力的。

设置快捷键?有大佬曾经手把手教过如何用系统设置Figma插件的快捷键,可事实是设计师要记住的快捷键太多了,脑容量突然告急越着急用越想不起来,哎~我放弃。

面对长长的插件列表,本来非常的有成就感(都是朕打下的江山)可是使用时画面突然就不那么美丽了。

想要做FigmaEX出发点比较简单,就是解决我这个脑容量告急又有收集癖的懒人,能让脑子好好用思考工作而不是老想着插件叫什么来着?

功能一:插件以图标模式可视化展示

大量的插件按名称顺序列队在Figma的操作界面上,望着整齐的优美的图标,我收集癖的心又突然被点燃了。(满满的成就感)

功能二:插件顺序自定义

把常用的、喜欢的、好看的统统往前排,按颜色?按名称?按类型?随便拖拽排(有点开心哈哈哈哈)

功能三:插件中文备注

插件都是英文名称功能记不住,可以手动填写插件中文描述,自己起名字也是很开心

功能四:灵活设置

闲时最小化:不使用时,像卷尺一样收起来,保留最小范围再次hover会触发列表

图标圆形:疗愈强迫症,插件图标一键变整齐

图标描边:更整齐+1

透明背景:插件背景秒变毛玻璃,有点小美小美

导出、导入设置:自定义设置的排序和文字备注,要导入到其他浏览器或客户端或其他好友,点击导出设置画板上会多一个配置文件,另一个设备打开同文件选择导入设置即可完成。

清空数据:把自定义数据清除掉,回到初始状态。(慎点哦,不能找回)

网页使用Figma

MacFigma客户端

WindowsFigma客户端

无论你用哪种方式使用Figma都可以使用FigmaEX

FigmaArtboardStudioMockups插件安装及使用

(1)工作区域点击鼠标右键:Plugins-ManagePlugins...

(2)进入插件搜索界面:Browseallplugins

(3)搜索到ArtboardStudioMockups点击Install进行安装

(4)打开_rtboardStudioMockups

(5)注册,获取_ecretApiKey,并拷贝到Figma中。

(6)使用免费的项目创建样机

(7)生成样机。将制作好的图片放置Viewlabel中,调整完成后点击RenderSelectedFrame,完成操作。