Figmaでは縦書きテキストを作成する方法で擬似的な縦書き表現しかありませんでしたが、
今回は、擬似的な方法での縦書きと、プラグインを使用した方法を紹介します。
【手動】擬似的な縦書き方法
これまでよく紹介されている縦書き方法は、以下の手順で行います。
まず縦書きにしたいテキストを日本語フォントで入力してください。
テキストのフォントサイズを横幅に合わせて1行表示にします。
このままでは句読点や丸、伸ばし棒などがずれてしまうのでフォント設定で「Vertical alternates」をクリックして、句読点や伸ばし棒が最適化された縦書き表示にします。
ただし、この方法では長文テキストに使用したいとき、2行目に改行ができないので
1行ずつずらして擬似的に表現するといった少し使い勝手の悪い方法でした。
【プラグイン】Vertjaプラグインを使った縦書き方法
「Vertja」というプラグインを使用することで、縦書きが容易にできます。
プラグインページで「試す」をクリックし、自動インストールを行います。
日本語フォントを選択し、縦書きにしたいテキストを入力し、フォントの詳細設定で「Vertical alternates」を有効化します。
設定後、プラグインから「vertja」を選択し、設定の数値を記入して、「Convert / Sync」ボタンをクリックすると、縦書き表示に変換されます。
「Text content」に表示されているテキストボックス内の文字は編集可能で、任意の箇所で改行し、再度青いボタンを押すと縦書きに変換されます。
文中に英語が含まれている場合、文字の横幅の都合上表示が崩れてしまう時があります。
英語などがある場合は、「Full width」、もしくは「Half width」有効化します。
設定を行うと、綺麗に縦書き表記に変換されます。
Figmaで縦書きテキストを自由に表現できると、デザインの幅も広がります。ぜひ試してみてください
参考サイト
https://www.figma.com/community/plugin/1146329653004129345/Vertja
Vertja