Figmaで条件分岐ありのプロトタイプをつくる
UIデザイナーのkassyです。これはFigma Advent Calendar 2024の12/22の記事となります。リンク先ではFigmaに関する様々な記事がアップされていますので、よろしければ他の記事もどうぞご覧ください。
さて、Figmaにはプロトタイプ機能があります。みなさんもこれを使ってユーザーに動くものを見せたいシーンがあると思いますが、場合によっては一方通行の紙芝居ではなく、条件分岐させたプロトタイプを見せたい場合もあるかもしれません。
まさに自分がそういう事態に直面したので、その時のノウハウを備忘録的にまとめました（あくまで自己流なので、その点だけご了承ください）。
今回つくるもの
わかりやすく「TODOアプリ」をお題にして、条件分岐のさせ方を解説してみます。まずはやりたいことの整理です。
やりたいこと
タスクをチェックしたら完了。完了したタスクはデフォルトでは非表示になる
トグルをONにするとすべてのタスクが表示される
完了したタスクを再度チェックすると未完了の状態に戻せる
やりたいことはシンプルですが、いざ作ろうと思うと意外に考慮することが多かったりします。
考慮すべき点
トグルを操作したらリストも合わせて変化する、といった２つのコンポーネントを連動させる必要がある
リストごとに未完了なのか完了済みなのか状態が異なるので、それを個別に管理する必要がある
トグルのON/OFFを繰り返しできるようにループさせる必要がある…etc.
そのあたりを制御できるように作ってみました。
作成手順
1. コンポーネントの用意
まずは土台となるコンポーネントを作っていきます。今回はシンプルなTODOアプリなので、必要なコンポーネントは下記の２つとなります。
リスト
シンプルなリストのコンポーネントを用意します。
今回は未完了と完了済みの２つの状態が必要となります。
トグル
トグルスイッチもよくあるシンプルなコンポーネントを用意します。
今回はトグルの中に0という数字を入れます。これが後工程で大事になってくるので忘れずに入れてください。
2. variablesの用意
コンポーネントが作成できたら今度はvariablesの用意です。
Figmaの右パネルの「Local variables」からvariablesは作成できます。
今回のプロトタイプで必要なのは下記の3つです。
list
Boolean型のvariablesでつくります。
未完了のタスクを管理するためのものです。
ValueはTrueにしてください。list_done
Boolean型のvariablesでつくります。
完了済みのタスクを管理するためのものです。
ValueはTrueにしてください。count
Number型のvariablesでつくります。
トグルの状態を管理するためのものです。
Valueは0にしてください。
3. コンポーネントにvariablesを適用
1でつくったコンポーネントに対して、2でつくったvariablesを設定していきます。
まずは「list」と「list_done」です。
どこで指定すんねん、という話なのですが、いまのFigmaはここがちょっと分かりづらいです。Figmaの右パネルのAppearanceのセクションにある目玉アイコンの上にカーソルを合わせて、Ctrlキーを押しながらクリックすると先ほど定義したvariablesを選択できるメニューが出現します。
コンポーネントを選択した状態で目玉アイコンの上で上記の作業をすればvariablesを指定できるので、未完了のコンポーネントには「list」を、完了済みのコンポーネントには「list_done」を設定しましょう。
次にもう一つの「count」ですが、こちらは文字に対してvariablesを定義したいので、設定場所が異なります。Figmaの右パネルのTextセクションで、数字が表示されているエリアへカーソルを近づけると先程の目玉とはまた違うアイコンが出現します。
コンポーネントを選択した状態で上記アイコンをクリックすればvariablesを指定できるので、トグルのON／OFFの数字に対してそれぞれ「count」を設定しましょう。
4. 条件分岐の指示を書く
いよいよ条件分岐の指示を書いていきます。
トグル
まずはトグルです。
コンポーネントに対してそれぞれ指示を書いていきます。
トグルをOFFからONにする動きに対しては下記の指定を書きます。
トグルをONからOFFにする動きに対しては下記の指定を書きます。
まず、Valueをfalseにすると指示についてですが、実はFigmaではコンポーネントに対してboolean型のvariablesを設定するとtrueで表示、falseで非表示という制御ができます。今回は完了済みのコンポーネントにboolean型のvariables（list_done）を適用しているので、条件に応じた表示／非表示ができるようになっています。
また、トグルに設定している「count（初期値：0）」に対して+1と-1をする指示を入れることで、countの数値が0なのか1なのかでトグルの状態が確認できるようにしています。
指示内容を日本語で言うなら下記のような感じでしょうか
OFF→ONの場合
・クリックしたらトグルをONにせよ
・variables「list_done」を表示せよ
・variables「count」の値に＋1せよ（つまりcount=1）
ON→OFFの場合
・クリックしたらトグルをOFFにせよ
・variables「list_done」を非表示にせよ
・variables「count」の値に-1せよ（つまりcount=0）
リスト
次にリストです。
未完了のコンポーネントを選択して指示を書いていきます。
順を追って説明していきます。
一行目の「==」はプログラミング言語で比較を意味する演算子です。
二行目ではコンポーネントを差し替える指示をしています。
三行目では先ほどと同じようにコンポーネントを表示／非表示する指示をしています。
指示内容を日本語で言うなら下記のような感じでしょうか。
クリックした時に
もしcountの値が0ならば、
・まず完了済みのコンポーネントを変換せよ
・次にvariables「list_done」のコンポーネントを非表示にせよ
クリックした時に
もしcountの値が1ならば、
・まず完了済みのコンポーネントへ変換せよ
・次にvariables「list_done」のコンポーネントを表示せよ
ちなみに「list」には特に言及していませんが、未完了のコンポーネントに対してきちんと「list」を指定していないと上記の動きが実現できないので、裏側ではとても重要な働きをしています。
最後に、完了済みのタスクをクリックすると未完了に戻るという挙動も必要なので、忘れずにこの指示も追加します。
これで諸々の準備が整いました。
5. コンポーネントを並べる
要素を並べてTODOアプリの外観をつくります。
6. 完成！
プロトタイプのプレビュー機能でちゃんと動くのか触ってみましょう。
まとめ
というわけで条件分岐がある場合のプロトタイプのつくりかたの解説でした。今回はわかりやすく説明するためにトグルの数字を出しっぱなしにしていますが、数字を非表示しても問題なく動作するのでご安心ください。
ただ、プロトタイプについていろいろ解説してきましたが、プロトタイプで頑張るよりも実装しちゃったほうが早い場合もあると大いにあると思います。あるいは口頭で説明すれば事足る場合も大いにあると思います。
あくまでプロトタイプはプロトタイプと割り切ってつき合っていくのが大事だと思います。