はじめに
この記事はユニークビジョン株式会社 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を使用するサンプルもあるので、次はこれを使って実際に何か機能を持ったプラグインを作成してみたいと思います。