バリアブル、コレクション、モードの概要

バリアブルには、デザイン全体で再使用できる、塗り色、パディング、可視性などの値が格納されています。

スタイルやコンポーネントのように、バリアブルをチームライブラリに公開することもできます。バリアブルの値を更新すれば、それに応じてファイル全体でデザインを更新できます。これはプロジェクト全体で一貫したデザインを作成するのに便利で、効率よくデザインシステムを更新できます。

バリアブルのタイプ

バリアブルには4つのタイプがあり、それぞれは特定のプロパティと要素に適用できます。

バリアブルの定義はエイリアスを付けることも、別のバリアブルの定義を参照することもでき、デザイントークンを実装することができます。すべてのバリアブルに、同じタイプの既存のバリアブルをエイリアスとして設定できます。たとえば、カラーバリアブルは他のカラーバリアブルだけを参照できます。バリアブルにエイリアスを付ける方法についてはこちら→

コレクションとグループ

コレクションとグループはどちらも、バリアブルをまとめ、簡単に検索できるようにするために使用されます。

コレクションはバリアブルとモードのセットです。コレクションは、関連するバリアブルをひとまとめするために使用できます。たとえば、あるコレクションを異なる言語のテキストをローカライズするために使用し、別のコレクションを空間値に使用したりします。

コレクション内のグループに追加することで、バリアブルをさらにまとめることができます。たとえば、あるグループをテキストに使用されるカラーに使用し、別のグループを線上で使用されるカラーに使用します。

バリアブルモード

モードはコレクション内のバリアブルの値のリストであり、バリアブルごとに1つの値が格納されています。モードはデザインのさまざまなコンテキストも表します。

バリアブルに複数の定義がある場合、それぞれの定義はモードに関連付けられます。バリアブルがレイヤーのプロパティに適用されると、レイヤーには現在のモードに基づいて値が表され、コンテキスト間でデザインをすばやく切り替えることができます。

たとえば、2つの色の値(あるモードでの青色と別のモードでの白色)を格納する1つの色バリアブルがあるとします。このバリアブルをテキストレイヤーに適用すると、そのモードに応じて青色か白色のいずれかでテキストレイヤーが表示されます。

以下に、モードを使用してコンテキストを切り替えられるいくつかの方法を示します。

• ライトモードやダークモードなどのさまざまなカラーテーマ
• デザインでのコピーのフローを表すためのさまざまな言語
• 間隔とパディングが異なると要素がどのように見えるかを示すためのデバイスサイズ

バリアブルモードでデザインコンテキストを切り替える方法についてはこちら→

考慮事項

スタイルとバリアブル

バリアブルとスタイルはどちらもカラーの値を格納でき、信頼できるソースとして使用されます。デザイン全体で再使用して効率性と一貫性を確保できます。

バリアブルを使用するかスタイルを使用するかを判断するときには、次の点に留意してください。

スタイルは、グラデーションやシャドウなどの複数の値から構成されるプロパティに使用します。スタイルは他のスタイルを参照できませんが、バリアブルを参照できます。

バリアブルはあるモードでの#E5E5E5や別のモードでの#888888などの個々のローバリューで構成されます。コンテキスト間で切り替える機能は、バリアブルのモードを使用した場合にのみ行うことができます。さらに複雑なデザイントークン構造を作成するために、バリアブルにエイリアスを付けることができます。