Figmaでテキストを縦書きにする方法を知りたい
この記事は上記の課題に向けて作成しています。
Figmaでは簡単にテキストの縦書きが出来ます。
まだ知らない方は是非読んでください。
この記事を読むメリット
- Figmaでテキストを縦書きにする方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
XDで文字を縦書きにする方法はこちら
Figmaでテキストを縦書きにする方法
早速Figmaでテキストを縦書きにする方法を紹介します。
Figmaでテキストを縦書きにする手順は下記の通りです。
Figmaでテキストを縦書きにする手順
- テキストを入力する
- テキストの幅(width)と行間(Line height)を調整する
- 「Vertical alternates」を有効にする
①テキストを入力する
縦書きにしたいテキストを入力します。
「テキストツール」からテキスト入力出来ます。
※「T」キーでテキスト入力のショートカットが出来ます。
※テキストは日本語フォントを使用するようにしてください。理由は後ほど説明する「Vertical alternates」の設定が日本語フォントでないと反映されないためです。
②テキストの幅(width)と行間(Line height)を調整する
続いてテキストの幅(width)と行間(Line height)を調整します。
テキスト幅はフォントサイズと同じ数値に設定します。
するとテキストが縦書きに変更します。
続いて行間を調整します。
今回の場合は文字同士の間隔の調整になります。
こちらはフォントサイズに合わせる必要が無いので、お好みのサイズに調整してください。
③「Vertical alternates」を有効にする
最後に「Vertical alternates」を有効にします。
「Vertical alternates」は長音記号である「ー」や句読点「、。」を縦書きの向きに合わせる設定です。
※今の状態だと長音記号が横向きのままなので縦向きに変える必要があります。
「Vertical alternates」を有効にする手順は下記の通りです。
「Vertical alternates」を有効にする手順
- 「タイプの設定」を選択
- 「詳細設定」を選択
- 「字形」の中の「Vertical alternates」にチェックを入れる
「タイプの設定」を選択
テキストを選択した状態で「タイプの設定」を選択します。
「詳細設定」を選択
続いて詳細設定を選択します。
「字形」の中の「Vertical alternates」にチェックを入れる
少し下にスクロールして「字形」の中の「Vertical alternates」にチェックを入れます。
すると長音記号や句読点が縦向きに変換されます。
※「Vertical alternates」の設定は日本語フォントでないと反映されないので気をつけてください。
テキストを縦書きにする手順は以上になります。
Figmaでは簡単にテキストを縦書きに出来る
この記事ではFigmaでテキストを縦書きにする方法を紹介しました。
Figmaでは簡単に縦書きにすることが出来ます。
まだ実施したことのない方は是非やってみてください。
Figmaに関する他の記事はこちら
