<p>みなさん、Figmaはどのくらい使いこなせていますか？<br>
日々進化しているFigmaですが、新しくアップデートで加わった「バリアブル（variable）」という機能について詳しく解説します！</p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>このページで紹介するクリックアクションに「バリアブルを設定する」と「条件付きアクション」を適用するのは有料プランのみで利用可能になっています。</p>
</div></aside>
<h2 id="%E3%83%90%E3%83%AA%E3%82%A2%E3%83%96%E3%83%AB%EF%BC%88variable%EF%BC%89%E3%81%A8%E3%81%AF">
<a class="header-anchor-link" href="#%E3%83%90%E3%83%AA%E3%82%A2%E3%83%96%E3%83%AB%EF%BC%88variable%EF%BC%89%E3%81%A8%E3%81%AF" aria-hidden="true"></a> バリアブル（variable）とは</h2>
<p>バリアブル（variable）とは、編集可能な定義で、色や数字、文字列などの要素を保存しておける箱のようなものです。<br>
プログラムでいう「変数」と同じです。</p>
<p>Figmaでは、バリアブルとして設定できる属性は以下の4種類になります。</p>
<ul>
<li>カラー</li>
<li>数値</li>
<li>文字列</li>
<li>ブーリアン</li>
</ul>
<p>それぞれどういった属性なのか？をまずは解説していきます。</p>
<h3 id="%E3%82%AB%E3%83%A9%E3%83%BC">
<a class="header-anchor-link" href="#%E3%82%AB%E3%83%A9%E3%83%BC" aria-hidden="true"></a> カラー</h3>
<p>色の数値（Hex値）を保存できます。<br>
塗りやストロークに適用できます。</p>
<h3 id="%E6%95%B0%E5%80%A4">
<a class="header-anchor-link" href="#%E6%95%B0%E5%80%A4" aria-hidden="true"></a> 数値</h3>
<p>数値を保存できます。<br>
横幅や高さ、マージンやパディング、角丸などの数値に適用できます。</p>
<h3 id="%E6%96%87%E5%AD%97%E5%88%97">
<a class="header-anchor-link" href="#%E6%96%87%E5%AD%97%E5%88%97" aria-hidden="true"></a> 文字列</h3>
<p>文字列を保存できます。<br>
テキストレイヤーやバリアント(variant）に適用できます。</p>
<h3 id="%E3%83%96%E3%83%BC%E3%83%AA%E3%82%A2%E3%83%B3">
<a class="header-anchor-link" href="#%E3%83%96%E3%83%BC%E3%83%AA%E3%82%A2%E3%83%B3" aria-hidden="true"></a> ブーリアン</h3>
<p><code>true</code>もしくは<code>false</code>の値を保存できます。<br>
レイヤーの表示・非表示、true・falseを持つバリアントに適用できます。</p>
<h2 id="%E3%83%90%E3%83%AA%E3%82%A2%E3%83%B3%E3%83%88%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%A2%E3%83%83%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E3%83%90%E3%83%AA%E3%82%A2%E3%83%B3%E3%83%88%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%A2%E3%83%83%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B" aria-hidden="true"></a> バリアントを使ってモックアップを作成する</h2>
<p>それでは早速バリアントを使ってモックアップを作成していきます。<br>
今回は簡単なラジオボタンを作成したいと思います。</p>
<h3 id="1.%E3%83%A9%E3%82%B8%E3%82%AA%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#1.%E3%83%A9%E3%82%B8%E3%82%AA%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B" aria-hidden="true"></a> 1.ラジオボタンのコンポーネントを作成する</h3>
<p><img src="https://storage.googleapis.com/zenn-user-upload/9100d85b51c4-20231220.png" loading="lazy" class="md-img"><br>
選択されている状態と選択されていない状態のラジオボタンを作成し、プロパティを作成します。<br>
ここで必ず選択された状態を「true」、選択されていない状態を「false」になるように値を設定します。</p>
<h3 id="2.%E3%83%90%E3%83%AA%E3%82%A2%E3%83%96%E3%83%AB%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%80%81%E5%80%A4%E3%82%92%E4%BF%9D%E5%AD%98%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#2.%E3%83%90%E3%83%AA%E3%82%A2%E3%83%96%E3%83%AB%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%80%81%E5%80%A4%E3%82%92%E4%BF%9D%E5%AD%98%E3%81%99%E3%82%8B" aria-hidden="true"></a> 2.バリアブルを作成し、値を保存する</h3>
<p>ファイルを開き、何も選択していない状態で右側のパネルの「ローカルバリアブル」をクリックします。<br>
これがバリアブルを設定するパネルになります。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/a6d81f74c0e4-20231220.png" loading="lazy" class="md-img"></p>
<p>「バリアブルを作成」のボタンをクリックし、「ブーリアン」を選択します。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/07fe94aa09cd-20231220.png" loading="lazy" class="md-img"></p>
<p>名前を「ラジオボタン1」など適当に入力し、トグルボタンの初期値を「false」に設定します。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/e773b33aa974-20231220.png" loading="lazy" class="md-img"></p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>必ずラジオボタンの個数分バリアブルを作成してください。<br>
ラジオボタンが3個ならバリアブルを3個作成します。</p>
</div></aside>
<h3 id="3.%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E3%83%A9%E3%82%B8%E3%82%AA%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%A4%87%E8%A3%BD%E3%81%97%E3%80%81%E3%83%90%E3%83%AA%E3%82%A2%E3%83%96%E3%83%AB%E3%82%92%E5%89%B2%E3%82%8A%E5%BD%93%E3%81%A6%E3%82%8B">
<a class="header-anchor-link" href="#3.%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E3%83%A9%E3%82%B8%E3%82%AA%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%A4%87%E8%A3%BD%E3%81%97%E3%80%81%E3%83%90%E3%83%AA%E3%82%A2%E3%83%96%E3%83%AB%E3%82%92%E5%89%B2%E3%82%8A%E5%BD%93%E3%81%A6%E3%82%8B" aria-hidden="true"></a> 3.作成したラジオボタンを複製し、バリアブルを割り当てる</h3>
<p>1の工程で作成したラジオボタンを複数個キャンバスに配置します。<br>
ラジオボタンを1つ選択した状態で右側のパネルを見ると、先ほど設定したプロパティがあります。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/d2bae6e5790e-20231220.png" loading="lazy" class="md-img"></p>
<p>カーソルを持っていくと「バリアブルの割り当て」と表示されるので、<br>
これをクリックして表示されるバリアブル一覧から適当なバリアブルを選択し、割り当てます。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/650cc8c851a6-20231220.png" loading="lazy" class="md-img"></p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>すべてのラジオボタンにそれぞれ3の工程で個数分作成したバリアブルを割り当ててください。</p>
</div></aside>
<h3 id="4.%E3%83%A9%E3%82%B8%E3%82%AA%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AB%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#4.%E3%83%A9%E3%82%B8%E3%82%AA%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AB%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B" aria-hidden="true"></a> 4.ラジオボタンにクリックイベントを設定する</h3>
<p>ラジオボタンの特性として、複数あるうちの1つしか選択できないというものがあります。<br>
なので「任意のラジオボタンを選択（クリック）すると、他のものがfalseになる」という状態を作っていきます。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/7c4194b4944b-20231220.png" loading="lazy" class="md-img"></p>
<h4 id="4-1.%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E3%83%A2%E3%83%BC%E3%83%89%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#4-1.%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E3%83%A2%E3%83%BC%E3%83%89%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B" aria-hidden="true"></a> 4-1.プロトタイプモードに変更する</h4>
<p>右のパネルからデザインモードからプロトタイプモードへ変更します。<br>
任意のラジオボタンを選択し、右のパネルの「インタラクション」を新しく設定します。<br>
デフォルトでは「クリック時」が選択され、挙動が「なし」になっています。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/54ea6a62e80f-20231220.png" loading="lazy" class="md-img"></p>
<h4 id="4-2.%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%81%95%E3%82%8C%E3%81%9F%E3%83%A9%E3%82%B8%E3%82%AA%E3%83%9C%E3%82%BF%E3%83%B3%E4%BB%A5%E5%A4%96%E3%82%92false%E3%81%AB%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#4-2.%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%81%95%E3%82%8C%E3%81%9F%E3%83%A9%E3%82%B8%E3%82%AA%E3%83%9C%E3%82%BF%E3%83%B3%E4%BB%A5%E5%A4%96%E3%82%92false%E3%81%AB%E3%81%99%E3%82%8B" aria-hidden="true"></a> 4-2.クリックされたラジオボタン以外をfalseにする</h4>
<p>挙動の「バリアブルを設定」で今回設定するラジオボタン以外のものに割り当てたバリアブルを<code>to False</code>にします。<br>
今回はラジオボタン1のクリックした時の設定なので、ラジオボタン2とラジオボタン3を<code>to False</code>に設定しています。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/c8b6a813cc34-20231221.png" loading="lazy" class="md-img"></p>
<h4 id="4-3.%E3%80%8C%E6%AC%A1%E3%81%AB%E5%A4%89%E6%9B%B4%E3%80%8D%E3%81%A7%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%82%92true%E3%81%AB%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#4-3.%E3%80%8C%E6%AC%A1%E3%81%AB%E5%A4%89%E6%9B%B4%E3%80%8D%E3%81%A7%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%82%92true%E3%81%AB%E3%81%99%E3%82%8B" aria-hidden="true"></a> 4-3.「次に変更」でプロパティをtrueにする</h4>
<p>選択したときにラジオボタンがtrueになるようにプロパティを設定します。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/5484b85483d7-20231221.png" loading="lazy" class="md-img"></p>
<p>これを残りのラジオボタンにも適用してあげることで、ラジオボタンのモックアップが完成です！<br>
<img src="https://storage.googleapis.com/zenn-user-upload/a3ee95cbb916-20231220.gif" loading="lazy" class="md-img"><br>
<img src="https://storage.googleapis.com/zenn-user-upload/8432c31eb90e-20231221.png" loading="lazy" class="md-img"><br>
<em>バリアントを使うことでプロトタイプを管理しやすく、完成度の高いデザインにすることができます</em></p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<p>バリアントを活用してモックアップを作成することで、煩雑になりがちなコンポーネントを省略でき、管理しやすいデータにすることができます！<br>
<img src="https://storage.googleapis.com/zenn-user-upload/617e870cd7de-20231220.png" loading="lazy" class="md-img"><br>
<em>スパゲッティになりがちなプロトタイプ</em></p>
<p>他にも、バリアントにはいろいろな値を保存できるため、これ以外にも、</p>
<ul>
<li>カラーバリエーションの管理</li>
<li>ECサイトにおけるカート内での数量変更のモックアップ</li>
</ul>
<p>などなど、いろいろな場面で使用することができます。</p>
<p>いかがでしたでしょうか？<br>
ひとつひとつボタンに対してアクションを設定するのが少々手間ですが、<br>
今後アクションをコピーできる等の新しいアップデートが来ることを期待します！</p>


Figmaの新機能：バリアブルの使い方を詳しく解説します！

1.ラジオボタンのコンポーネントを作成する

2.バリアブルを作成し、値を保存する

3.作成したラジオボタンを複製し、バリアブルを割り当てる

Discussion