질문사항
피그마 폰트 디테일 설정에서 버티컬 트림 우측 옵션 사용하면 시안과 실제 작업물이 다르게 나옵니다. 이유나 해결방법이 있나요?
답변
폰트 렌더링에 따른 차이가 발생해서 생기는 문제입니다.
Figma에서는 cap height를 기준으로 정렬할 수 있지만, 실제 개발에서는(웹 환경에서는) 줄 간격을 기준으로 페이지가 렌더링 되기 때문에 제대로 적용되지 않거나 시안과 개발 화면이 달라지는 문제가 발생합니다.
Figma 디자인과 구현된 화면과의 격차를 줄이기 위해서는 피그마 디자인내에 폰트 설정을 line-height 기준으로 설정을 변경해서 디자인 하시면 개발자와 동일한 수치로 작업이 가능해 해당 격차를 줄일 수 있습니다.
추가로 알면 좋을 팁
하실 때 ~~단축키나 플러그인 쓰시면 더 편해요.
작업할 때 추가로 알게 되면 좋을 팁을 함께 남겨주세요. 없다면 생략 가능합니다.