Figmaの「スタイル」機能でテキストのデザインを統一する
はじめに
前回は、デザインの標準化の手段として「デザイントークン」について学びました。Figmaにはデザイントークンを実現する機能としてスタイルとバリアブルがあります。今回は、Figmaにログインしてテキストのスタイルを作成しながら、タイポグラフィーの標準化について学習しましょう。
スタイルとバリアブル
さっそくFigmaにログインして、デザイントークンを作成していきましょう。Figmaではデザイントークンという要素そのものはなく、スタイルとバリアブルを使ってデザイントークンを作成します。
キャンバスのプロパティパネルを表示
- FigmaのUI要素のないところ(ライトグレーのキャンバス自体)をクリックすると、図1のようなキャンバスのプロパティパネルにローカルバリアブルとローカルスタイルが表示されます。
図1：スタイルとバリアブル
- スタイルの作成メニュー
スタイルを作成する場合は、プロパティパネルの「ローカルスタイル」をクリックします。スタイルの種類は次の4つが用意されています。- テキスト
- 色
- エフェクト
- グリッド
- バリアブルの作成メニュー
バリアブルを作成する場合は、プロパティパネルの「ローカルバリアブル」をクリックします。バリアブルの種類は次の4つです。- カラー
- 数値
- 文字列
- ブーリアン
スタイルとバリアブルの使い分け
デザイントークンはスタイルでもバリアブルでも定義できます。スタイルには「テキスト」と「色」がありますが、バリアブルでも「文字列」と「カラー」という似たような名前があります。この2つをどのように使い分ければ良いのでしょうか。
- スタイルとバリアブルの違い
表1にスタイルとバリアブルの違いをまとめました。この表に基づいて説明しましょう。- 用途とリリース時期
スタイルとバリアブルは、どちらも「デザイントークンを定義する」という同じ目的で使用します。なぜ2つあるかというと、最初にスタイルが実装され、その後でバリアブルが追加されたという事情によります。その分、バリアブルの方が細かな設定が可能だったり、モードの機能が使えたりと便利になっています。ただ、バリアブルがスタイルを包含しているわけではなく、スタイルがあることを前提としつつ、それに不足する機能を補完している役割を担っています。
表1：スタイルとバリアブルの違い
スタイル バリアブル 用途 デザイントークンを定義する リリース時期 最初に実装された機能 追加で実装された機能 対象 ・テキスト(fontやsizeなど)
・色(使用する色を定義)
・エフェクト(シャドウ効果など)
・グリッド(グリッドレイアウト)・文字列(文字そのもの)
・カラー(スタイルの色と同じ)
・数値(サイズやスケールなど)
・ブーリアン(ON/OFF)利用想定 デザイン全体の統一 デザインの値や状態など細かな標準化 モード機能 なし 有料プランのみ(LightとDarkなど) - 用途とリリース時期
- テキストと文字列
スタイルの「テキスト」とバリアブルの「文字列」は全く別の役割です。表2のようにそれぞれが標準化する対象は全く異なります。通常は、スタイルの「テキスト」で使用するフォントやサイズなどを標準化すれば十分です。さらにボタンのラベルやメッセージなどの文言まで標準化する場合はバリアブルの「文字列」を使います。表2：スタイルのテキストとバリアブルの文字列
スタイル「テキスト」 バリアブル「文字列」 標準化対象
(例など)テキストの定義(タイポグラフィー)
・フォントファミリー(Roboto…)
・フォントスタイル(bold…)
・フォントサイズ(16px…)
・行間(Line Hight)
・文字間(letter spacing)テキストの内容(文言、ラベル)
・ボタンのラベル(更新、削除…)
・メッセージ(更新しました)
・プレースホルダーのテンプレート
(半角英数字で入力してください)
※多言語対応可能 - カラーと色
スタイルの「テキスト」とバリアブルの「文字列」は役割が別でしたが、スタイルの「色」とバリアブルの「カラー」は同じ目的のものです。後に追加されたバリアブルの方がモードやスコープなどの細かな設定ができるように進化しているので、カラーのデザイントークンはバリアブルだけを使うことにします。
スタイルとバリアブルの指定関係実は色のプリミティブトークンをスタイルでHEX指定し、エイリアストークンやセマンティックトークンをバリアブルで作成したかったのですが、残念ながら現時点ではバリアブルでスタイルを指定できずに断念しました。
逆にスタイルでバリアブルを参照して設定することはできます。後で追加したバリアブルが前からあるスタイルを指定できず、その逆はできるというのはちょっと珍しいですね(どういう想定なのでしょう)。
- エフェクト
スタイルのエフェクトはボタンに影を付けて立体感を出したり、入力ボックスに凹んだ感じを付けたりするのに利用します。 - グリッド
スタイルのグリッドは、レイアウトの基盤を整えて視覚的な一貫性を保つためにグリッド線を表示するものです。レスポンシブデザインのデザインなどで役に立ちますが、本連載では使用しません。 - 数値
バリアブルの「数値」は、デザインで使う数値を変数として名前を付けて標準化するためのものです。例えば、ボタンのパディングをダイレクトに4pxなどと設定する代わりに、button/padding/mdなどという名前で指定します。
値を一元管理することでデザイン全体を統一できるメリットがあります。一方でトークンが多いといちいちトークン名を探して設定する作業が煩雑になるデメリットもあります。そこで、本連載では効率優先で「数値」は使用しない方針とします。 - ブーリアン
バリアブルの「ブーリアン」は、バリアントを作成してプロパティを設定する際に使います。プロパティの値にダイレクトに「active」「disabled」という値を設定する代わりに、disabledというブーリアンプロパティを指定することでプロパティ値の統一が図りやすくなります。
本連載では、スタイルの「色」と「グリッド」、バリアブルの「数値」以外はすべて利用する方針とします。
スタイル「テキスト」の設定
前置きが長くなりましたが、実際にスタイル「テキスト」を作成しながらデザイントークンを理解することにしましょう。
ローカルスタイルを作成
- Figmaにログイン
Figmaにログインして「ローカルコンポーネント」ページを開いてください。なお、Figmaで別のファイルに切り替える場合は、左上のFigmaブランドアイコンをクリックして「ファイルに戻る」としてファイル一覧画面に切り替えます(この操作は、よく使います)。なお、諸般の事情によりプロジェクト名、ファイル名、ページ名をBizSaaSからBizPoundに変更しています。
図2：Figmaにログインしてページを開く
FigmaのブランドアイコンFigmaのブランドアイコンの形状は「F」の形を意識してデザインされています。5つの円形のパーツで構成されており、1つ1つにFigmaの理念である「創造性」や「コラボレーション」「多様性」「シンプル＆モダン」「デザインと開発の融合」などを象徴する意味が込められていると言われています。
- テキストスタイルを作成する
テキストを標準化するためのスタイルを作成しましょう。1つ目はページ(画面)のタイトルに使う最も大きな文字スタイルをpage/titleという名前で作成します。
キャンバスの何もないところをクリックしてキャンバスのプロパティを表示し、ローカルスタイルをクリックしてください。ローカルスタイルのメニューが表示されるので、一番上のテキスト
を選びます。
a.テキストスタイルのプロパティ設定
図3のような「新しいテキストスタイルを作成」ダイアログが表示されるので、次のように入力して「スタイルの作成」を押してください。- スタイルの名前：page/title
- 説明：ページのタイトル
- プロパティ
フォントファミリー：Roboto
フォントウェイト：Bold
フォントサイズ：36
行間：48px
文字間隔：2％
b.名前の階層化
図3：スタイルの作成
デザイントークン(スタイルやバリアント)は階層構造で名前を付けると便利です。Figmaではpage/titleいうようにスラッシュで階層を区切ります。
c.フォントファミリーとウェイト
デザインで使用するフォントを決めて登録します。ユースケースに合わせたフォントを選ぶわけですが、業務システムの場合は表3のようなSans-Serifフォントが良いでしょう。今回はRobot(ロボット)が名前の由来と言われるRobotoを採用します。表3：代表的なSans-Serifフォント
フォント ウェイト 特徴 Roboto Thin,Light.Regular,
Medium,Bold,BlackGoogleが設計したAndroidデフォルトフォント。モダンでシンプル Open Sans Light,Regularr,Semibold,
Bold,Extrabold可読性を重視したデザインで横幅が広く、アクセスビリティ重視 Inter Thin,Light,ExtraLight,
r.Regular,Medium,Semibold,
Bold,Extrabold,Black小さいフォントサイズでも視認性が高くモダンなUIに向いている d.行間と文字間隔 Sans-SerifフォントSans-Serifフォントとは、文字の端(Serif)がないシンプルなフォントのことを指します。これと対比するのがフォントに装飾的な端(ひげや飾り)がついているSerifフォントです。Serifフォントの代表は「Times New Roman」や「Garmamond」「Georgia」などです。なお、Sansはフランス語で「〜なし」という意味です。
行間(line Height)は、図4のような文字のベースラインから次の行のベースラインまでの間隔のことで、ピクセル単位で指定します。ベースラインから次の行のトップラインまでの間隔ではないので注意してください(フォントサイズが大きく行間が小さいと文字が重なってしまいます)。
一般的には行間はフォントサイズの1.4〜1.6倍程度が読みやすいとされていますが、フォントサイズが大きい場合は少し狭めて1.2〜1.4倍くらいが良いとされます。ここではフォントサイズが36と大きいので行間は48pxとします。文字間隔(letter spacing)は文字と文字の間の距離のことで、こちらはフォントサイズに対する割合(%)で指定します。0％とするとフォントがそもそも持つ文字間隔(内部メトリクス)が適用されますが、フォントサイズが大きい場合は1〜3％くらい開けるとさらに読みやすいでしょう。ここでは2％としておきます。
図4：行間と文字間隔
e.その他の設定
タイポグラフィー下側の「･･･」をクリックすると、その他の設定を行えるダイアログが開きます。リンクであることを明示するためにアンダーラインを付けたり、値下げを示すために元値に取り消し線を付けるなど装飾を施す場合に設定します。 ローカルとグローバルトローカルスタイルやローカルバリアブルというように「ローカル」という言葉が付いているのはなんでしょうか。これは、そのスタイルやバリアブルがこのファイル内でのみ使用可能ということを表します。
ローカルスタイルやローカルバリアブルを他のファイルやプロジェクトでも利用する場合は、これをライブラリとして公開します。ただし、無償のStarter版ではライブラリの公開機能はサポートされていません。
有料プランを使った公開手順は図5のような操作です。レイヤーパネルの「アセット」タブにあるライブラリアイコン
から「ライブラリの管理」画面を開き、公開するコンポーネントやスタイル、バリアブルを選んで「公開」します。
図5：ライブラリの公開
- 他のテキストスタイルを作成する
今回のデザインで使用するテキストは表4のようなタイポグラフィーです。このあとのデザインで使用するので、タイトルと同じ要領でサブタイトル以下をすべて作成してください。スタイル名をスラッシュで区切って作成すると図6のようにスタイルが階層ごとに分類されます。
同じ階層にスタイルを追加する場合は、ローカルスタイルの「＋」ボタンではなく、該当の階層の「＋」ボタンを押すと階層部分の入力が省略されます(この仕組みはバリアブル作成時も同じです)。フォントファミリーを選択するプルダウンではフィルターがかけられます。「すべてのフォント」だと候補が多くて探すのが面倒なので、「このファイル内」に絞ると便利です。表4：デザインで使用するテキストのタイポグラフィー
UI要素 詳細 スタイル名 フォント ウェイト サイズ 行間 文字間隔 ページ タイトル page/title Roboto bold 36px 48px 2% サブタイトル page/subtitle Roboto medium 24px 32px 1% ボタン ラベル button/label Roboto medium 16px 20px 3% 入力ボックス ラベル input/label Roboto semibold 14px 20px 2% 標準文字 input/default Roboto regular 16px 24px 0% 小さな文字 input/small Roboto regular 10px 20px 0% ダイアログ タイトル dialog/title Roboto bold 24px 32px 1% ボディ dialog/body Roboto regular 16px 24px 0% メッセージ タイトル feedback/title Roboto medium 20px 28px 0% ボディ feedback/body Roboto regular 16px 24px 0% 
図6：スタイルの階層管理
デザインにスタイルを適用
第4回で作成したコンポーネントに対して、作成したスタイルを適用してみましょう。
- 登録ボタンのテキストを選択
コンポーネントのテキスト「登録」部分を[ctrl]キー＋クリックで選択してください。 - スタイル適用アイコンをクリック
選んだテキストのプロパティのタイポグラフィーにスタイル適用アイコン
が表示されるので、クリックします。 - スタイルの選択
テキストスタイルの一覧が表示されるので、button/labelを選択してください。これで「登録」ボタンのテキストにスタイルが適用されます。すなわち、フォント「Noto Sans JP」のBold、サイズ16、行間自動と個別に指定されていたものが、button/label(Roboto、medium、サイズ16、行間20)に変更されます。
図7：テキスト「登録」にスタイル「Button/Label」を適用
- 残りのコンポーネントにもスタイルを適用
同じ要領でバリアント「更新」とバリアント「検索」のタイポグラフィーにも、スタイルbutton/labelを適用してください。なお、インスタンスはコンポーネントの分身なので、自動的にこのスタイルが適用されます。
これでテキストスタイルの学習は終了です。ボタンなどのUI要素ごとにフォントやウェイト、サイズなどを都度指定すると不揃いになりやすいですが、スタイルで標準化して、それを適用することで統一の取れたデザインにできるのです。
まとめ
今回は、以下のような内容について学びました。
- Figmaでデザイントークンを定義する要素にスタイルとバリアブルがある
- スタイルでテキスト、色、エフェクト、グリッドが用意され、バリアブルでカラー、数値、文字列、ブーリアンがサポートされている
- Figmaでは最初にスタイルが実装され、後でそれを補完および進化させたバリアブルが追加された
- スタイルでバリアブルを指定できるが、バリアブルからスタイルは指定はできない
- ローカルスタイルやローカルバリアブルはファイル内でのみ使用可能であり、他で利用する場合はこれをライブラリとして公開する
- テキストスタイルを使うとフォントやウェイト、サイズ、行間、文字間隔などのタイポグラフィーを標準化できる
次回は、デザイントークンを標準化するもう1つの方法である「バリアブル」について解説します。実際にバリアブルを使ってカラーの標準を作りながら理解していきましょう。
