【2024年】Figmaで文字を縦書きにする方法を紹介!

【2024年】Figmaで文字を縦書きにする方法を紹介!

※当ブログでは商品・サービスのリンク先にプロモーションを含みます。ご了承ください。

takato(@n8takato)です!

Figmaで文字を縦書きにする方法を知りたい

この記事は上記の課題に向けて作成しています。

Figmaでは簡単に文字の縦書きが出来ます。

まだ知らない方は是非読んでください。

この記事を読むメリット

  • Figmaで文字を縦書きにする方法がわかる

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナー・webディレクターとして勤務
  • webデザイナー3年、webディレクター1年目
  • web制作現場で学んだことを発信している人
目次

Figmaで文字を縦書きにする方法

Figmaで文字を縦書きにする手順は下記の通りです。

  1. 縦書きにしたいテキストを入力
  2. テキストの幅をフォントサイズに合わせる
  3. 「Vertical alternates」を有効化する

縦書きにしたいテキストを入力

始めにテキストを入力します。

デザインツールからテキストを選択して入力します。

※「T」キーでテキスト入力のショートカットが出来ます。

Figmaでテキスト入力する方法

テキストの幅をフォントサイズに合わせる

続いてはテキスト幅をフォントサイズに合わせます。

まずは「デザイン」の「テキスト」にある「幅の自動調整」を「高さの自動調整」に変更します。

Figmaで高さの自動調整を設定する方法

※幅の自動調整のままだとテキスト幅が変えられないため、高さの自動調整に変更します。

続いて横幅をフォントサイズと同じ数値に変更します。

Figmaで横幅をフォントサイズと合わせる方法

するとテキストが縦書きになります。

ただし、現状だと長音記号(ー)が横向きのままなので、縦向きに変更します。

「Vertical alternates」を有効化する

「Vertical alternates」を有効化すると長音記号も縦向きになります。

「タイプの設定」を選択します。

Figmaでタイプの設定を選択する方法

続いて「詳細設定」を選択し、字形の中の「Vertical alternates」を有効化します。

FigmaでVertical alternatesを有効化する方法

すると長音記号も含めて縦書きになります。これで完成です。

Figmaで長音記号も縦書きになった完成形

Figmaで文字の間隔を調整する方法

続いて縦書きの文字の間隔を調整する方法を紹介します。

縦書きの際の間隔は「行間」で調整する事が可能です。

行間は「テキスト」の中に含まれています。

数値を変更することで行間を調整出来ます。

Figmaで行間を調整して文字間を変更する方法
Screenshot

Figmaで縦書きにする際の注意点

Figmaで文字を縦書きにする際、注意点があります。

Figmaで縦書きする際の注意点

  • 日本語のフォントを設定する

使用するフォントは日本語である必要があります。

日本語ではないと「Vertical alternates」が表示されなくなります。

Figmaで文字を縦書きにする際は必ず日本語のフォントを選びましょう。

日本語のフォントは「Noto Sans Japanese」や「Noto Serif Japanese」などがあります。

Figmaで文字を縦書きにするのは簡単!

この記事ではFigmaで文字を縦書きにする方法を紹介しました。

Figmaの縦書きは簡単に実行出来ます。

まだやった事の無い方は是非試してみてください。

Figmaに関する記事はこちら

あわせて読みたい
【2024年版】FigmaにXDをインポートする方法を紹介! FigmaにXDをインポートする方法を知りたい この記事は上記の課題に向けて作成しています。 デザインツールをXDからFigmaに移行した人が多いかと思います。 その際Figma...
  • URLをコピーしました!
目次