FigmaでVariablesを使って文字数ごとの見た目の違いを素早く検証する

Last updated at 2024-12-06Posted at 2024-12-05

この記事の概要

UI Stackのような概念が当たり前になりつつある今、Figmaでモックアップを作る際も「ちょうど良い文字数での表示」だけを検証することは少ないと思います。

短いものから長いものまで、色々なパターンを検証するでしょう。

ただ、その際に毎回ダミーテキストを考えるのも面倒です。

というわけで、Variablesを使ってあらかじめダミーテキストを定義しておき、時短を図るための記事です。

見本として、以下の2つのコンポーネントを作成します。

UserInfo	ArticleCard

ユーザーアイコン + ユーザー名を表示する	記事タイトル + ユーザー情報 + 投稿日を表示する

ArticleCardの中でUserInfoを使用しています。

このようなVariablesを登録します。

Collectionを別途作成する
- 今回はDummy textという名前で作成
- 他のデザイントークンとは役割も必要なModeも違うので、別のCollectionにしておいた方が良い
Modeを登録する
- 今回はPlaceholder, Short, Medium, Longの4つ
- ProfessionalとOrganizationプランはMode数が4つという制限があるので、このあたりがちょうど良いバランスと思われる
- 空文字列もあり得る場合、Shortに半角スペースを入れるのも良さそう
Variableを登録する
- 今回は具体的な役割のテキストを登録している
- 汎用的なダミーテキストを用意しておいて、Modeをデータベースの文字数制限に揃える（31文字, 255文字など）と揃えておくのも良い

通常通りComponentを作成した上で、PropertyにVariableを適用するだけです。

1つ目のModeをPlaceholderにしておくことで、Variableの選択時や単にコンポーネントを配置したときに、そのテキストの意味が分かりやすくなります。

Componentを配置しているFrame、もしくは1つ1つのComponentを選び、AppearanceからVariableのModeを選択します。

このように選ぶだけで、Variableを適用している箇所の見た目が変わります。
ネストされたComponent（ここではUserInfo）の中身も問題なく変化します。

これらを実施すると、このようなパターン違いの検証をすぐにできるようになります。
「記事一覧」のようなページであれば、ArticleCardコンポーネントを20個くらい並べて親FrameのAppearanceを切り替えることで一気に色々な場合の見た目を見れます。

この手法をとった場合、決まったテキストではなく好きなテキストを流し込みたい場合はVariableをdetachしないといけません。

ただ、今回の記事カードのコンポーネントのように「具体的なテキストが必要なわけでも本番データと同期したいわけでもなく、Figmaデータとしてはすべてダミーテキストで構わない」というものもあると思います。
そういう場合はdetachする必要もないので、特にデメリットになることもないかと思います。

常にこのテクニックを使うというよりは、都度テキストを変える必要がある要素は都度変えて、すべてダミーテキストでも構わないようなものならこのテクニックを使う、と場合わけできると良いと思います。