[Figma] 10 Figmaでテキストスタイルを登録して再利用する方法

「Figma」ではテキストスタイルという、よく使うフォントやサイズなどを登録して再利用する機能があります。
Webデザイン時には、プロジェクトのデザインルールで決めたテキストスタイルを登録して再利用することで、
テキストスタイルのばらつきを抑えることができ、効率化やチーム内の情報共有やルールの徹底に非常に有効です。

なおWebデザインにおけるデザインルールに関しては以下のページを参照してください。

超重要!Webデザインではデザインルールを決めよう

テキストスタイルの登録

テキストスタイルを登録する流れ

まずテキストスタイルの登録の流れを確認しましょう。
下記の登録手順をサイズやフォントごとに繰り返すことでテキストスタイルのライブラリを作ることができます。

1. テキストを打ち込み、設定を合わせる。
2. アクションパネルから「Generate Style」を実行する。

01. テキストを打ち込み、設定を合わせる。

まずはテキストの打ち込みです。
ツールバーからテキストツールを選択してキャンバスをクリックして文字を打ち込んでください。

今回の場合は通常の文字列の打ち込みとは違い、スタイル設定のための打ち込みであるため、
ライブラリでスタイルを選択することを想定し、ひと目で判別できるような文字列を打ち込みます。
例えば文字列を以下の設定にするとします。

打ち込む文字列「ZKGN-48-R」

項目	値
フォント名(省略形)	Zen Kaku Gothic New(ZKGN)
サイズ(省略形)	48px(48)
太さ(省略形)	Regular(R)

つまり、フォント名・サイズ・太さのそれぞれを省略形で打ち込みー(ハイフン)で繋げた書き方です。

次に、右サイドバーのタイポグラフィパネルでフォントの設定を先ほどの内容に合わせて調整しましょう。
今回は先ほどの設定に加え、「行間:180%」「文字間隔:0%」にしておきましょう。

02. アクションパネルから「Generate Styles」を実行する。

フォントの設定を全て終えたら、ライブラリへの登録はプラグイン「Generate Styles」を使って行います。
ツールバーの「アクション」ツールをクリックし、検索窓に「Generate Styles」と入力し、
検索結果に表示される「Styler > Generate Styles」をクリックするとすぐに登録されます。

タイポグラフィパネルのフォント名の選択枠だった箇所にある文字列をクリックするとテキストスタイルが表示され、
検索窓の下に「ZKGN-48-R」という文字列があり、テキストスタイルに登録されているのが確認できます。

実用編:複数のサイズや太さのテキストスタイルを一括で登録する流れ

上述した登録手順をサイズやフォントごとに繰り返すことでテキストスタイルのライブラリを作ることができます。
ただ一つずつ登録していてはそれなりに時間がかかりますよね。

実はGenerate Stylesは複数のサイズや太さのテキストスタイルを一括で登録することが可能です。
今回は以下の設定で、フォント名と太さは共通で、5つのサイズバリエーションになるように調整しましょう。

文字列:「ZKGN-48-R・ZKGN-32-R・ZKGN-24-R・ZKGN-16-R・ZKGN-14-R」

項目	値
フォント名	Zen Kaku Gothic New(ZKGN)
サイズ	48px(48) / 32px(32) / 24px(24) / 16px(16) / 14px(14)
太さ	Regular(R)

記述の形式は先ほどと同じで、サイズの数字のみ対応した数字に変わります。

1. テキストを打ち込んでフォントの設定を調整する。
2. テキストが合計5つになるように複製し、それぞれの文字列の数字部分と文字サイズを変える。
3. 続けて、タイポグラフィパネルの文字サイズをそれぞれ変える。
4. 全て選択してアクションパネルから「Generate Style」を実行する。

01. テキストを打ち込んでフォントの設定を調整する。

「テキストスタイルを登録する流れ」の「01. テキストを打ち込み、設定を合わせる。」で行ったように、
まずはテキストツールを使ってひとつ目のテキスト「ZKGN-48-R」を打ち込み、フォントの設定を調整してください。

02. テキストが合計5つになるように複製し、それぞれの文字列の数字部分と文字サイズを変える。

ひとつ目のテキストを選択し「Alt + ドラッグ」でひとつ複製し、
さらにCtrl + Dで複製を繰り返し、合計5つのテキストレイヤーを作ります。
ここでは、改行ではなく複製であることに注意してください。

複製したら、それぞれの文字列の中の数字部分をサイズに合わせたものに変えます。
さらに、タイポグラフィパネルの文字サイズをそれぞれのサイズに変えます。
以下のようになるように変更しましょう。

• ZKGN-48-R(文字サイズ設定・・・48px)
• ZKGN-32-R(文字サイズ設定・・・32px)
• ZKGN-24-R(文字サイズ設定・・・24px)
• ZKGN-16-R(文字サイズ設定・・・16px)
• ZKGN-14-R(文字サイズ設定・・・14px)

03 .全て選択してアクションパネルから「Generate Style」を実行する。

先ほどと同じように、ライブラリへの登録はプラグイン「Generate Styles」を使って行ってください。
先ほどと違うのは、ドラッグして全ての文字列を複数選択してから「Generate Styles」を使うことです。
これにより、複数のサイズや太さのテキストスタイルを一括で登録することができました。

テキストスタイルの使い方

さっそくライブラリに登録したテキストスタイルを使ってテキストレイヤーのフォント設定を変えてみましょう。
再びタイポグラフィパネルを確認すると、タイポグラフィパネルの表示が変わっているのがわかります。
フォント名が表示されていた部分をクリックしてみると、テキストスタイルパネルが表示され、
下に「Ag ZKGN-32-R」という表示があるのが確認できました。
この表示がテキストスタイルであり、クリックすることで使用することができます。