デザイン

2022.11.29

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

Figmaには、PhotoshopやIllustratorにあるような「縦書き文字ツール」がありません。
しかしWEBサイトやバナーのデザインで、テキストを縦書きにしたい!ということもあると思います。

今回はそんなお悩みを解決するために、Figmaでテキストを縦書きにする方法をご紹介します!

1. テキストボックスにテキストを入力する

テキストツール(T)を選択した状態でドラッグするとテキストボックスが生成されます。
その中に縦書きにしたいテキストを入力しましょう。

2. テキストボックスの横幅をフォントサイズと同じ数値にする

今回はテキストを40pxで設定していたので、テキストボックスの横幅も40pxに設定します。

横幅の数値をフォントサイズに変えると…

(ちょっと歪ですが)縦書きになりました!
しかしこのままでは伸ばし棒や句読点が気持ち悪いので調整していきます。

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

テキストオプションで「Vertical alternates」を有効にし、伸ばし棒や句読点も縦書きに揃うように設定します。

Vertical alternates を有効にすると、伸ばし棒や句読点が縦書きに揃いました!

最後に行間を調整すれば、完璧な縦書きテキストになります✨!

ちなみにこの方法…。
英語(アルファベット)ではうまくいかないので、日本語のときのみ使用してくださいね!

プラグインも不要のとっても簡単なやり方なので、ぜひお試しください!

この記事をシェアする

関連記事

  • 2022.08.26

    写真にたったひと手間加えるだけでオシャレに!?加工テクニック3選

    その他

    デザイン

    制作

  • 2022.08.04

    【Photoshop】消点(Vanishing Point)を使ってモックアップを作成する方法

    デザイン

    制作

  • 2022.07.07

    スケッチやラフ案に使える!iPadのおすすめ手書きメモアプリ3選【WEBデザイナー向け】

    デザイン

    制作

おすすめ記事

  • 2022.04.22

    【第1回】Photoshopでテキストの一部の色を変える方法!<初心者向け>

    デザイン

    制作

  • 2022.05.31

    超簡単!GoogleMapの色をサイトにあわせて変える方法

    コーディング

    制作

  • 2022.04.28

    【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~

    その他

    制作

×