Figmaでテキストを縦書きする２つの方法

今回はFigmaでテキストを縦書きにする方法を紹介します。Figmaは日本語対応されていないので、テキストツールで縦書きの選択ができません。

しかし、工夫次第で縦書きに対応することができますので紹介していきます。

縦書きにする２つの方法

では、テキストオブジェクトを追加して、縦書きにしたい文章を準備して実践してみて下さい。

１文字ずつ改行する

縦書きになるように１文字ずつ改行しましょう。
一番簡単な方法ですが、２つの課題が出てきます。

1. 改行の手間が掛かるため、長文や修正に不向き。
2. 長音符（ー）や句点・句読点（、。）が横書きの書式のままになる。/li>

単語やキャッチフレーズなどの短文の場合は、この方法で良いと思いますが、長文の場合は次の方法をおススメします。

テキストオブジェクトのサイズを調整する

テキストオブジェクトの幅（Width）と行間（Line height）を、フォントサイズと同じサイズにしましょう。

上の画像のように、フォントサイズが「20」の場合、両方とも値を「20」にすることで、１行だけの縦書きの文章になります。

ただ、この方法でも長音符（ー）や句点・句読点（、。）が横書きの書式のままになってしまう課題は解決できません。

これを解決するための方法を次に紹介していきます。

「Vertical alternates」を「有効」にする

Textのオプションで「Vertical alternates」を「有効」にしましょう。
この設定がテキストを縦書きする一番のポイントといえます。

「Vertical alternates」を「有効」にする手順
1. 縦書きにするテキストオブジェクトを選択する
2. 右プロパティの「…」をクリックしてフォントの詳細設定のポップアップを開く
3. ポップアップ内の「Letterforms」に「Vertical alternates」があるので、スイッチボタンの「チェック」をクリックして有効化する

このような流れで「Vertical alternates」を有効化すると、長音符（ー）や句点・句読点（、。）などの横書きの方向になってしまっている文字が、縦書きの方向に切り替わります。

これで、１行だけですが縦書きで表現できるようになりました。

テキストを行ごとに分割して、Auto Layoutを使うことで擬似的に段組みを作ることもできます。

ただし、読み物など長文を組む場合は、従来通りAdobe Illustratorなどで文字を組んでアウトラインを書き出して、ベクターデータとしてFigmaにインポートすることをおすすめします。