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

Line heightとデザインデータ

‍
文字の改行時の幅を決める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. なぜエンジニアは困っているのか？
2. Line-Heightと余白のデータ/実装についての理解
3. 結論：どうやると良いのか？

‍

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

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

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

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

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

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

‍

動画で見せているFigjam

メンバー限定で公開

‍