Figma で日本語テキストの見た目をよしなにする

Figma はUIデザインだけでなく、ある程度のグラフィックのデザインもできます。
テキストのある簡単なバナーなどの画像をつくる場合は、日本語のテキスもうまく扱いたいところです。
Figma で日本語テキストを扱う場合の文字間や調整について、簡単に何ができるかまとめてみます。

文字間: Letter Spacing

タイポグラフィのパネルの Letter Spacing で、文字間を調整ができます。

文字のサイズをベースにしたパーセントとピクセルでの指定ができます。数値をマイナスにして詰めることもできます。

日本語テキストの微妙なところに対応する

Photoshopでは「メトリクス」でよしなにするという方法もありますが、Figma ではオプション設定をする箇所が違います。タイポグラフィのオプションはちょっと潜った位置にあるので気づきにくいかもしれません。
 Alternate half widths や Proportional Alternative Widths を使うことで、 Photoshop　や　Illustrator　のような文字の調整も可能になります。

Alternate half widths

オプション Alternate half widths にチェックすると、いわゆる「約物半角」ができます。
 「」『』・（）、。 など、約物が混ざる際に、その文字に対して Alternate half widths のチェックを入れると「約物半角」の扱いになります。

Proportional Alternative Widths

OpenTypeのプロポーショナルフォントを使用する場合、オプション Proportional Alternative Widths にチェックを入れるとプロポーショナルメトリクスが適用されます。

まとめ

「約物半角」や「プロポーショナルメトリクス」の対応は 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デザインのプロジェクトでどんなふうにツールを活用しているのか、他のデザイナーのやりかたや実際に行っている作業内容などが知りたい方におすすめの内容です。