Figma書き出し画像の謎の余白を消すプラグインを作った
🖼 はじめに
Figma で画像を書き出した際に、画像の周りに 1px の透明/白色のボーダーが付与されてしまう問題に時々遭遇します🤯
今回作成した figma-borderless-export プラグインを利用すると、謎の余白無しで書き出しを行うことができます🚀
余白が含まれてしまう原因 🗒
原因は大きく２つあります。
- 書き出し時のサイズが整数値ではない
- 非整数値を使って微調整をした
- 1.5x 書き出し等をした際に非整数値になった（ex.
133px→199.5px）
- 書き出し対象の座標が整数値ではない
以上の状況において書き出しを行うと、 figma のバグで四辺のいずれかに白/透明の枠線が付与されてしまいます。（jpgなら白っぽい線, png だと透明度のある線）
figma のフォーラムでは、そのフレームを整数座標（格子点）上に配置すると解決するよと紹介されていますが、これだけでは上記 1 のケースは解決できません😭
🤖 Figma プラグイン開発
本記事では figma プラグイン開発を始める上で早めに知っておきたかった...と感じたことをまとめておきます。
（アルゴリズム等については触れませんので、気になる方はレポジトリをご参照ください！）
プラグイン実行環境
figma のプラグインは以下の2つの環境で実行されます。 （説明のため、本記事では figmaNode環境, iframe環境 と書きます）
-
figmaAPIが生えたサンドボックス環境 (figmaNode環境)- figma 関連の処理（選択フレームの取得等）ができる
- そこから呼び出される iframe 環境 （iframe環境）
- Browser API を使える
- UI を表示できる
上記の通りそれぞれにおいて操作できるものが異なるので、必要に応じてデータを環境間で受け渡す必要があります。(postMessage, onMessage を使う)
具体例：figma 上で選択した画像データを canvas 上で操作したい
- まず figmaNode 環境で選択した画像データを取得
- figmaNode 環境から iframe 環境へと
postMessage -
iframe環境側でonMessageでデータを受け取り、 canvas 上に描画する
※ 実行環境についてはこちらの方の記事が非常にわかりやすかったです。
ビルド・バンドル
先ほど figma プラグインは figmaNode 環境 と iframe 環境 の２つで実行されると書きました。その実行内容は manifest.json に記載されている "main" と "ui" がそれぞれに対応しています。
"main": "dist/code.js",
"ui": "dist/index.html",
そして、これらのファイルは単一実行ファイル（ import/export が解決された状態）で動く必要があります。つまり、バンドルしてあげる必要があります。
しかし、 figma 公式のプラグイン開発セットアップ方法で作られる雛形ファイルではバンドル周りは準備されていません。（ tsc はある）
ある程度複雑なことを実現しようとすると外部ライブラリの使用やファイル分割、テスト等を書きたくなりますが、それらをしたい場合は非公式レポジトリ create-figma-pluginの力を借りるか、 公式のサンプルを真似して自前でバンドラー周りを用意する必要があります。
🌃 おわりに
本記事が Figma プラグイン開発をやってみたいという人の助けになれば嬉しいです。
また、本プラグインを使ってもらえたり、レポジトリにスターをもらえると非常に喜びます 🚀
Discussion