Figmaでの文字入れ方法とテキスト設定

• レッスンの内容
• Figmaでのテキスト入力の基本
• 基本のテキスト入力
• ツールを使ったテキストの拡大縮小
• タイプの設定と“テキストを省略”
• 概要文・投稿者・日時を入れよう
• 日本語設定に適したプラグイン

レッスンの内容

前回のレッスンで作ったカードデザインの枠組みに、テキストを追加しながら、Figmaでの文字入れ方法について学びます。

Figmaでのテキスト入力の基本

テキストツールを使って、カードデザインの文字部分を作ります。
テキストツールのショートカットキーはTです。

基本のテキスト入力

テキストツールで、catdフレームの内側をクリック。
カードのタイトル、ここでは「猫パークに行こう」と入力します。
入力が完了したら、Ctrlもしくは⌘＋enterキーで確定してください。

テキストを配置したい場所に移動します。
星が上にありすぎて邪魔なら、そちらも合わせて移動。

入力したテキストを選択状態にして、右サイドバーのデザインタブを確認します。
真ん中あたりに“テキスト”の設定項目があるはずです。赤線で囲った部分です。

“テキスト”の項目で、フォントサイズや文字の太さ、行間、揃え方などを設定します。
タイトルなので、Boldで太字、フォントサイズを大きめの“24”くらいにしておきましょう。

“塗り”を使って、文字色を青っぽい色に変更してください。
テキストリンク色になっているイメージです。

ツールを使ったテキストの拡大縮小

フォントサイズを変更したい時、移動ツールで拡大縮小しようと思う方もいらっしゃるかもしれません。
しかし、Figmaの場合は、移動ツールでサイズ変更をすると、文字を囲う四角（バウンディングボックス）だけが拡大縮小されます。

Adobeユーザーであれば、移動ツールの拡大縮小＝エリア内文字のような挙動になる、と思って下さい。

文字サイズを変えたい場合は、移動ツールの裏にある拡大縮小ツールを使います。

タイプの設定と“テキストを省略”

テキスト設定ブロックの右下にあるドットメニュー（アイコン）から、タイプの設定が開けます。
タイプの設定では、テキストに関する詳細設定が行えます。

アンダーラインを引くtext-decoration: underline;や、アルファベットの大文字小文字などを限定するtext-transformプロパティなど、CSSに準じた設定も可能。

よく使うのが、タイプの設定の一番下にある“テキストを省略”と最大行数。
この項目では選択しているテキストが「自動改行される長さの場合、どうするか」を設定できます。
CSSで言うと、line-clampもしくは-webkit-line-clampプロパティの指定です。

Webデザインあるあるで、文字が長くなった場合のレイアウトが想定されていない（コーダーにわかるように示されていない）というのがあります。“テキストを省略”を設定してあげると、親切で現実味のあるデザインになるでしょう。

テキストを省略の機能を使いたい場合は、テキストエリアの幅を指定する必要がある点にだけ注意して下さい。
幅が決まっていないと、折り返さない＝行単位の省略が効きません。

概要文・投稿者・日時を入れよう

では、残りのテキスト部分を入れていきましょう。

概要部分は、Lorem JPsumなどからダミーテキストをもらってきて貼り付けてください。

• 文字の太さとサイズを、Regular/16とWebページのデフォルトに設定
• テキストを省略を使い、3行を超える文は省略表示にする

必要に応じて、文字色や字間・行間を調整します。

カード下の投稿者名・日時は小さめのフォントサイズ（12）に設定しました。

カード下部、横並びのアイテムの高さは、揃えたいアイテムを選択して[ 垂直方向中央揃え ]で揃えると良いでしょう。
デザインタブ最上部にあるアイコン、もしくはショートカットキーを使って下さい。

日本語設定に適したプラグイン

Figmaでは、デフォルト状態だと選択できる日本語対応フォント（和文フォント）が少なく、めちゃくちゃ探しにくいです。
フォント名はアルファベット表記で、日本語のフォントプレビューも出ません。

使えるフォントを増やしたい、プレビューしながら日本語フォントを選びたい……という場合は、『Japanese Font Picker』などのプラグインを追加して対応します。
プラグインのページから、場所を指定して開く > 使いたいファイルを選択で追加できます。

https://www.figma.com/community/plugin/1222407847928087305/jp-font-switcher

デザインファイルが自動的に開き、プラグインを実行するボタンが表示されます。
実行を押すと、プラグイン『Japanese Font Picker』が表示されます。

テキストを選択して、『Japanese Font Picker』のウィンドウの方からフォントを選ぶと、反映されます。

『Japanese Font Picker』の注意点として、自分のパソコンにインストールされていないフォントは表示されません。
フォントが反映されないものは、まず、自分でフォントを探してパソコンにインストールする必要があるわけです。
Google Fontsで提供されているフォントが多いようなので、気になるフォントがあれば検索してみましょう。