Figmaの「バリアブル機能」を使ってリアルなECサイトを作ってみる
こんにちは！メグリアのUIデザイナーの石井です。
Figmaユーザーの皆さんはFigmaの新機能に触れてみましたか？今夏2023年6月21‐22日にConfig 2023が3年ぶりに開催され、Figmaの大幅なアップデートが発表されました。
主なアップデート内容
・バリアブル機能
・高度なプロトタイピング機能
・開発者モード
・オートレイアウトやフォントピッカーなどの既存のアップデート
既存機能のアップデートであるオートレイアウトやフォントの選定など、やっとキター！という思いで早速恩恵を受けることができました。
ところで、バリアブル機能ってなに？
中でも話題を呼んでいる「バリアブル機能」。実際どうやって使用するの？と少し敷居の高さを感じますよね。
バリアブル機能とは、Variable＝変数とある通り、デザイン属性または状態「数値、文字列、色、ブール値」を保存しておくことができる機能です。非常にフロントエンドに寄り添った使い方をすることができます。
バリアブル機能は具体的に、
色やサイズ、角丸などを管理して精度の高いデザインシステムを作成
ダークモード・ライトモードの切り替えなど、同デザインのパターン作成
プロトタイプ機能と組み合わせてよりリアルな挙動を表現
などに活用することができます。
今回は学習がてら、バリアブル機能とアップデートされたプロトタイピング機能を組み合わせ、カート機能のプロトタイプを作成してみました。新機能の使い方を理解することをゴールに作成プロセスをご紹介します。「難しそう、でも便利そう」なバリアブル機能のご理解にお役に立つと幸いです🎉
デザインした内容はこちら
こんな感じで、高度なプロトタイピングを作成することが可能になりました。以前であれば、表示したい画面数に応じてデザインを用意しなくてはいけなかったところ、バリアントを活用することで最小限のデザインレイヤーで本物らしく見せることができます。
今回作成した機能はこちらです。
・モードの切替
・商品数と金額の加减を連動
・限値を超えるとアラートを表示
これらの挙動を以下のデザインから動かしてみます。
モードの切り替え
複数のモードを持つことで、1つのレイヤー上で切り替えが可能です。手順はいくつかあるかと思いますが、今回設定した方法をご紹介します。
💡学べること
・基本のバリアブル機能の使い方
・バリアブル機能「カラー」
⚠注意：モードの切替はプロフェッショナルプラン以上の契約で使用可能です。スタータープラン（無料）では1つのモードしか持てません。
①バリアブルを作成する
キャンバス上で何も選択していない状態もしくはEscを押し、右サイドバーから「ローカルバリアブル」を開きます。「バリアブルを作成」をから「カラー」を押下してカラーのバリアブルを追加していきます。
今回は「カラー」を追加
デザインに合わせてバリアブルのカラーを追加していきます。各カラーはグルーピングしておくと階層化され管理しやすくなり便利です。
②作成したバリアブルを各カラーを適用する
各パーツのカラーに設定したバリアブルを適用していきます。こちらは従来のスタイル適用と同じ流れです。
③ダークモード用のバリアブルを追加していく
まず、「＋」から新しいバリアブルモードを追加します。
モード名は「ダークモード」に変更しておきます。
次に、バリアブルの適用が完了しているデザインを複製します。バリアブルモードを複数持っている状態でレイヤーをクリックするとモードの切替が可能になるので、今から新しくカラーを指定するモードに切り替えます。
レイヤーを予めダークモードに切り替えておくことで、カラーを反映させながら指定することが可能になります。すべて定義すると以下のような状態になります。
カラーをすべて適用できたらダークモードVer.のデザインが完成します。
以上で完了です！
最後にプレビュー用にスイッチを作成し、切り替え風の挙動にしています。（簡易的なプレビューは ⌘+Space で表示できます。）
商品数と金額の加减を連動
値にバリアントを適用して条件分岐を書くことで、今まで表現できなかった加算などの柔軟なインタラクションの作成が可能になりました。
💡学べること
・バリアブル機能「数値」
・バリアブルを使ったプロトタイピングの設定
①バリアブルを作成する
カウントにするために、バリアブル「数値」を用意します。
今回変数化する必要がある数値は、
①商品数
②商品単体の合計金額
③合計金額
の3箇所です。
それぞれのデフォルト値で作成します。
②作成したバリアブルを各数値に適用する
前述の要領で、作成したバリアブルを適用していきます。テキストを選択し、必要な数値すべてに適用します。
③プロトタイピングを作成する
ここからのインタラクションの設定で、少しプログラミング的な考え方が必要になります。以下、３つのアクションを設定していきます。
【アクション 1/3】「＋」を押下すると商品数を追加する
インタラクションの「クリック」を追加し、「バリアブルを設定」を選択します。
バリアブル「数値」は計算式の入力が可能になるので、次のように設定します。
①Addition(＋)を選択する
②追加したい値「1」を入力する
以上で、「＋」をクリックすると商品数が追加される機能が完成です。挙動を確認したい場合はプレビュー（⌘+Space）を開いておき都度動かしてみましょう。
【アクション 2/3】「ー」を押下すると商品数が減少する
インタラクションの「クリック」を追加し、「条件付きアクション」を選択します。
ここから条件分岐を書いていきます。まさかのif文登場です😲
普段、静的コーディングがメインである自分は最初目にした時ぎょっとしました、、、が実際に操作してみると適用可能な演算子を誘導してくれるのでスムーズに書くことがきます。現状はそこまで機能が多くないためシンプルです。
演算子（プログラミングにおいて値の計算や比較、代入などをするために用いる記号）を使用して記述します。見慣れない方は、演算子の記号について調べるとすぐに出てくるので調べながら使用してみてください🙆♀
こちらで設定するインタラクションは、「ー」をクリックすると商品数を減らしていく指定と0以下にはならない指定です。内容は以下の通りに入力していきます。
①条件を追加する
条件付きアクションの設定から[itemCount]（商品数のバリアブル）を選択し、!= 0(Not equal to) を入力
②バリアブルを設定して実行内容を書く
[itemCount]を選択し、 [itemCount] ‐ 1 を入力
【アクション 3/3】 商品数の加减と金額を増減を連動させる
ここまで設定してきた商品数の加减のインタラクションに金額の増減が連動される設定を追加していきます。これまでの方法で記述しましょう。
以上、商品数と金額の加减を連動する設定する方法でした。
各商品の数値を変数化しておくと、すべて変数のみで計算が完結できたりとさらに汎用的になりますが、最低限の仕様を共有するという意味ではこの程度の設定でも問題ないかと思います。
上限値を超えるとアラートを表示
条件を満たすと表示されるアクションを、バリアブル「ブーリアン」とプロトタイプを組み合わせて作成することができます。仕様通りの動きを忠実に表現できるのでスマートに共有できそうです！
💡学べること
・バリアブル機能「ブーリアン」
・バリアブルを使ったプロトタイピングの設定
①バリアブルを作成する
アラートの表示 / 非表示に使うブール値を用意します。
バリアブル「ブーリアン」を追加。今回のアラートはデフォルトだと非表示なので「False」に設定します。
アラートに使用するので、名前をalertにしておきます。
②作成したバリアントをパーツに適用する
デザインパーツを表示したい位置に用意します。レイヤー「目のマーク」を右クリックすると、バリアントの設定値が表示されるので、先程設定したブーリアンを適用します。
（右クリックで表示なので最初は戸惑いますが、ゆくゆくのアップデートでもう少しわかりやすくなるでしょうか…！）
②インタラクションを設定する
「条件に応じて表示する」ためのインタラクションを追加します。今回指定するアクションはこちらです。
商品数を「6」以上追加したらアラートを表示
商品数が「5」以下になると非表示
まずは、商品数を「6」以上追加したらalertを表示するというインタラクションを設定するので、前述商品数と金額の加减を連動で既に設定した「＋」を使います。内容は以下の通りです。
①条件を追加する
条件付きアクションの設定から[itemCount]（商品数のバリアブル）を選択し、>= 6 を入力
②バリアブルを設定して実行内容を書く
[alert]を選択し、 trueを指定
最後に、商品数が「5」以下になると非表示にするアクションを追加します。5以下になる状態は「ー」をクリックしている時に起きるので、「ー」にアクション内容を追加していきましょう。
以上で、アラートの表示/非表示の設定が完了です！
まずは色とサイズを変数化すればいい
長々とバリアブルの活用方法を記述してきましたが、ここまでバリアブルを作成してインタラクションを設定して、、、と駆使して共有することはかえって工数もかかりますし、毎度は難しいですよね。
まずは、今までデザインシステムで作成していた Color / HeightやWidthのmin max / Spacing / Radius / Border あたりを変数化することが現実的かと思います。
備えあれば憂いなし👍ということで、こんな感じなことができるんだと知識として蓄えておき、適所で活用できるといいですね。
ご参考いただけると嬉しいです！長くなりましたがご拝読ありがとうございました！
Ayano / UIデザイナー
1995年生まれ大阪出身、2021年メグリア入社。趣味は食べ歩きと美術館巡りと美容。週3回以上食べ歩く中、最近リピートしているお店は「カンティーナ カーリカ・リ」🍷