figmaでデザインとプロトタイプを並走して効率よく作れないか模索してみた

figmaでプロトタイプを作る場合、デザインを編集するページやファイルと分けて用意することがあると思います。この場合にデザインを編集しながらプロトタイプを更新する…という方法を取ると、結構うまく行かないことが多いのですよね。

デザインを修正することでプロトタイプにも
"同じ修正を施す"
”修正後のデザインに差し替える”
"遷移先を組み替える"
いずれかの作業が発生し、これが実にヒューマンエラーの温床になりやすい部分です。

あるプロジェクトで、デザイン完成後のプロトタイプ＝Hi-Fidelity Prototypeを作成しつつ、同時になんだかんだとデザイン修正する必要がありました。
デザイン完成後に修正とその反映を要望されるのは勘弁してほしいなあという所はもちろんあるあるですが、やるとなったらやるしかない。
これを両立する効率的な方法を検索してもあまり見つからなかったので、デザイン更新時にプロトタイプへの反映が楽にできないかなと模索してみました。
（このfigmaの操作画面は日本語版にしています）

①デザインをコンポーネント化してプロトタイプはインスタンスにして作ってみた

まずは各画面のデザインをコンポーネント化し、そのインスタンスでプロトタイプを作成する方法を試しました。

デザインを作成したページの画面をComponent化する

プロトタイプを作るページにはインスタンスを貼り付けて遷移を繋いでいく

メリット：
デザインを修正すると即座にインスタンスに反映されるので非常に手間がかからない

デメリット
ヘッダーフッターなどで、位置を固定化したい箇所が反映できなかった

コンポーネント化するとその内容物は固定をチェックできなくなる

そもそもパーツをコンポーネント化する指向なのだから画面全体をコンポーネントにするのには向いてないのだな…と悟った瞬間。
固定表示するものがなければ最も楽な対処法ですが、突然「ヘッダーの表示を固定にしてほしい」などの修正要望が発生すると厄介です。この手法は取らないほうが良いかもしれません。

②ヘッダーやフッターのコンポーネント自体にリンクを設定してみようとした

続いてヘッダーやフッターのコンポーネント自体にインタラクションを設定し、それをプロトタイプを組む際に当て込んでみました。

上にあるコンポーネントにインタラクションを設定すると

下の画面のインスタンスにも同じインタラクションが反映される

メリット
コンポーネント自体にインタラクションを設定しまえば、インスタンス全てに同じインタラクションが反映されるため、非常に安全かつ保守性に優れた手法になる。

デメリット
この方法は当然、コンポーネントで作っている部分のみにしか利用できない。
また、インタラクションの"次へ移動"（遷移先）を設定する場合、figmaのページを跨いでの遷移先指定ができない。

一番使うであろうインタラクションの「次に移動」は、そのページ内にしか遷移できない

コンポーネントを利用するときはコンポーネント用のページやファイルを用意して行うことが多いと思うので、この方法だと「次に移動」が使えず、実現自体が厳しいことになります。

③プロトタイプを作るページ内にコンポーネントを入れ子にしてプロトタイプ専用のコンポーネントを新しく作り、各画面に配置してみた

ライトノベル的タイトルみたいに長くなってきました。
②を応用し、コンポーネントで一括で遷移先を指定し、プロトタイプのページで反映できるような方法を考えてみました。

入れ子にするとコンポーネントページのデザインを更新時にプロトタイプページに反映される

メリット
②ではできなかった別ページへの遷移を実現できる

デメリット
インタラクション用のコンポーネントを用意する必要がある。また、この方法も、コンポーネントで作っている部分のみにしか利用できない。

プロトタイプのページに専用のプロトタイプを作ること、一括でインスタンスを入れ替える手間はそこまでかからない&リスクが少ないと感じたのでこれを方法のメインに据えました。

コンポーネントを作った後は、プロトタイプの各画面のインスタンスをforPrototypeのものに置換します。
「編集 ＞ 次のオプションで全て選択 ＞ 同じインスタンスで選択」でプロトタイプページ内のインスタンスを一括選択して、以下の方法で進めます。

「インスタンスの入れ替え」でプロトタイプ用に作ったコンポーネントを選択

インスタンスがプロトタイプ用のものに一括で入れ替わり、「次に移動」が反映されました

ざっくり考えるとこの方法のいずれかで対応できそうか？
①の方法は、画面内で固定化する要素をプロトタイプに反映できないが、それ以外の部分なら更新を反映できる。
③の方法は、コンポーネントのインスタンスで作った部分のみ、更新を反映できる。

④　①と③の方法を組み合わせてみる

ヘッダー・フッターなどのように固定化する場所 > ③
それ以外の部分そのフレームのコンテンツ > ①

メリット
殆どの部分が、デザインを修正した場合に自動的にプロトタイプが修正されるようになると思います。

デメリット
デザインとプロトタイプを作る際から事前に準備をしておく必要がある。後からこの方法に切り替えようとすると、大掛かりに手間がかかる。この方法で作ったデザインのフレーム内の構成が若干複雑になる。

予め、デザインとプロトタイプを並走して作ることがわかっている場合は有効かもしれません。逆にそこまでHi-Fidelity Prototypeが求められていない場合は、デザインの作成自体に面倒が増える可能性があります。

さいごに

どの方法がベストか？ということを決めようと思いましたが、思った以上にユースケースによるということが判明しました。
見ての通りまだまだ効率がいいとは言えないので、もしこんな効率悪いやり方しなくてももっと良いプラグインとかあるよ…？という方いたら是非教えてください。

今後、figmaのアップデートで、
①の方法でコンポーネント化した画面のインスタンスに、固定部分が反映される
②のコンポーネントにインタラクションを設定する際に別ページ・ファイルに遷移先を設定できるようになる
だけで解決するようにも思うので、アップデートされることを期待したいなあと思いました。

ちょっとニッチな作業について触れましたが、株式会社ブリューアスではUIUXデザインも行っています。デザイナーも募集中です！