Figma插件：Bitmap Tool

一看名字就知道这是一款处理位图的插件，是的，起初我只是想知道位图的原始尺寸，以便能够等比缩放它。慢慢地根据自己需要添加了一些功能，是的，这个插件主要是写给自己的，所以会很不严谨。最近把插件提交到社区，居然审核通过了，那就来写一写“说明书”，看看你们是否也有类似的需求。

位图缩放

选中一张位图时，面板会实时显示原图的宽高。
目前只能按整数倍（1倍、2倍、3倍）进行缩放，可选中多个位图进行缩放，缩放前勾选“居中对齐”，会尝试将位图相对于各自的父对象水平和垂直方向居中对齐，这个父对象一般是指 画框（frame）。

划分切片

将 位图/frame等 分成若干等份。默认是1行1列，此时点划分按钮，会在对象上方添加一个位置和大小相同的切片。实际上这是一个简单的 SpriteSheet（精灵表单）分割功能。

生成Gif

将选中的显示对象转成gif，一个对象就是一帧，对象可以是frame也可以是rectangle，不仅限于位图，甚至不需要将设置它们的导出属性。默认值是100，表示每一帧的延迟是100毫秒，点击“生成”按钮后，在面板的底部会显示生成的gif和下载链接，由于目前个人要处理的gif尺寸都很小，就粗暴将gif的预览和下载链接放在了面板底部，想要关掉gif预览得重开插件。
另外 支持单独设置某一帧的延迟，在图层名后添加“#100ms”格式的文字即可，由于figma给到接口中不包含选中先后顺序，所以以图层层级作为gif帧的前后顺序。

按组切片

这个功能不太好理解，简单来说就是给序列帧添加一个统一的画布。新建一个frame，然后将对象放在frame的对应位置，将要导出的对象打组，然后执行“按组切片”，你会看到在所有的组里面多出一个叫“bg”的rectangle对象，这个对象的宽高、fill属性的填充色跟 父对象frame 是一样的，位于frame的起始位置，然后你选中组进行导出。

切片转png

将切片转成png，转出来的png会自动放在切片的上一层，位置跟原切片相同。支持选中多个对象，1个对象1张图，同样地你不需要设置对象导出属性。

5px圆角

因为习惯使用 平滑圆角，点了此按钮后会给 位图/rectangle 等对象添加一个5px的平滑圆角。

组件转画框

将组件（Component）转成画框（frame），简单理解就是将组件内的内容转移到画框内。考虑到删除组件可能会有影响（现在想想好像可以直接删掉）并不会移除原始组件，原始组件被隐藏显示了，位于画框的下一层。

位移

这部分功能默认是被折叠的，点击“其它”可以展开这部分。
这个功能是将选中的各个对象往上下左右移动一定位置，默认是10px。

实际上figma自带这个功能，在 Preferences – Nudge amount 可以找到，Small nudge默认值是1，Big nudge默认值是10。我们按上下左右键时移动1px就是对应 Small nudge，Shift+上下左右键 移动10px，是对应 Big nudge。

导入lottie序列帧

将矢量的lottie动画序列帧导入到figma。这个想法其实很奇怪，感觉没什么用，全网估计也是独一份。起初我是想将一个lottie动画导入到达芬奇里做成视频，但由于lottie只能通过gif和mp4的方式交付给达芬奇，这两种都没有透明度，经过抠像处理发现锯齿很明显。于是通过这种方法将序列帧导入到figma，再使用figma导出png序列帧，再导入达芬奇。使用ae的小伙伴应该可以直接使用lottie动画。
这里提供两个json地址供大家测试：
https://assets5.lottiefiles.com/temp/lf20_2UpKAK.json
https://assets8.lottiefiles.com/packages/lf20_sxh1eqfy.json

选中导出项 和 选中文本框

“选中导出项”按钮，点击后，会从 框选的对象中的 选中包含导出属性的对象。
“选中文本框”按钮，点击后，会从 框选的对象中的 选中包含文本框的对象。

位置信息

将选中对象的位置信息以json格式写入剪贴板，文本内容如下图：

最后

在figma中搜索 “Bitmap Tool”，可以找到本插件，插件是免费的，并且代码已开源。
个人向插件，功能主要是满足我个人的需求，如果大家有好可行的建议可以给我留言，能力范围内的我会做对应修改。
UI组件库使用的是 bootstrap v5.1.3，代码使用 typescript编写，打包使用的是 webpack。

插件地址：https://www.figma.com/community/plugin/1048890018608642572/Bitmap-Tool
开源地址：https://github.com/hufang360/figma-BitmapTool