バリアブルをデザインに適用する

はじめに

この機能を使用できるユーザー

すべてのプランのすべてのユーザーがバリアブルを使用できます

ファイルへのアクセス権を持つどのユーザーも、そのファイルからバリアブルを使用できます

バリアブルに関するその他のリソースをお探しですか?バリアブルのガイドをご覧ください。

右サイドバーで、さまざまなレイヤーのバリアブルをプロパティに適用します。テキストスタイルやカラースタイルのバリアブルをプロパティに適用することも可能です。各バリアブルタイプでサポートされるプロパティについては、こちらをご覧ください。

現在のファイルで作成された任意のバリアブル、またはアクセス権を持つ任意の公開されたチームライブラリのバリアブルを使用できます。

色バリアブルを適用する

色バリアブルは、塗り、線の色、色スタイルのべた塗りまたはグラデーション停止に適用できます。シャドウカラーにグラデーション停止はありませんが、色バリアブルを適用することは可能です。

色バリアブルと色スタイルは同じライブラリピッカーから選択されます。

1. 色バリアブルは正方形の色見本で表示されます。
2. 色スタイルは円形の色見本で表示されます。
3. 検索バーを使用すると、バリアブル名またはバリアブルグループで検索できます。
4. ドロップダウンを開くと、ライブラリでフィルターできます。

べた塗り

選択したレイヤーで色バリアブルを使用するには、次の手順に従います。

1. 右パネルの[塗り]または[線]セクションで [スタイルとバリアブルを適用]をクリックします。
2. ピッカーから適用するバリアブルを選択します。

選択範囲内の色バリアブルを適用することもできます。

塗りと線のプロパティについて詳しくは、こちらをご覧ください。

グラデーション停止

任意の塗りまたは線のプロパティのグラデーション停止に色バリアブルを適用します。

1. レイヤーを選択し、塗りまたは線が存在しない場合は追加します。
2. 塗りまたは線の色見本をクリックします。
3. 色ピッカーからグラデーションアイコンを選択し、停止リストから色見本をクリックします。
4. 新しいメニューから[ライブラリ]タブを開き、グラデーション停止に適用するバリアブルを選択します。
5. 残りのグラデーション停止についても同じ作業を繰り返します。

グラデーションでの色バリアブルの使用について、詳しくはこちらをご覧ください。

シャドウエフェクト

シャドウエフェクトの色プロパティに色バリアブルを適用するには、次の手順に従います。

1. レイヤーを選択します。
2. シャドウエフェクトはまだ存在しない場合は、右パネルから追加します。
3. インナーシャドウまたはドロップシャドウエフェクトの[エフェクト設定]アイコンをクリックします。
4. 色見本をクリックします。
5. [ライブラリ]タブを開き、適用するバリアブルを選択します。

シャドウ効果について、詳しくはこちらをご覧ください。

スタイル

色バリアブルは、新規および既存のスタイルに加え、シャドウエフェクトのプロパティにも適用できます。

べた塗りの色スタイル

べた塗りの色スタイルでバリアブルを使用するには、次の手順に従います。

1. Escを押してキャンバス上のすべての選択を解除します。
2. 右パネルから、既存の色スタイルを編集するか、新しいスタイルを作成します。
3. メニューから、[プロパティ]セクションの色見本をクリックします。
4. [ライブラリ]タブを開き、適用するバリアブルを選択します。

グラデーション停止の色スタイル

グラデーションの色スタイルでバリアブルを使用するには、次の手順に従います。

1. Escを押してキャンバス上のすべての選択を解除します。
2. 右パネルから、既存の色スタイルを編集するか、新しいスタイルを作成します。
3. ウィンドウから、[グラデーション]アイコンを選択します。
4. [停止]の下のリストから色見本をクリックします。
5. 新しいメニューから[ライブラリ]タブを開き、グラデーション停止に適用するバリアブルを選択します。
6. 残りのグラデーション停止についても同じ作業を繰り返します。

色プロパティのエフェクトスタイル

シャドウエフェクトの色スタイルにバリアブルを使用するには、次の手順に従います。

1. Escを押してキャンバス上のすべての選択を解除します。
2. 右パネルから、既存のシャドウスタイルを編集するか、新しいスタイルを作成します。
3. インナーシャドウまたはドロップシャドウエフェクトの[エフェクト設定]アイコンをクリックします。
4. 色見本をクリックします。
5. [ライブラリ]タブを開き、適用するバリアブルを選択します。

数字バリアブルを適用する

選択したオブジェクトに数字バリアブルを適用するには、次の手順に従います。

1. [プロパティ]フィールドをクリックします。
2. [=]を押して、ライブラリピッカーを開きます。

次のいずれかの方法を選択することもできます。

プロパティ	他の方法
フォントサイズ 間隔 レイアウトガイド数 幅と高さ 最大幅と高さ	ドロップダウンメニューを開いて[バリアブルを適用]を選択する
角の半径 エフェクト レイアウトガイドの幅、高さ、余白、オフセット、ガター パディング	[バリアブルを適用]をクリック Shiftを押したままフィールドをクリック
レイヤーの不透明度 文字間隔 行間 段落インデント 段落間隔 線の太さ	Shiftを押したままフィールドをクリック 右クリックして[バリアブルを適用]を選択

ライブラリピッカーからバリアブルを選択します。数字バリアブルは、数字アイコンでマークされています。

文字列バリアブルを適用する

テキスト

文字列バリアブルは、任意のテキストレイヤーのテキストコンテンツに適用できます。つまり、文字列バリアブルの値がFigmaである場合、キャンバス上のテキストはFigmaとして表示されます。

1. テキストレイヤーを選択します。
2. 右サイドバー上部にある[テキスト]セクションから、[バリアブルを適用]をクリックします。
3. ライブラリピッカーから適用するバリアブルを選択します。

フォントプロパティ

文字列バリアブルは、フォントファミリーまたはフォントの太さとスタイルに適用できます。

選択したテキストレイヤーに文字列バリアブルを適用するには、次の手順に従います。

1. フォントファミリーまたはフォントの太さのドロップダウンを開きます。
2. [バリアブルを適用]を選択します。
3. ピッカーからバリアブルを選択します。

新規または既存のテキストスタイルに文字列バリアブルを適用するには、次の手順に従います。

1. テキストスタイルを編集するか、新しいスタイルを作成します。
2. ウィンドウから、フォントファミリーまたはフォントの太さのドロップダウンを開きます。
3. [バリアブルを適用]を選択します。
4. ピッカーからバリアブルを選択します。

ブーリアンバリアブルを適用する

ブーリアンバリアブルはレイヤーの表示に適用できます。

ブーリアンバリアブルの値がtrueの場合、レイヤーは表示されます。ブーリアンバリアブルの値がfalseの場合、レイヤーは非表示になります。

1. 右サイドバーの[外観]セクションで[表示]/[非表示]アイコンを右クリックします。
2. ピッカーからバリアブルを選択します。

バリアントインスタンスにバリアブルを適用する

ブール、数値、文字列の各バリアブルを、バリアントプロパティを持つインスタンスに適用して、コンポーネントセットのバリアントを切り替えることができます。これにより、親フレームのモードに応じてバリアントを切り替えることが可能です。

バリアントインスタンスのバリアブルモードの作成方法については、こちらをご覧ください。

バリアブルを切り離す

バリアブルを切り離すには、次の手順に従います。

• 色、文字列、ブーリアンバリアブルの場合: 関連する右サイドバーのセクションでバリアブルにカーソルを合わせ、[バリアブルを切り離す]アイコンをクリックします。
• 数字バリアブルの場合: [プロパティ]フィールドをクリックして、DeleteまたはBackspaceキーを押します。特定のプロパティでは、[バリアブルを切り離す]アイコンをクリックすることもできます。

ファイル間での非公開バリアブルの貼り付け

あるファイルから別のファイルにオブジェクトをコピーして貼り付ける際、オブジェクトの未公開のバリアブルを2つ目のファイルに複製し、貼り付けたオブジェクト上でバリアブルを編集し続けることができ、プロトタイプを作成する際に役立ちます。

これは、次の条件のいずれかを満たすオブジェクトで実行できます。

• 未公開のバリアブルがそのプロパティ(塗り色など)に直接適用されている。
• 未公開のスタイルがそのプロパティに直接適用されており、スタイルでは未公開のバリアブルが使用されている。この場合、バリアブルをコピーすると、貼り付けたオブジェクトは未公開のスタイルとのコネクションを失います。

これらのオブジェクトを別のファイルに貼り付けると、ファイルの下部でトースト通知がトリガーされます。バリアブルをコピーする場合、当該のバリアブルは新しいコレクションにコピーされ、貼り付けられたオブジェクトは新しいバリアブルに再度マッピングされます。

コピーしたオブジェクトが公開コンポーネントで、移動先ファイルがそれにアクセスできる場合、再マッピングは行われません。