はじめに
この記事はユニークビジョン株式会社 Advent Calendar 2020 14日目の記事です。
弊社ではここ一年くらい、画面のレイアウトの設計にはFigmaが利用されるケースが増えてきました。
画面数が増えてくるとFigmaの規模も大きくなり人力で何かをするのがだんだんつらくなてきます。
Figmaは無料プランでもプラグインの開発ができますので、実際どんな感じか手を動かしてみました。
One-shotのプラグインを作る
環境のセットアップ
公式のセットアップガイドがとても分かりやすいのでこれに沿って以下のものを用意します。
- Figma デスクトップ版アプリとアカウント
- VS code
- Typescript
プラグインを作成する
上記のセットアップガイドではWith UIのプラグインを作成していますが、今回は1度だけ実行するタイプのRun onceを選択して、save asに進みます。
完了ダイアログにあるOpen Folderというリンクをクリックすると作成されたリソースのフォルダがファイルブラウザで開きます。
ビルドする
すこし寄り道してOpen Folderで開いたディレクトリのファイルをいくつか見てみます。
MyOneShotPlagin/
├ code.js
├ code.ts
├ manifest.json
├ package.json
├ tsconfig.json
└ README.md
{
"name": "MyOneShotPlagin",
"id": "{ plugin id }",
"api": "1.0.0",
"main": "code.js"
}
manifest.jsonを見るとプラグインを呼び出したときに実行されるコードの相対パスがmainで指定されています。初期状態ではcode.jsが以下のようになっていますのでプラグインを実行してもエラーメッセージが表示されるだけです。
throw new Error("This plugin template uses Typescript. Follow the instructions in `README.md` to generate `code.js`.")
引き続きセットアップガイドのInstall the typingsから先を進めます。
tsc: watch - tsconfig.jsonまで実行すると、code.jsに変更があったときにtsconfig.json に記載した内容に則って code.ts から code.jsにトランスパイルされるようになります。
ためしにcode.jsを確認すると、code.tsから生成されたコードで初期のコードが上書きされていますね。
プラグインを実行する
適当なDraftsを作成するか、既存のDraftを開きます。レイアウト画面を右クリック > Pulgins > Development と進むと作成したプラグインが実行します。
Rectangleが5つできました。
メニューを追加する
ドキュメントを参考に、manifest.jsonにmenuを追記します。menuのアイテムは以下のいずれかを指定できますので、サブメニューを作ってみます。
type ManifestMenuItem =
// Clickable menu item.
{ name: string, command: string } |
// Separator
{ separator: true } |
// Submenu
{ name: string, menu: ManifestMenuItem[] }
{
...略
- "main": "code.js"
+ "main": "code.js",
+ "menu": [
+ {"name": "Create Shape",
+ "menu": [
+ {"name": "Create Circle", "command": "circle"},
+ {"name": "Create Rectangle", "command": "rectangle"}
+ ]
+ }
+ ]
}
commandで定義した文字列は、プラグインが実行された際にプラグインのコードからfigma.commandで参照できます。この値を参照して処理を分岐するようにcode.tsを書き換えてみます。
// ...
const nodes: SceneNode[] = [];
for (let i = 0; i < numberOfRectangles; i++) {
// const rect = figma.createRectangle();
const node = figma.command === 'rectangle' ? figma.createRectangle() : figma.createEllipse()
// ...
}
コードをコンパイルしたらもう一度Draftのメニューから実行してみます。
Pulgins > Development と掘っていくと先ほど追加したCreate Circle、Create Rectangleが追加されています。それぞれ実行すると異なる図形が描画されました。
おわりに
入力がいらないプラグインであれば結構簡単に作れそうです。
今回は選択しなかった With UIなプラグインについても公式のサンプルがいくつかあります。プラグインのUI構築にvueを使用するサンプルもあるので、次はこれを使って実際に何か機能を持ったプラグインを作成してみたいと思います。