Figmaでテキストを縦書きにする方法を知りたい
この記事は上記の課題に向けて作成しています。
Figmaでテキストを縦書きに出来たら制作の幅が広がりますよね。
しかし今現在（2024年11月）Figmaは縦書きに対応していません。
ただし、擬似的に縦書きにする方法があります。
今回は擬似的にテキストを縦書きにする方法を紹介します。
この記事を読むメリット
- Figmaでテキストを縦書きにする方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
このサイトは他にもXDやイラレで縦書きにする方法を紹介しています。
Figmaでテキストを縦書きにする方法
早速Figmaでテキストを縦書きにする方法を紹介します。
Figmaでテキストを縦書きにする手順は下記の通りです。
Figmaでテキストを縦書きにする手順
- 縦書きにしたいテキストを入力する
- テキストの幅(width)をフォントサイズと同じにする
- 「Vertical alternates」を有効にする
- 行間(Line Height)を調整する
縦書きにしたいテキストを入力する
まずは縦書きにしたいテキストを入力します。
「テキストツール」からテキストを入力出来ます。
※「T」キーでテキスト入力のショートカットが出来ます。
1つ注意点があります。それは日本語フォントを使用することです。
後ほど説明する「Vertical alternates」は日本語フォントじゃないと反映されません。そのため縦書きにするテキストは日本語フォントを設定するようにしてください。
※「Noto Sans JP」「ヒラギノ角ゴシック」「Yu Gothic」などを使用すれば大丈夫です。
テキストの幅(width)をフォントサイズと同じにする
続いてテキストの幅(width)をフォントサイズに合わせます。
テキスト幅をフォントサイズと同じにすることで縦書きに変わります。
ただし現在のままだと長音記号や句読点が横向きのままなので、これらも縦向きに変更します。
「Vertical alternates」を有効にする
長音記号や句読点は「Vertical alternates」で縦向きになります。
「Vertical alternates」を有効にする手順は下記の通りです。
「Vertical alternates」を有効にする手順
- 「タイプの設定」を選択する
- 「詳細設定」を選択する
- 「字形」の中の「Vertical alternates」にチェックを入れる
上記の手順を踏むと長音記号なども縦向きに変わります。
行間(Line Height)を調整する
最後に行間を調整します。
「行間」から調整することが出来ます。
以上でFigmaで縦書きにする方法は終了です。
このサイトはテキストのフォントを変える方法も紹介しています。
さらにFigmaでカーニングする方法も紹介しています。
Figmaでは擬似的にテキストを縦書きに出来る
この記事ではFigmaで擬似的にテキストを縦書きにする方法を紹介しました。
まだ実施したことのない方は是非やってみてください。