[TIL-038] 디자이너와 협업하기 - 피그마 lineHeight

문제 발생

피그마의 텍스트

피그마 텍스트의 적용 값

플러터에 적용한 값

글자가 사라지는 상황

 

피그마로 협업하는 것은 처음이었다.

fontSize 16, lineHeight 24 로 설정되어 있길래 그대로 적용했다.

그러나 예기치 못한 상황 발생.....

글자가 보이지 않는다......

 

발생 이유 추측

과거에 퍼블리셔로서 포토샵을 사용할 때도 lineHeight는 px이 아니라 rem으로 변경해서 사용해야 했었다.

플러터도 단위를 변경해야 하는 것일까?

 

문제 발생 원인

피그마의 단위와 플러터의 단위가 다르기 때문이다.

 

1. 피그마의 기본 단위는 px
   
   • 피그마에서 글자 크기, 라인 높이, 여백, 프레임 등 거의 모든 값은 기본적으로 px(픽셀) 단위
   • 피그마의 px는 "디자인 상의 1픽셀"을 의미하며, 실제 디바이스의 물리적 픽셀과는 다를 수 있다
   • 피그마에서 단위를 따로 지정하지 않으면 모두 px이다
2. Flutter의 단위는 dp (Device-independent Pixel)
   
   • Flutter의 모든 크기(글자, 여백 등)는 dp(density-independent pixel) 단위
   • dp는 안드로이드에서 쓰는 단위로, iOS에서는 pt(point)와 거의 동일하게 동작한다
   • Flutter에서는 1dp = 1 logical pixel = 1pt (iOS)로 생각하면 된다
3. 피그마 px와 Flutter dp의 관계
   • 실무에서는 피그마의 px 값을 Flutter의 dp 값으로 1:1로 변환해서 사용하는 것이 일반적
   • 예를 들어, 피그마에서 16px로 디자인했다면, Flutter에서 fontSize: 16으로 사용

특히 플러터의 `TestStyle.height`는 `fontSize`에 대한 배수로 표현한다.

즉 fontSize: 16, height: 24 로 적용하면 16 * 24가 되는 것이다.

 

해결 방법

`플러터의 TextStyle.height = 피그마의 fontSize / 피그마의 lineHeight` 로 값을 변경하니 간단하게 해결되었다.