Figmaでテキストを縦書きにする方法を紹介！

この記事ではFigmaでテキストを縦書きにする方法を紹介します。

Figmaでテキストを縦書きにする方法

早速Figmaでテキストを縦書きにする方法を紹介します。

Figmaでテキストを縦書きにする手順は下記の通りです。

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

まずは縦書きにしたいテキストを入力します。

「テキストツール」からテキストを入力出来ます。

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

1つ注意点があります。それは日本語フォントを使用することです。

後ほど説明する「Vertical alternates」は日本語フォントじゃないと反映されません。そのため縦書きにするテキストは日本語フォントを設定するようにしてください。

※「Noto Sans JP」「ヒラギノ角ゴシック」「Yu Gothic」などを使用すれば大丈夫です。

テキストの幅(width)と行間(Line Height)をフォントサイズと同じ値にする

続いてテキストの幅(width)と行間(Line Height)をフォントサイズに合わせます。

テキスト幅をフォントサイズと同じにすることで縦書きに変わります。

行間もフォントサイズと同じ値に変更します。

これで文章が縦書きになりました。

しかし、現在のままだと長音記号や句読点が横向きのままなので、これらも縦向きに変更します。

「Vertical alternates」を有効にする

長音記号や句読点は「Vertical alternates」で縦向きになります。

「Vertical alternates」を有効にする手順は下記の通りです。

上記の手順を踏むと長音記号なども縦向きに変わります。

※2025年現在、「字形」の中から「Vertical alternates」が無くなっており、句読点が縦書きに修正出来ない状況になっています。イラレで縦書きの文章を画像として書き出し、Figma上で貼り付けることをお勧めします。

あわせて読みたい

【Illustrator】文字を縦書きにする方法を紹介！ Illustratorで縦書きにする方法を知りたい この記事は上記の課題に向けて作成しています。 デザイン制作をしていると文字を縦書きにすることが頻繁にあります。 Illustr...

Figmaのプラグインで縦書きにする方法

プラグインを用いて縦書きにすることも出来ます。

使用するプラグインは「Vertja」です。

「プラグイン」→「プラグインを管理」から「Vertja」を検索する

縦書きしたい文章を選択した状態で上部メニューの「プラグイン」→「プラグインを管理」を選択し、検索窓で「Vertja」と入力します。

するとプラグイン「Vertja」が検索結果に表示されるので、選択して「実行」します。

Vertjaの設定画面から各項目を調整する

続いて設定画面から各項目を調整します。

Vertjaは6つの項目箇所があります。

これらを調整し、「Convert / Sync」をクリックします。

すると文字が縦書きに変更されます。

今回は試しに「Width：auto」、「Height：700」、「Letter spacing：20%」、「Line width：100%」、「Paragraph indent：0」、「Paragraph spacing：40」でやってみました。

あわせて読みたい

AdobeXDでテキストを縦書きにする方法を紹介！ XDではデフォルト機能でテキストを縦書きにする方法はありません。 ただし下記の方法で縦書きにすることが出来ます。 XDでテキストを縦書きにする方法 XDのプラグインで...

まとめ

この記事では「Figmaの通常機能で縦書きにする方法」と「プラグインを使用して縦書きにする方法」を紹介しました。

まだ実施したことのない方は是非やってみてください。