Figmaを使って、文字を縦書きにする方法をまとめてみた!

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

Figmaを使っていると、「日本語の縦書きテキストを使いたい」という場面が出てくることがあります。
本記事では、Figmaでテキストを縦書きにする方法と、その際の注意点について解説します。

Figmaで縦書きテキストを作成する手順

  1. テキストを選択し、プロパティから縦書きに変更
     Figmaでは、テキストの方向を「縦書き」に設定することができます。

  2. 「Vertical alternates」にチェックを入れる
     縦書き設定をしただけでは、長音符(ー)や句読点(、。)が横向きのままになってしまいます。
     このような文字を正しく縦向きに表示させるには、「Typography」内のVertical alternatesにチェックを入れる必要があります。


縦書きテキストの制限と対応策

Figmaでは縦書きに設定はできるものの、テキスト内で改行を行うことができません
そのため、改行を伴う長文を扱う場合は、テキストオブジェクトを複数に分割して配置するといった工夫が必要になります。


長文を縦書きにしたい場合のおすすめの方法

縦書きの長文を綺麗にレイアウトしたい場合は、Figmaでは限界があります。
その際は以下の手順がおすすめです:

  • Illustratorなど縦書きに強いデザインツールでテキストを作成

  • 作成した縦書きテキストをアウトライン化

  • Figmaにベクターデータとして読み込み

これにより、Figma内でも綺麗な縦書きデザインを実現できます。

しかし、Figmaでの日本語縦書きは簡易的には可能ですが、細かな調整や長文には不向きです。
縦書きにこだわるデザインには、Illustratorなどとの併用を検討するとスムーズです。