Figmaのプラグインとスプレッドシートを使った画面管理方法

こんにちは🌿
BrewusのUIデザイナー、bellです。

数ヶ月前、大きめのプロジェクトに関わることになり、デバイス違いや状態違いを含めて1000を超える画面をFigmaで作ることに。

複数のファイルやページにまたがった画面の把握や、命名ルールに則った画面名になっているかの確認は、Figmaだけでは難易度が高いと感じていたところに弊社エンジニアさんからFigmaプラグインを作ったとの情報が。

Multi Renamer | Figma Community

↓誕生秘話(?)はこちら

これは使うしかない…！
スプレッドシートで画面名を一覧化して命名、それをFigmaに反映させることにしました。

ということで今回は、Figmaプラグイン「Multi Renemer」とスプレッドシートを使った画面管理方法をお伝えします。

00 | 事前準備

事前に画面の命名ルールを決めておきます。
今回の構成はこんなかんじ。

01 | Figmaで画面作成

まず、Figmaで画面を作成します。
今回は以下の4画面を用意しました。

画面名は適当につけておきます。

02 | スプレッドシートの用意

以下のようにスプレッドシートを用意します。

IDはID(大)とID(小)の合算値、かつ必ず4桁になるようにしたいので、A2に次の関数を入れます。オートフィルでA列最下部まで関数を追加します。

=TEXT($C2+$D2, "0000")

「表示形式 > 数字」が「自動」になっているとE列に入れる数列が謎の文字列に化けてしまうことがあるため、
「表示形式 > 数字」を開き、「書式なしテキスト」を指定しておきます。

03 | Multi Renemer で画面名を取得

 Figmaでプラグイン「Multi Renemer」を立ち上げます。
出力したい画面を選択し、「Get List」をクリック。

取得した文字列全体をコピーします。

04 | コピーした文字列を貼り付ける

コピーした文字列をスプレッドシートのE,F列に貼り付けます。

05 | 変更したい画面名を入力する

説明、ID(大)、ID(小)を埋めます。

画面名はIDと説明を_（アンダーバー）で繋いだものに置き換えたいので、F2に次の関数を入れます。オートフィルでF列最下部まで関数を追加します。

=$A2&"_"&$B2

すると、画面名が反映されます。

Figmaに反映させたい画面のE,F列をコピーします。

06 | Figmaの画面名を置き換える

Figmaに戻って、Multi Renemer にコピーした文字列を貼り付けます。

変換したい画面のタイプを確認して「Rename」をクリック。
今回はコンポーネントとフレームを置き換えたいので、フレームを置き換えた後、コンポーネントを置き換えました。

画面名が変わりました！

07 | 運用する

ここまで出来たら、あとはこれをプロジェクトに合わせて運用していきます。

Figmaで画面を作成したらスプレッドシートの行を追加し、プラグインでUIDを取得してスプレッドシートに貼り付け。命名ルールに従って画面名を記載したらFigmaに反映、という流れを繰り返します。

実際のプロジェクトでは、スプレッドシートの列にステータスや更新日を追加して絞り込めるようにしていました。

Figmaでもステータスがわかるようにプラグイン「Status Changer」を使ったり。

Status Changer | Figma Community

注意点 | Figmaの画面UIDを極力変えないようにする

スプレッドシートに記載したUIDが変わってしまうと、プラグインでUIDを取得し直してスプレッドシートに貼る、という若干面倒くさい作業が発生してしまいます。
なので、スプレッドシートにUIDを記載したらなるべくUIDが変わらないようにします。とはいえ、完全回避は難しいのでどうしたらUIDが変わってしまうのか把握しておきましょう。

Ⅰ. 差し替えは画面まるごとではなく、画面内要素を差し替える

別ページなどでデザイン案を作成し、確定したものを本番用画面に差し替えるときがあると思います。
そのとき、画面ごと置き換え（⇧⌘R）てしまうとUIDが変わってしまうので、フレームは残しつつ中の要素を全て削除して（差し替えたい画面を選択し、Enterキーを押すと1階層下の要素が全選択されます）、新しいデザインをまるごと入れるようにしています。

Ⅱ. ページ間移動は「Move to page」

コピー（⌘C）&ペースト（⌘V）でUIDが新しく発行されるのはもちろん、カット（⌘X）&ペースト（⌘V）でもUIDが変わってしまいます。
ページをまたいで画面を移動させる時は「Move to page」を利用するとUIDが変わりません。

Ⅲ. FrameからComponentにするとUIDが変わる

FrameからComponent、FrameからSectionなど、オブジェクトのタイプが変わるとUIDも変わります。これはどうしようもないので、UIDが変わることを覚えておきましょう。

応用編 | スプレッドシートの画面名をリンク化する

FigmaのオブジェクトURLは以下のような構成になっています（URLの頭から"node-id="までを[A]とします）。

そう、UIDさえわかれば自動生成が可能なのです。
ということで、スプレッドシートの画面名をリンク化させてみましょう。

Ⅰ. HYPERLINK関数を使ってリンク化

まず、Figmaで任意のオブジェクトを右クリックして「Copy link」を選択。URLを取得します（メモなどに貼り付けておくと便利）。

スプレッドシートに1列追加します。E,F列はこの並びがコピペしやすいので、G列を追加。

UIDの「:」を 「-」に変更したいので、G2に次の関数を入れます。オートフィルでG列最下部まで関数を追加します。

=SUBSTITUTE($E2, ":", "-")

こんなかんじ。

画面名をリンクにしたいので、F2に次の関数を入れます。オートフィルでF列最下部まで関数を追加します。

=HYPERLINK("[A]"&$G2, $A2&"_"&$B2)

これでリンク化できました！
G列は文字列変換のためだけに使用しているので、非表示にしても大丈夫です。

Ⅱ. IF関数を使ってもっと便利に

UIDが正しく設定されていないとリンク先に飛べませんが、このままだとすべての画面名がリンク化してしまいます。

そこで、E列に文字が入力されているときだけリンク化するよう、F2に次の関数を入れます。オートフィルでF列最下部まで関数を追加します。

=IF($E2="", $A2&"_"&$B2, HYPERLINK("[A]"&$G2, $A2&"_"&$B2))

これで完成です！

スプレッドシートのテキストリンクは、Slackにそのままコピペで持っていけるので、デザイン更新した画面をサクッと共有することができるようになりました。
そもそもViewerだとオブジェクト選択からの右クリックが効かないので、これがあるとリンク共有がとても便利です。