バリアブルとスタイルの違い
🚧 バリアブルは現在オープンベータ版です。この期間中、さらに機能を追加し、エクスペリエンスに磨きをかけていきます。次に何が登場するかはこちら →
Figmaでは、バリアブルにより機能セットを拡張しました。次のような疑問をお持ちの方もおられるでしょう: 「バリアブルとスタイルの違いは?」「この2つの使い分けは?」「スタイルは廃止されるのか?」
結局のところ、バリアブルとスタイルは表面的には同じような機能を果たしています。
- どちらも基幹となるソースとして機能します
- どちらもチームライブラリに公開され、デザイン全体で再利用されます
- バリアブルやスタイルを更新すると、これらを使用するすべてのデザインシステムの更新が促されます。バリアブルとスタイルのどちらも効率的にデザインシステム管理をサポートします。
この記事では、前述の疑問にお答えし、それぞれのメリットをご説明します。主に、他のタイプよりも重複する部分があるカラーバリアブルとカラースタイルを取り上げます。
基本的な相違点
スタイルとバリアブルの違いは主に2つあります。それは、使用する値とキャンバス上での値の表示方法です。
カラー値
デジタルの色空間では、すべての色が値に関連付けられています。たとえば、白はHexコードで#FFFFFFと表します。不透明度50%の#808080など、不透明度が指定されている色もあります。これらは単一の値を持つ色です。
複数の値は、2つ以上のカラー値が関与する場合に発生します。最も一般的なものは、複数色のブレンドが必要になるグラデーションです。
カラーバリアブルは単一のカラー値(塗りつぶし)のみを保持します。
カラースタイルは単一および複数のカラー値(塗りつぶし、グラデーション塗り、画像、GIF、動画、ブレンドモード)を保持します。
バリアブルとスタイルどちらも、塗りと線のカラープロパティに適用できます。
キャンバス上の外観
スタイルとバリアブルをレイヤーに適用した際に、キャンバス上での値の表示がそれぞれ異なるものになります。これは構築方法の違いによるものです。
スタイルは、一度に表現される値の組み合わせが保持されるように構築されています。これはすべてのスタイルタイプに該当します。
たとえば、カラースタイルを見ることは、それぞれに塗りつぶされたカードを積み重ね、そのカードの「束」を上から見るようなものです。この束には、塗りつぶしタイプとバリアブルの組み合わせも含めることができます。もし上部の色が十分に透明なら、その下の色も見えます。手動で塗りつぶしを再配置して、上から見える色を変更することもできます。
バリアブルは、単一または複数の個別の値が保持されるように構築されていますが、一度に表現できる値は1つだけです。これはすべてのバリアブルタイプに該当します。バリアブルはカードの束ではなく、一度に1枚のカードだけを見ることができるカードセットのようなものです。
さらに、それぞれの値は異なるバリアブルモードに対応しています。
たとえば、ライトモードとダークモードを持つバリアブルのコレクションを持っていたとします。それらをフレーム内のさまざまなレイヤーに適用し、フレームをダークモードに設定すると、バリアブルを持つすべてのレイヤーは、ダークモードの値を表現します。フレームをライトモードに切り替えると、バリアブルは表現する値をライトモードに切り替えます。
バリアブルモードはバリアブルのために構築されていますが、カラースタイルを通じて利用することもできます。前述したように、スタイルは単独で、もしくは他の塗りつぶしとの組み合わせで、その定義にバリアブルを含めることができます。このスタイルをデザインに適用すると、バリアブルの操作と同様にモードを切り替えることができます。
重要なポイント
- 異なるモードに対応する再利用可能な色が必要な場合は、バリアブルを作成する必要があります。
- 再利用可能なグラデーションが必要な場合、ブレンドモードを使用する場合、複数の塗りつぶしを重ねる場合は、スタイルを使用してください。
デザイントークン
基幹となるソースを管理する最大の方法の1つは、デザイントークンによるものです。バリアブルでは、バリアブルのエイリアシングによってデザイントークンを実装できます。これにより、バリアブルは別のバリアブルの値を自身の値として継承することが可能になります。
たとえば、バリアブルAの値が#000000で、バリアブルBにエイリアスを付けるとします。この場合、BはAに含まれる定義を継承します。
Aの値が別の値、または別のバリアブルに変更された場合でも、BがAの定義にバインドされている限り、BはAに追従します。
エイリアシングはすべてのバリアブルタイプをサポートします。バリアブルにエイリアスを付ける方法についてはこちら→
スタイルにはエイリアスを付けることができません。カラーバリアブルを使用して他のカラーバリアブルやカラースタイルを定義することはできますが、スタイルではそのどちらも定義できません。つまり、スタイルには、デザイントークンの複雑さや拡張性において制限が存在します。
拡張性と管理
バリアブルのエイリアシングによって、複雑で拡張可能なデザイントークン構造への可能性が広がりますが、これには一般的に、より効率的な更新および管理プロセスが必要になります。
たとえば、グローバルトークンとして機能するバリアブルを作成し、それを使ってさまざまなレベルで他のバリアブルを定義するとします。もしグローバルトークンが変更されると、下流のすべてが変更されます。
もし一部のトークンのみを変更する必要がある場合、この構造では、上流で適切なトークンを選択することで、下流のすべてを手作業で作り直すことなく変更できます。
重要なポイント:
- バリアブルは、他のバリアブルやスタイルを定義するために使用できますが、スタイルではこれらを定義できません
- バリアブルのエイリアシングは、拡張性とデザイントークンの管理を容易にします
- グローバルまたはプリミティブトークンにバリアブルを使用してください
サポート機能
バリアブルの範囲設定
範囲設定は数値バリアブルで完全にサポートされていますが、将来的には他のバリアブルタイプにも拡張されます。
バリアブルを適用できるプロパティを限定するために、バリアブルを範囲設定します。
たとえば、カラーバリアブルを線の色のみに制限できるので、そのバリアブルを他の塗りつぶしプロパティに適用できなくなります。これにより、使用する場所をコントロールしやすくなり、デザインする際の当て推量を排除することができます。
重要なポイント:
- 範囲設定はバリアブルでは利用可能ですが、スタイルでは利用できないため、範囲設定の機能を利用する場合はバリアブルを使用してください
- 現在、範囲設定は数値バリアブルで利用可能で、将来的には他のタイプにも拡張する予定です
バリアブルを使用したプロトタイプ
プロトタイプ作成では、オブジェクトの状態やプロパティを保存するために、バリアブルが使用されます。プロトタイプのインタラクションはバリアブル値を変更するために使用され、デザイン内のオブジェクトの外観やコンテンツ、可視性をいくつかのシンプルなフレームで変更できます。
バリアブルを使用したコード構文
コード構文は現在開発中で、まもなくご利用いただける予定です。
バリアブルの編集モーダルを開くと、コード構文というタイトルのセクションが表示されます。コード構文は、コード内のバリアブルを有効なバリアブル名で表示します。この情報は開発モードで表示され、デザイナーと開発者がシームレスなハンドオフエクスペリエンスを構築できるようサポートします。
重要なポイント: ハンドオフエクスペリエンスを向上させる方法が必要な場合は、バリアブルとコード構文を検討することができます
まとめ
バリアブルとスタイルのどちらを使用するかという選択は、目的に大きく依存します。デザイントークンの拡張性を利用するなら、バリアブルだけを重視してもいいでしょう。自身のプロジェクトに適しているのはスタイルだと気づくことも、両方を組み合わせて使用することになることもあるでしょう。
スタイルはこれからも、Figmaデザインにおける重要な機能です。類似性はあるものの、バリアブルはスタイルの代替になるものではなく、どちらかといえばFigmaのコア機能セットへの付加的な機能といえます。
バリアブルはオープンベータ版です。バリアブルタイプの追加や拡張コレクションなどをサポートするために開発を続けていきます。