Figmaのテキスト編集周りの基本操作｜テキストの追加方法からグラデーション設定や縦書き、アウトライン化

今回はFigmaのテキスト関連の操作についてまとめておきます。

テキスト追加の基本

まずはツールバーから選択するか、Tを押して、テキストツールに切り替えます。

あとはテキストを追加したい位置をクリックすると、黒い線が表示されるので、キーボードで文字を打ち込みます。
escかcommand + enterで入力完了です。

テキストオブジェクトとなるので、入力後は移動ツールで移動させられます。

修正したい場合は、移動ツールの状態でテキストオブジェクトをダブルクリックするか、テキストツールでクリックすれば編集状態に切り替わります。

ポイントテキストとテキストボックス

テキストツールの状態でクリックすると「ポイントテキスト」と呼ばれる状態になりますが、ドラッグアンドドロップすると「テキストボックス」を作成できます。

ポイントテキストと違い、テキストボックスの場合は右端で自動的にテキストが折り返します。
複数行の文を流し込む場合はテキストボックスを使用しましょう。

ちなみに、ポイントテキストの横幅や高さを選択ツールで変更するとテキストボックスに変更されます。

テキスト選択時のプロパティエリア

テキストを選択しているときに、画面右のプロパティエリアの表示項目もテキスト用に切り替わります。

Text

［Text］プロパティでテキストの基本的な設定をします。

Fill

［Fill］プロパティではテキストの色を設定します。

色をクリックすると、別パネルが開いて色の指定ができます。

左上の「Solid」をクリックするとグラデーションや画像を塗りとして設定できたり、「バツボタン」の左隣にある「しずくアイコン」をクリックするとブレンドモードの変更ができます。

Stroke

［Stroke］プロパティではテキストのボーダー設定をします。

色の設定は［Fill］プロパティと同じですが、それに追加で「線の太さ」と「線の位置」を指定します。

線の位置に関しては下記の3つから選択します。

• Outside：文字の外側に線がつく
• Inside：文字の内側に線がつく
• Center：文字の中央に線がつく

拡大すると、Insideではテキストの塗りがどんどん埋まっていってしまうことが分かります。

Effects

［Effects］プロパティではテキストの特殊効果を設定します。

それぞれ左についてあるアイコンをクリックすると詳細な設定画面が表示されます。

やりたいこと

グラデーション

［Fill］プロパティで色を選択するときに「Solid」となっている部分を「Linear」に変更します。

あとは、開始色と終了色を選んで、テキストの上に表示されている線をドラッグしてどこからどこにグラデーションをかけるのか設定します。

「Linear」は直線のグラデーションですが、他にも下記があります。

• Radial：円形グラデーション
• Angular：時計回りグラデーション
• Diamond：ひし形グラデーション

カーニング調整

カーニング（文字詰め）調整を行いたい場合はテキスト編集の状態でoption + <もしくは>で文字間の調整ができます。

カーニング調整したい部分を選択した状態で、行いましょう。
ちなみに、テキストそのものを選択していると全体のカーニングが一気に変更されます。

縦書き

Figmaは縦書きに正式に対応しているわけではないので少々無理矢理になりますが、横幅とフォントサイズを同じにすることで、事実上縦書きになります。

ただこのままでは、「、」「。」「ー」などの記号が横書きの表示のままです。
そこで、［Text］プロパティの右下の「･･･」をクリックし、詳細パネルの中の「Letterforms」→「Vertical alternates」を選択します（フォントによってはこの設定がない場合もあります）。

これで記号も縦書き用になりました。

複数行の場合はコピーして必要な行だけ作る必要が出てくるので、Figmaで縦書きは「一応可能だが、適さない」と覚えておきましょう。

テキストのアウトライン化

アウトライン化をしたい場合は、メニューの［Object］→［Outline stroke］を選択するか、ショートカットキーでshift + command + Oが設定されてあるのでそれでアウトライン化しましょう。

アウトライン化すると、レイヤーパネルに表示されているアイコンも、テキスト用のアイコンからパス用のアイコンに変化します。