見出し画像

FigmaのVariablesを使用してダミーコンテンツを管理する

鈴木慎吾 / TSUMIKI INC.

Figmaの新機能としてVariables（変数）が追加されました。Variablesにカラー、数値、テキストを定義しておき、アートボード上のレイヤーの各種プロパティに適用して利用することができます。

公式のPlaygroundを見ると、ダークモードとライトモードなど、複数のモードを持つデザイントークンを管理するような使い方が想定されているようですが、これをデザイン内で使用するダミーコンテンツの管理に使用してみたいと思います。

ダミーコンテンツとは？

ダミーコンテンツとは実際には存在しない本物らしいテキストや画像のことを指し、UIデザインの際に頻繁に使用します。ユーザー情報や投稿された文章など、本物らしいコンテンツを毎回考えるのは非常に手間が多く効率的ではありません。そのため、何度も使うダミーコンテンツを再利用しやすい形でFigmaから利用できると理想的です。さらに要素が極端に少ない場合や、テキストが極端に長い場合などの検証用のコンテンツも手軽に利用できると便利そうです。

ファイル構成

今回の例ではVariablesを追加したFigmaファイルを作成し、コンポーネントライブラリや複数のデザインファイルに読み込んで使用します。Variablesを外部ライブラリとして独立させることで複数のプラットフォームのデザインファイルや複数の施策のファイルで共通利用することができます。

Variablesの追加

まずダミーコンテンツとなるユーザー情報をVariablesに追加します。
Frameやレイヤーを選択していない状態でプロパティパネルの「ローカルバリアブル」を押します。

Usersというコレクションを作成し、screenName、userId、profileなどのテキスト情報を追加します。加えてSNS連携の有無を示す、showTwitter、showInstagramなどを追加します。Variablesは一つの変数に対して複数の値を持つことができます。複数の値はモードの切り替えで適用することができます。

このサンプルではdefaultのモードとスクリーンショットで使用するサンプル用モード、テキスト要素が少ないパターンと長いパターンの合計4つのモードを作成しています。

Variablesのモードはプロフェッショナルプランでは4つ、エンタープライズプランでは40個まで追加できます。

Variablesをライブラリとして公開

一通りのVariablesの登録が完了したら、外部ファイルで利用可能なようにライブラリとして公開します。

公開したライブラリは他のファイルに読み込んで利用できます。

Variablesの適用

ユーザー一覧用のコンポーネントにVariablesのテキストの値を適用します。テキストレイヤーを選択し、プロパティの六角形のアイコンからVariablesの値を適用できます。

表示要素の表示、非表示にVariablesのブーリアン値を適用する際は、レイヤーの表示・非表示を示す目玉のアイコンを右クリックします。右クリックの操作からしか一覧を表示できないため非常にわかりにくいです。

Modeの切り替え

このコンポーネントのインスタンスに対してVariablesのモードを適用します。ユーザー一覧のインスタンスを選択し、レイヤーパネルの右の六角形のアイコンを選択します。モードを切り替えるとテキストが変更されます。

要素が極端に少ない場合や、テキストが長い場合の検証もできます。

Variablesのモードはインスタンスが配置されたFrameなど、親要素に適用することもできます。親要素に設定したモードは子要素にも継承されます。
コンポーネントだけでなくテキストレイヤーなどにもVariablesの値を適用することができます。Frameにモードを設定し、複数の子要素にVariablesを適用しておくと、Frameのモードの切り替えに応じて全ての子要素の値が変更されます。

コンポーネントのプロパティにはVariablesは適用できない

このようにダミーコンテンツの切り替えや、テキストが長い場合の検証などにVariablesを使うと非常に便利ですが、難点もあります。
2023年6月現在、コンポーネントのプロパティにはVariablesを適用することができません。そのため、たとえばユーザー一覧のコンポーネントのテキストにVariablesを利用したいのであれば、コンポーネントのプロパティによるテキスト変更は諦めなければいけません。

既にフォーラムでは機能追加のリクエストがあり、自分も投票しておきました。

今後の機能追加に期待したいと思います。

TwitterでもUIデザインについて発信しています。感想やコメントなどいただけると嬉しいです！

Twitter (@shingo2000)


この記事が気に入ったらサポートをしてみませんか？