バリアブルとスタイルの違い
Figmaでは、バリアブルにより機能セットを拡張しました。次のような疑問をお持ちの方もおられるでしょう: 「バリアブルとスタイルの違いは?」「この2つの使い分けは?」「スタイルは廃止されるのか?」
結局のところ、バリアブルとスタイルは表面的には同じような機能を果たしています。
- どちらも信頼できる唯一の情報源として機能します。
- どちらもチームライブラリに公開して、デザイン全体で再利用できます。
- バリアブルやスタイルを更新すると、これらを使用するすべてのデザインの更新が促されます。バリアブルとスタイルのどちらも効率的にデザインシステム管理をサポートします。
スタイルとバリアブルには重要な違いがあり、それぞれがさまざまな状況で役立ちます。
この記事では、それらの違いに焦点を当て、いずれか、または両方をデザインに使用すべき状況を説明します。
基本的な相違点
スタイルとバリアブルには、使用する値のタイプ、キャンバス上での表示、モードの使用において、いくつかの重要な違いがあります。
スタイルは以下のような、さまざまなプロパティを保存できます。
-
#FFFFFFのような塗りつぶしなど、単一の未加工の値を持つプロパティ。 - 色のグラデーションのような、未加工の値を複数持つプロパティ。
- ブレンドモード、画像、GIF、動画など、その他の形式。
スタイルは値の組み合わせを保持するように構築されており、すべての値が一度に表現されます。たとえば、フォントファミリー、フォントサイズ、フォントの太さのプロパティを1つのテキストスタイルに同時に保存できます。テキストレイヤーにテキストスタイルを適用すると、すべてのプロパティがテキストレイヤーで同時に使用されます。
もう一つの例として、さまざまな塗りタイプとバリアブルを組み合わせ、上下に重ねて整理されているカラースタイルを見てみましょう。カラースタイルとは、各カードが塗りつぶされたカードの「スタック」を上から見るようなものであり、上の色がある程度透明であれば、その下の色を確認することができます。塗りを手動で並べ替えて、上から見えるものを変更することもできます。
バリアブルには未加工の値を1つだけ格納できます。たとえば、未加工の値には#FFFFFFのような塗りつぶし、16や-32.75のような数字、trueやfalseのようなブール値が含まれます。
バリアブルは1つ以上の単一の再利用可能な値を保持するように構築されていますが、一度に表現できる値は1つだけであり、各値は異なるバリアブルモードに対応しています。これは、すべてのバリアブルタイプに当てはまります。スタイルとは異なり、バリアブルは1枚のカードしか表示できないカードセットのようなもので、どのカードが表示されるかはそのコンテキストによって決まります。
たとえば、ライトモードとダークモードを持つバリアブルのコレクションを持っていたとします。それらをフレーム内のさまざまなレイヤーに適用し、フレームをダークモードに設定すると、バリアブルを持つすべてのレイヤーは、ダークモードの値を表現します。フレームをライトモードに切り替えると、バリアブルは表現する値をライトモードに切り替えます。
Figmaでは、バリアブル用に作られているモードをスタイルにも適用できます。
デフォルトのフォントサイズの数字バリアブルがあるとします。このバリアブルには、モバイルモード用の16とデスクトップモード用の18という2つの単一かつ未加工の値があります。このバリアブルをテキストスタイルのフォントプロパティに適用し、他のバリアブルと値を他のプロパティに適用します。
このテキストスタイルは複数のモードを持つバリアブルを使用しているため、任意のテキストレイヤーのモードを切り替えることができます。
重要なポイント
- バリアブルは、未加工で再利用可能な値を保存し、スタイルは異なる値の組み合わせを保存します。
- バリアブルが複数の値（モード）を持つ場合は、一度に1つの値しか表現できません。スタイルの値の組み合わせは、一度にすべてが表現されます。
- デザイン要素に異なるコンテキスト（ライトモードやダークモードなど）を作成したい場合は、バリアブルとバリアブルモードを使用する必要があります。
拡張性と管理
デザインシステムを最も効率よく管理および拡張する方法の1つは、トークンのエイリアスを使用することです。
- デザイントークンは、再利用可能な値を指す業界用語で、デザインとコードを調整するのに役立ちます。
- エイリアシングは、任意のデザイントークンが他のデザイントークンの値を継承できるようにすることで、デザインシステムを整理する方法です。
バリアブルを使用すると、以下を行うことができます。
バリアブル「brand-400」（デザイントークンの1つ）の値が#EAEA00だとします。バリアブル「icon-default」（別のデザイントークン）をbrand-400のエイリアスにして、brand-400の値を継承するようにしたいとします。
brand-400の値が変更された場合でも、icon-defaultがbrand-400の定義にバインドされている限り、icon-defaultはbrand-400に追従します。
スタイルはエイリアシングをサポートしていないため、バリアブルや他のスタイルには適用できません。バリアブルは両方に適用できます。
バリアブルはエイリアシングをサポートしているため、複雑で拡張可能なトークン構造をより強力にサポートします。また、デザインシステムの他のトークンや要素を通じてフローできるプリミティブ値を定義することを可能にし、デザインシステムの更新と管理をより効率的に行うことができます。
たとえば、グローバルトークンとして機能するバリアブルを作成し、それを使ってさまざまなレベルで他のバリアブルを定義するとします。もしグローバルトークンが変更されると、下流のすべてが変更されます。
もし一部のトークンのみを変更する必要がある場合、この構造では、上流で適切なトークンを選択することで、下流のすべてを手作業で作り直すことなく変更できます。
エイリアシングはすべてのバリアブルタイプでサポートされています。バリアブルにエイリアスを付ける方法
重要なポイント:
- バリアブルはスタイルや他のバリアブルに適用できますが、スタイルはどちらにも適用できません。
- バリアブルは、発展段階にあるデザインシステムの拡大縮小を助け、デザインシステムの管理をより効率的にします。
サポート機能
バリアブルの範囲設定
範囲設定は数値バリアブルで完全にサポートされていますが、将来的には他のバリアブルタイプにも拡張されます。
バリアブルを適用できるプロパティを限定するために、バリアブルを範囲設定します。
たとえば、カラーバリアブルを線の塗りのみに制限できるので、そのバリアブルを他の塗りつぶしプロパティに適用できなくなります。これにより、使用する場所をコントロールしやすくなり、デザインする際の当て推量を排除することができます。
重要なポイント:
- 範囲設定はバリアブルでは利用可能ですが、スタイルでは利用できないため、範囲設定の機能を利用する場合はバリアブルを使用してください
- 現在、範囲設定は数値バリアブルで利用可能で、将来的には他のタイプにも拡張する予定です
バリアブルを使用したプロトタイプ
プロトタイプ作成では、オブジェクトの状態やプロパティを保存するために、バリアブルが使用されます。プロトタイプのインタラクションはバリアブル値を変更するために使用され、デザイン内のオブジェクトの外観やコンテンツ、可視性をいくつかのシンプルなフレームで変更できます。
バリアブルを使用したコード構文
コード構文は現在開発中で、まもなくご利用いただける予定です。
バリアブルの編集モーダルを開くと、コード構文というタイトルのセクションが表示されます。コード構文は、コード内のバリアブルを有効なバリアブル名で表示します。この情報はDev Modeで表示され、デザイナーと開発者がシームレスなハンドオフエクスペリエンスを構築できるようサポートします。
重要なポイント: ハンドオフエクスペリエンスを向上させる方法が必要な場合は、バリアブルとコード構文を検討することができます
まとめ
バリアブルとスタイルのどちらを使用するかという選択は、目的に大きく依存します。デザイントークンの拡張性を利用するなら、バリアブルだけを重視してもいいでしょう。自身のプロジェクトに適しているのはスタイルだと気づくことも、両方を組み合わせて使用することになることもあるでしょう。
スタイルはこれからも、Figmaデザインにおける重要な機能です。類似性はあるものの、バリアブルはスタイルの代替になるものではなく、どちらかといえばFigmaのコア機能セットへの付加的な機能といえます。