みなさん、Figmaはどのくらい使いこなせていますか？
日々進化しているFigmaですが、新しくアップデートで加わった「バリアブル（variable）」という機能について詳しく解説します！
バリアブル（variable）とは
バリアブル（variable）とは、編集可能な定義で、色や数字、文字列などの要素を保存しておける箱のようなものです。
プログラムでいう「変数」と同じです。
Figmaでは、バリアブルとして設定できる属性は以下の4種類になります。
- カラー
- 数値
- 文字列
- ブーリアン
それぞれどういった属性なのか？をまずは解説していきます。
カラー
色の数値（Hex値）を保存できます。
塗りやストロークに適用できます。
数値
数値を保存できます。
横幅や高さ、マージンやパディング、角丸などの数値に適用できます。
文字列
文字列を保存できます。
テキストレイヤーやバリアント(variant）に適用できます。
ブーリアン
trueもしくはfalseの値を保存できます。
レイヤーの表示・非表示、true・falseを持つバリアントに適用できます。
バリアントを使ってモックアップを作成する
それでは早速バリアントを使ってモックアップを作成していきます。
今回は簡単なラジオボタンを作成したいと思います。
1.ラジオボタンのコンポーネントを作成する
選択されている状態と選択されていない状態のラジオボタンを作成し、プロパティを作成します。
ここで必ず選択された状態を「true」、選択されていない状態を「false」になるように値を設定します。
2.バリアブルを作成し、値を保存する
ファイルを開き、何も選択していない状態で右側のパネルの「ローカルバリアブル」をクリックします。
これがバリアブルを設定するパネルになります。
「バリアブルを作成」のボタンをクリックし、「ブーリアン」を選択します。
名前を「ラジオボタン1」など適当に入力し、トグルボタンの初期値を「false」に設定します。
3.作成したラジオボタンを複製し、バリアブルを割り当てる
1の工程で作成したラジオボタンを複数個キャンバスに配置します。
ラジオボタンを1つ選択した状態で右側のパネルを見ると、先ほど設定したプロパティがあります。
カーソルを持っていくと「バリアブルの割り当て」と表示されるので、
これをクリックして表示されるバリアブル一覧から適当なバリアブルを選択し、割り当てます。
4.ラジオボタンにクリックイベントを設定する
ラジオボタンの特性として、複数あるうちの1つしか選択できないというものがあります。
なので「任意のラジオボタンを選択（クリック）すると、他のものがfalseになる」という状態を作っていきます。
4-1.プロトタイプモードに変更する
右のパネルからデザインモードからプロトタイプモードへ変更します。
任意のラジオボタンを選択し、右のパネルの「インタラクション」を新しく設定します。
デフォルトでは「クリック時」が選択され、挙動が「なし」になっています。
4-2.クリックされたラジオボタン以外をfalseにする
挙動の「バリアブルを設定」で今回設定するラジオボタン以外のものに割り当てたバリアブルをto Falseにします。
今回はラジオボタン1のクリックした時の設定なので、ラジオボタン2とラジオボタン3をto Falseに設定しています。
4-3.「次に変更」でプロパティをtrueにする
選択したときにラジオボタンがtrueになるようにプロパティを設定します。
これを残りのラジオボタンにも適用してあげることで、ラジオボタンのモックアップが完成です！
バリアントを使うことでプロトタイプを管理しやすく、完成度の高いデザインにすることができます
まとめ
バリアントを活用してモックアップを作成することで、煩雑になりがちなコンポーネントを省略でき、管理しやすいデータにすることができます！
スパゲッティになりがちなプロトタイプ
他にも、バリアントにはいろいろな値を保存できるため、これ以外にも、
- カラーバリエーションの管理
- ECサイトにおけるカート内での数量変更のモックアップ
などなど、いろいろな場面で使用することができます。
いかがでしたでしょうか？
ひとつひとつボタンに対してアクションを設定するのが少々手間ですが、
今後アクションをコピーできる等の新しいアップデートが来ることを期待します！
Discussion