デザイナーがFigmaプラグインをつくってみた！という内容です。
選択したフレーム群を、命名規則のもと自動的にリネームする機能を開発しました。
なぜFigmaプラグイン？
自分でやってみて、デザイナーがJavaScriptに入門するならFigmaプラグイン開発はおすすめなのではと思いました。
- 自身が一番のユーザーであり、確かなペインがある
- ゴールを単一機能の実現に絞れる
- UIで触っているものをコードからも触るので、既知である
動機
JSフレームワークを理解したく、そのためにJavaScriptを学びたい。だけど入門書を読むと、概念理解が追いつかず途中で詰まってしまう。つまり書かないと進めない、でも書けない、困った…。
という状況からなかなか抜けられませんでした。
でもある時なにげなくFigma Plugin APIの公式ドキュメントを眺めたら、部分的に分かるところがありました。小さな可能性の発見！つまみ読みしてきた入門書も役に立っているのです。
ChatGPTを傍らに、具体的に書いてみようと思い立ちました。
ゴール設定
取り扱うペインを以下にしました。
「Auto layoutのためにレイヤー名を管理するのは面倒だ :-( 」
- レイアウト都合で変動するフレーム名は儚い存在
- 繰り返し打ち込む同じ綴り
- 一度名付けはじめると、整っていないと気持ちわるい
いにしえのPhotoshop時代を思い出す作業が苦痛でした。機能名はFigmaのコンポーネントとして定義するのでよく。それ以外の「header, main, sub, container, item, row, col, label...」をなんとかできないか。
セマンティックな名前は内容を踏まえる必要があるけど、レイアウトならレイヤー構成やAuto layoutの設定からパターン化できそうです。
レイアウトパターンの定義
レイアウトプリミティブやTailwind CSSを念頭に置きつつ、次のようなパターンとしました。
- wrapper：画面デザインの外枠
- container：最大幅がありセンタリングされたフレーム
- grid：3つ以上の同幅アイテムをもつフレーム
- cell：gridの子フレーム
- center：単一アイテムをセンタリングするフレーム
- row：横並びのAuto layout
- col：rowの子フレーム
- wrap：折り返しのAuto layout
- stack：縦積みのAuto layout
処理の流れ
-
figma.currentPage.selectionで選択ノードから、FrameNodeを取り出す。選択ノードに子がある場合はfindAllWithCriteria()でサブツリー内からも取り出す - ユーザーが命名（命名規則で定めた名前以外）した
FrameNodeは対象から外す - 対象ノードを順に条件と照らし合わせて、名前を上書きする
いたってシンプルなコードとなりました。
開発してみて
JavaScriptを分からないなりにも、実現したい処理を切り分けてChatGPTに問い掛ければ、なんとかなるものだと思いました。自分がやりたいことを具体的なコードで示してくれるので分かりやすいし、とにかく書いてみる、ができるようになりました。
ちなみにプラグインを公開すると、毎週Figmaからコミュニティレポートが届きます。「Getting a lot of love」という見出しとともに、ユーザーが何人増えたよ、などを教えてくれます。自分と同じFigmaユーザーが、世界のどこかで使ってくれているのだと思うと、とてもうれしい！
コードを書くのって楽しいですね。