[Figma] 피그마 이미지 다운로드(Export) 시 사이즈 오류

안녕하세요.

오랜만에 피그마 관련글을 쓰게 되었네요.

오늘은 피그마에서 이미지 다운로드(Export)시 사이즈 달라지는 현상에 대해 알아보겠습니다. 

 

친숙한 우리의 피그마

 

 

디자인 작업을 열심히 마치고 개발자분에게 넘겼는데, 막상 이미지를 다운로드해 보니 디자이너가 작업한 사이즈보다 약 +1씩 다르게 나오는 경우가 있습니다. 

사실 피그마에서 이미지 다운로드(Export)시에 자주 발생하는 오류(?) 또는 현상인데요, 저도 그래서 작업 완료한 후 반드시 이미지 사이즈를 확인하는 절차를 거치고 있습니다. 

디자이너분 열심히 작업을 잘 해놓고 마지막에 다운로드 사이즈 때문에 실수가 생긴다면 정말 억울하겠죠.

아직도 저는 이게 피그마의 버그인 것 같지만 그나마 우리가 해볼 수 있는 수정 방안에 대하여 알아볼게요.

 

1. 작업 프레임을 소수점의 위치에 놓지 않는다.

이미지의 위치가 소수점인 예시화면

 

 

무척 당연한 이야기 같지만, 많은 프레임을 만들다 보면 의도치 않게 프레임의 크기나 위치가 소수점 값으로 설정 되는 경우가 생기곤 합니다. 작업 중 나도 모르게 프레임의 축이 소수점으로 배치되는 상황이 발생할 수 있다는 말이죠.

 

특히 이미지를 불러와서 작업했을 때나 아이콘을 만들었을 때 이런 현상이 자주 발생합니다.

예를 들어 상단의 이미지처럼,  X : 259.81 / Y : 143.5 라는 소수점의 위치에 80x76사이즈의 도형을 위치시켰습니다.

 

위 이미지의 결과물입니다. 다운로드시에 80x76의 사이즈가 81x77로 변경되어 있는 것을 볼 수 있죠?

이미지 크기가 변했습니다. 특히 도형과 이미지 사용시에 주의를 해야겠네요.

 

2. 피그마의 스냅 기능 이용하기

두번째 방법으로는 항상 켜놓으면 좋을 메뉴인데요.

피그마는 기본적으로 스냅 기능을 제공하여 객체들이 정확히 그리드에 맞춰지도록 하는 기능이 있습니다.

화면의 우측상단의 확대퍼센트 200% 버튼을 눌러 하위메뉴에서 Snap to pexel grid를 활성화하면 프레임이 소수점에 위치하는 일을 예방할 수 있습니다.

 

 

 

3. 플러그인으로 위치를 이동한다

세번째로는 플러그인을 이용하는 방법인데요.

Pixel Perfect 같은 플러그인은 소수점 값을 제거하고 정확하게 그리드에 맞추도록 도와줍니다.

소수점에 위치해 있을 때 선택하여 이 플러그인으로 간단하게 이동 할 수 있습니다. 

너무 한꺼번에 선택하여 맞출 경우 위치가 살짝씩 별할 수 있으니 주의하여 잘보면서 소수점을 제거해보면 좋겠습니다.

 

1. 화면 하단바에서 마지막 버튼의 Actions (커맨드+k)를 오픈합니다.

2. Pixel Perfect 를 검색해 주세요.

3. 위치를 수정할 프레임을 선 택 후 플러그인의 run 버튼을 선택합니다.

4. 위치가 잘 변경 되었는지 확인해주세요.

 

 

그 외에 크기를 확대시킬 때 소수점이 되었거나, 오토 레이아웃으로 자동 크기를 지정하다가 소수점이 되는 등의 여러가지 경우는 있으나

우리 디자이너 여러분은 잘 확인하실 수 있겠죠? (나도 잘 못함)

 

디자이너에게 보기에도 느끼기에도 치명적인 소수점!

저도 볼때마다 없애버리고 있지만 항상 여기저기서 튀어나오더라구요.

하지만 위 조건을 다 충족해도 가끔씩 나오는 1px

왜 나오는걸까요 🥲

 

감사합니다. 다음에 또 뵈요!