Figmaで自作プラグインがつくれるみたいなので簡単に触ってみる
プラグインの仕組みは下のドキュメントを読んだ
そして、実装はこちらの記事が分かりやすかったので、これを読んでの自分用メモ
zenn.dev
バージョンが違うからか、ちょっと記事のキャプチャと始め方が違かった
私の場合は右上のここから Plugins を選択
そして、このパネルがでてくるので Create your own plugin をクリック
あとはプラグインの名前をつけて、「With UI & browser APIs」を選択する
「Empty」は manifest.json (プラグインの必須ファイル) とメインのスクリプトファイルのみが生成されます。「Run once」は UI (プラグインを起動したときに立ち上がる小さいウィンドウ) を必要としない、即実行するプラグインのテンプレート
最後にローカルにソースコードを保存する
ローカルでの作業
npm install -D typescript @figma/plugin-typings
package.jsonのscriptsに次のスクリプトを定義する
"scripts": {
"dev": "tsc -w",
...
},
そして実行
npm run dev
この状態でFigma デスクトップアプリで [Plugins] > [Development] > [プラグイン名] でプラグインを起動
でてきたウィンドウの[Create] をクリックすると、「Count」に入力された数のオレンジの正方形が作成された
わずか数分でできた
この後
このあとの野望としては @SeyaさんのFigma to React を参考に、 Figma to Code にチャレンジしたい
Figma to React Component で今後やりたいこと｜seya｜note
