質問しよう
シリーズ目次

No items found.
トップ
/
/
質問:LineHeightの文字余白ってデザインデータとしてどう考えるべき? ※編集前
タイポグラフィ

質問:LineHeightの文字余白ってデザインデータとしてどう考えるべき? ※編集前

2023
6
26
スキルを上げて、創造のための武器を手に入れよう
すべての動画閲覧には、メンバーシップ加入が必要です
メンバー登録について

Line heightとデザインデータ


文字の改行時の幅を決めるlineheightという値があるのですが、大きくすると文字が上下に余白を持ってしまいます。
普通に使われる機能なのですが、あまり詳しくない方はぜひ1度理解を深めてみてください。

相談内容

Figmaのデータでlineheightの余白をどう考えるべきか?エンジニアにはなくしてくれと言われてしまったが...?

ポイント

  1. なぜエンジニアは困っているのか?
  2. Line-Heightと余白のデータ/実装についての理解
  3. 結論:どうやると良いのか?

1.なぜエンジニアは困っているのか?

  • Figmaでの見方を知らない
  • テキストにそもそもいくつの値が当たっているのかあまりわかってない

2.LineHeightと余白とデータと実装

  • どういうふうにズレるのか?
  • どう共有できていると良いのか?
  • ちなみに全て余白なしでデータ共有するとどうなるか?

3.結論に近い:トライ内容

  • データ共有方法を見直す = エンジニアが余白をちゃんと測ることができてない
  • エンジニアさんのビューを理解することはいかなる時も大事。(ある種顧客理解)
  • デザインシステムを簡易部分作成する

動画で見せているFigjam

https://www.figma.com/file/2wbOuIKnqyvqbrP3ioTn4x/エンジニア氏にline-height100%25にして余白なくしてと言われた?node-id=0-1&t=eWjEQ78QHpDro9cM-0そ

Line heightとデザインデータ


文字の改行時の幅を決めるlineheightという値があるのですが、大きくすると文字が上下に余白を持ってしまいます。
普通に使われる機能なのですが、あまり詳しくない方はぜひ1度理解を深めてみてください。

相談内容

Figmaのデータでlineheightの余白をどう考えるべきか?エンジニアにはなくしてくれと言われてしまったが...?

ポイント

  1. なぜエンジニアは困っているのか?
  2. Line-Heightと余白のデータ/実装についての理解
  3. 結論:どうやると良いのか?

1.なぜエンジニアは困っているのか?

  • Figmaでの見方を知らない
  • テキストにそもそもいくつの値が当たっているのかあまりわかってない

2.LineHeightと余白とデータと実装

  • どういうふうにズレるのか?
  • どう共有できていると良いのか?
  • ちなみに全て余白なしでデータ共有するとどうなるか?

3.結論に近い:トライ内容

  • データ共有方法を見直す = エンジニアが余白をちゃんと測ることができてない
  • エンジニアさんのビューを理解することはいかなる時も大事。(ある種顧客理解)
  • デザインシステムを簡易部分作成する

動画で見せているFigjam

https://www.figma.com/file/2wbOuIKnqyvqbrP3ioTn4x/エンジニア氏にline-height100%25にして余白なくしてと言われた?node-id=0-1&t=eWjEQ78QHpDro9cM-0そ

文字の改行時の幅を決めるlineheightという値があるのですが、大きくすると文字が上下に余白を持ってしまいます。
普通に使われる機能なのですが、あまり詳しくない方はぜひ1度理解を深めてみてください。

相談内容

Figmaのデータでlineheightの余白をどう考えるべきか?エンジニアにはなくしてくれと言われてしまったが...?

ポイント

  1. なぜエンジニアは困っているのか?
  2. Line-Heightと余白のデータ/実装についての理解
  3. 結論:どうやると良いのか?

1.なぜエンジニアは困っているのか?

  • Figmaでの見方を知らない
  • テキストにそもそもいくつの値が当たっているのかあまりわかってない

2.LineHeightと余白とデータと実装

  • どういうふうにズレるのか?
  • どう共有できていると良いのか?
  • ちなみに全て余白なしでデータ共有するとどうなるか?

3.結論に近い:トライ内容

  • データ共有方法を見直す = エンジニアが余白をちゃんと測ることができてない
  • エンジニアさんのビューを理解することはいかなる時も大事。(ある種顧客理解)
  • デザインシステムを簡易部分作成する

動画で見せているFigjam

メンバー限定で公開

No items found.
閉じる

0 Comments

Active Here: 0
Be the first to leave a comment.
Loading
Load Previous
Someone is typing...
No Name
Set
4 years ago
Moderator
(Edited)
This is the actual comment. It's can be long or short. And must contain only text information.
Your comment will appear once approved by a moderator.
Load Previous
No Name
Set
2 years ago
Moderator
(Edited)
This is the actual comment. It's can be long or short. And must contain only text information.
Your reply will appear once approved by a moderator.
Load More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Load More