Figma で日本語テキストの見た目をよしなにする
Figma はUIデザインだけでなく、ある程度のグラフィックのデザインもできます。
テキストのある簡単なバナーなどの画像をつくる場合は、日本語のテキスもうまく扱いたいところです。
Figma で日本語テキストを扱う場合の文字間や調整について、簡単に何ができるかまとめてみます。
文字間: Letter Spacing
タイポグラフィのパネルの Letter Spacing
で、文字間を調整ができます。
文字のサイズをベースにしたパーセントとピクセルでの指定ができます。数値をマイナスにして詰めることもできます。
![](https://wp.gaji.jp/wp-content/uploads/2022/06/image.png)
日本語テキストの微妙なところに対応する
Photoshopでは「メトリクス」でよしなにするという方法もありますが、Figma ではオプション設定をする箇所が違います。タイポグラフィのオプションはちょっと潜った位置にあるので気づきにくいかもしれません。
Alternate half widths
や Proportional Alternative Widths
を使うことで、 Photoshop や Illustrator のような文字の調整も可能になります。
Alternate half widths
オプション Alternate half widths
にチェックすると、いわゆる「約物半角」ができます。
「」『』・()、。
など、約物が混ざる際に、その文字に対して Alternate half widths
のチェックを入れると「約物半角」の扱いになります。
![](https://wp.gaji.jp/wp-content/uploads/2022/06/image-1.jpg)
Proportional Alternative Widths
OpenTypeのプロポーショナルフォントを使用する場合、オプション Proportional Alternative Widths
にチェックを入れるとプロポーショナルメトリクスが適用されます。
![](https://wp.gaji.jp/wp-content/uploads/2022/06/image-1-1.jpg)
まとめ
「約物半角」や「プロポーショナルメトリクス」の対応は Figma でも可能です。Letter Spacing
、Alternate half widths
や Proportional Alternative Widths
を組み合わせて、文字間や約物の扱いも含めた文字の調整ができます。
組み合わせについては Letter Spacing
と Alternate half widths
、Letter Spacing
と Proportional Alternative Widths
になるでしょう。
Alternate half widths
と Proportional Alternative Widths
を同時に使うことはあまりないと思います。Proportional Alternative Widths
で約物も調整されているので Alternate half widths
も併用すると文字間が詰まりすぎたり表示がマイナスになることもあります。
Proportional Alternative Widths
が使えると、ざっとテキストの並びの基本をそろえて、Letter Spacing
で細かな調整をする、というようなことができますね。
このような多少細かな日本語テキストの可能なので、簡単なテキストを含むグラフィックも Figma でできてしまえるかもしれないですね。
ご参考になれば幸いです。
Gaji-Laboでは、UIデザイナーを募集しています
弊社では手ざわりのいいUIを通して事業に貢献したいUIデザイナー、一緒にお仕事をしてくださるパートナーさんの両方を募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?
パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!
求人応募してみる!