我做了一个Figma 小插件-Auto sort layers

date
May 6, 2023
slug
autosortlayersfigmaplugin
status
Published
tags
SideProject
AIGC
效率
经验分享
summary
我知道,这插件很简单 我知道,我重复造轮子啦 我知道,是 ChatGPT 牛,功劳不在我 但我做出来了,发布了,还是蛮有成就感的
type
Post
🕹️
我知道,这插件很简单 我知道,我重复造轮子啦 我知道,是 ChatGPT 牛,功劳不在我 但我做出来了,发布了,还是蛮有成就感的
 
首先必须承认,没有 ChatGPT,现在的我作为一个用户体验设计师,是断然做不出来的,感谢科技进步。点击文末阅读全文 跳转到插件主页,欢迎大家使用。

浅浅介绍一下插件的功能

notion imagenotion image
 
顾名思义,Auto sort layers,自动对图层进行排序。
他可以使用根据你的 Frame 在画布中的相对位置,从左上到右下,自动排列图层顺序。

用法:

  1. 摆好 Frame位置(左上到右下,或一行,一列,都行)
  1. 选中他们
  1. 运行插件
  1. 排序将自动完成🎉

举个🌰

做了一系列作品集,中间这摆摆那摆摆,最后将他们按照左上到右下摆好,
打算规范的重命名成作品集 01、作品集 02 ,开开心心的进行导出,
notion imagenotion image
 
但这时候你的图层顺序可能是乱的,而Figma 的 Command/Ctrl + R 的批量重命名里自动升序的顺序是基于图层顺序的,所以此时重命名后…
notion imagenotion image
notion imagenotion image
就成了这个乱七八糟的鬼样子,导出到文件夹里更是惨不忍睹。
 
此时选中这些图层,运行 Auto sort layers。将自动按左上到右下的顺序排列图层,如此之后再使用进行批量重命名,就像 作品集01、作品集02...导出的结果将井然有序。
notion imagenotion image
 
我啪的一下用 raycast 放一个大呲花庆祝庆祝
notion imagenotion image
 
做这个插件可是废了我不少功夫,整整花了 60 秒来调教 ChatGPT,不得不说 GPT4 比 3.5 强的不止一点半点
notion imagenotion image
 
这么一个小需求,在 3.5 里得调试好几次,但 4 里一下就行了。
 

再唠唠另一次尝试

后来我还想做一个插件,以求在 Figma 内直接上传图标到 iconpark
这次我先跟 Claude 聊了一下
notion imagenotion image
notion imagenotion image
notion imagenotion image
notion imagenotion image
notion imagenotion image
 
很遗憾,Claude 并没有将代码发给我,但是他话多,他会帮我一步一步的分析每一个功能点
于是我带着 Claude 的想法去找 GPT4
notion imagenotion image
 
GPT4 很快给了我答复和完整的代码,我将同样的话发给 GPT3.5
他也给我提供了代码
notion imagenotion image
我把 GPT4 给我的代码发给 3.5 检查,他表示肯定
notion imagenotion image
 
我又把 3.5生成的发给他自己
notion imagenotion image
notion imagenotion image
 
4!牛蛙!
 
我将 4 给我的代码放到 Figma 中运行,成功的加载出iconpark 的官网,但我登录的时候,不行了,插件界面白屏,可能是我使用 Github 账号登录的,所以没法跳转?我也不知道,但我已经觉得不可行了,什么时候 iconpark 出 API 再说吧~~
 
不过我觉得这个使用方法还是有意思的,先给话多的 Claude 分析,再给 4 执行,准确率会高很多,懒人必备。
 
不过我觉得这个使用方法还是有意思的,先给话多的 Claude 分析,再给 4 执行,准确率会高很多,懒人必备。
另外我一个设计师同事也使用 ChatGPT4 做了一个插件,名叫排队超人-queue superman
notion imagenotion image
他的思路正好和我相反,它可以根据 Frame 名称中斜线“/”前的字段,将选择的Frame 进行分组和布局,在开始之前,还可以选择队列中每个 Frame 之间的间距,以确保一致的布局。欢迎来试试。多提需求。
插件地址:
Auto sort layers:https://www.figma.com/community/plugin/1232682092183580601
queue superman:https://www.figma.com/community/plugin/1232995345283472701
希望我们这俩插件能给你带来帮助~
 
本文同步发布在公众号“有光时”,欢迎关注~
notion imagenotion image
对于本文内容有任何疑问, 可与我联系.