takato（@n8takato）です！
Figmaで文字を縦書きにする方法を知りたい
この記事は上記の課題に向けて作成しています。
Figmaでは簡単に文字の縦書きが出来ます。
まだ知らない方は是非読んでください。
この記事を読むメリット
- Figmaで文字を縦書きにする方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
XDで文字を縦書きにする方法はこちら
Figmaで文字を縦書きにする方法
Figmaで文字を縦書きにする手順は下記の通りです。
- 縦書きにしたいテキストを入力
- テキストの幅をフォントサイズに合わせる
- 「Vertical alternates」を有効化する
縦書きにしたいテキストを入力
始めにテキストを入力します。
デザインツールからテキストを選択して入力します。
※「T」キーでテキスト入力のショートカットが出来ます。
テキストの幅をフォントサイズに合わせる
続いてはテキスト幅をフォントサイズに合わせます。
まずは「デザイン」の「テキスト」にある「幅の自動調整」を「高さの自動調整」に変更します。
※幅の自動調整のままだとテキスト幅が変えられないため、高さの自動調整に変更します。
続いて横幅をフォントサイズと同じ数値に変更します。
するとテキストが縦書きになります。
ただし、現状だと長音記号(ー)が横向きのままなので、縦向きに変更します。
「Vertical alternates」を有効化する
「Vertical alternates」を有効化すると長音記号も縦向きになります。
「タイプの設定」を選択します。
続いて「詳細設定」を選択し、字形の中の「Vertical alternates」を有効化します。
すると長音記号も含めて縦書きになります。これで完成です。
Figmaで文字の間隔を調整する方法
続いて縦書きの文字の間隔を調整する方法を紹介します。
縦書きの際の間隔は「行間」で調整する事が可能です。
行間は「テキスト」の中に含まれています。
数値を変更することで行間を調整出来ます。
Figmaで縦書きにする際の注意点
Figmaで文字を縦書きにする際、注意点があります。
Figmaで縦書きする際の注意点
- 日本語のフォントを設定する
使用するフォントは日本語である必要があります。
日本語ではないと「Vertical alternates」が表示されなくなります。
Figmaで文字を縦書きにする際は必ず日本語のフォントを選びましょう。
日本語のフォントは「Noto Sans Japanese」や「Noto Serif Japanese」などがあります。
Figmaで文字を縦書きにするのは簡単！
この記事ではFigmaで文字を縦書きにする方法を紹介しました。
Figmaの縦書きは簡単に実行出来ます。
まだやった事の無い方は是非試してみてください。
Figmaに関する記事はこちら
