크고 작은 문제들

[Figma] 이미지 export 시 테두리가 생기는 현상

노새두마리 2024. 6. 16. 18:45

문제

프레임 단위로 export된 이미지가 보이는 대로 저장되지 않고 여백을 함께 출력합니다.


해결

drop-shadow, blur 등 프레임 외부 영역에 표시되는 옵션을 내보내기 대상 프레임으로부터 숨김 또는 제거하여 보이지 않는 상태로 내려받습니다.

이미지 내보내기 시 프레임에 적용된 효과까지 함께 계산되어 저장되므로, 프레임의 콘텐츠만 깔끔하게 저장하고 싶다면 위의 효과들을 제거한 상태로 내보내기를 실행해야 합니다.

가령 그림자 효과를 css로 구현할 예정인 경우에는 그림자 효과가 적용된 이미지를 저장해야 할 이유가 전혀 없습니다. 따라서 디자인 상으로 그림자가 표현되어 있다면, 실제로 사용하기 위해 내려받을 때에는 해당 효과를 숨긴 상태로 내려받아야 합니다.

drop-shadow, blur 등 frame 외부까지 적용되는 효과 사용 시 위와 같이 영역이 추가됨
숨김 또는 제거 시 여백 없이 정상 출력


프로그램은 잘못이 없었습니다.


 

참고

좌표값이 정수가 아닌 경우 이미지에 오차가 발생할 수 있다는 글을 다수 참고하였으나 해당 문제와 관련이 없었음.

https://forum.figma.com/t/white-border-when-exporting-to-jpg/1999