UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Figma】JavaScriptでFigmaを操作する

JSConf2024で@hilokiさんのセッション「You Don’t Know Figma Yet」を聞いた

https://www.figma.com/community/file/1441988131613308209/you-dont-know-figma-yet

まず「Command + Alt + I」でインスペクタウインドウの表示/非表示を切り替えができることを知った

consoleに以下を入力すると矩形オブジェクトが作成される

const rect = figma.createRectangle();
rect.resize(320, 480);

勝手を知っているJavaScriptで操作できることがわかったので、Figmaプラグインを作れそうではあるが、毎回 console でコピペして実行するのは大変である

そこで、Scripterというプラグインを使うのがおすすめされたので入れてみる

https://www.figma.com/community/plugin/757836922707087381/scripter

プラグインを起動すると、デフォルトでいくつか機能が用意されいた

Create reactanglesを実行してみると、オレンジ色の5つの矩形オブジェクトが作成された

他のプラグインサンプルが以下にまとまっているそうなので、今度作ってみたい

github.com