Figmaならできる!コーダーがちょっと嬉しくなるテキスト設定

こんにちは、株式会社PentagonでUIデザイナー/Webデザイナーをしているmaoです。

私はデザインだけでなく、たまにコーディングもするのですが、コーダー目線に立ったときに「こういう設定してあると嬉しいな」と思ったテキスト設定があります。
しかもデザイナーにとってもメリットがあると思いましたので、Figmaでデザインする場合のテキスト設定についてご紹介します。

【こんな人に読んで欲しい】

  • Figmaを使用するWebデザイナー

【この記事を読むメリット】
コーダーが嬉しいデザインデータの作成をしつつ、デザイナーとしても楽なテキスト設定を知ることができます。

【結論】
Figmaだからこそできるテキスト設定をして、コーダーにもデザイナーにも嬉しいデザイン制作に役立てましょう。

目次

コーディングをするときに、コーダーはデザインデータのどこを見ているか

コーダーがデザインデータからコーディングをする時、テキスト設定の下記の部分を確認しています。

  • font-familly(フォント名)
  • font-weight(フォントの太さ)
  • font-size(文字サイズ)
  • line-hight(行間)
  • letter-spacing(字間)
  • text-align(文字寄せ)

デザインの観点を考慮しても重要な部分なので、上記を意識してデザイナーはデザインを組んでいます。

その中でも行間の設定を行う際、数値で入力されているデザイナーの方が多いのではないでしょうか?

例えば、15pxの文字の行間を2倍持たせたい場合、「15(px) × 2 = 30(px)」 なので、Figmaの行間設定箇所に30と入力、といった感じですね。

コーダーはコーディングの際、逆の手順を取っています。
行間30pxで文字サイズが15pxの場合、「30(px) ÷ 15(px) = 2」なので、line-heightを200%(2em)に設定、といった具合です。

そしてこれが結構面倒なんですよね。

例に出した行間30pxで文字サイズが15pxは簡単なので暗算できますが、行間22.2pxで文字サイズが15pxとか、行間34pxで文字サイズが16pxなどになると、電卓必須です。

line-hight(行間)を%で指定するとコーディングが楽になる

上記の面倒な計算を回避できるのがFigmaです。

Figmaの行間を指定する欄は、数値だけでなく%で指定できるんですよ。

字間の方はデフォルトで0%になっていますので、%で指定する方がほとんどだと思いますが、行間でも同じように%での指定が可能です。

%で指定してあげると、コーダーとしては計算の手間が減るのでとっても助かります!

line-hight(行間)を%で指定するとデザイナーにもいいことが

また、%で指定する際にはコーダーだけでなくデザイナーにとってもメリットがあります。

それはフォントサイズを変更した際にも、行間が影響を受けないということです。

例えば行間を30pxに指定して文字サイズが15pxだった場合、行間は十分なゆとりがあります。
ところが、文字サイズを30pxに変更しても行間は30pxのままなので、かなり窮屈です。
再度適切な行間を計算して数値を設定し直す必要があります。

それに比べて、行間を%で指定しておいた場合だと、文字サイズを変更したとしても影響を受けません。
文字サイズが15pxでも30pxでも、指定した%での行間を保持するのです。

PhotoshopやIllustratorでは%指定できないので、この点もFigmaを使用するメリットだと思っています。

まとめ

デザインを行う際には個人や組織によって、いろいろな手法やルールがあると思います。
ですので、今回ご紹介した「%で行間を指定する」という方法が採れない場合もあるでしょう。

行間を%で考えて数値入力していたデザイナーは、数値では無く%で指定してあげるとコーダーにもデザイナーにもメリットがありますので、ぜひ試してみてくださいね。

採用情報はこちら
目次