[React Native]Figma에서 Export한 이미지 깨질 때

Figma로 디자인된 UI를 다룰 때 백터로 이루어진 SVG파일이 아닌 이미지를 PNG로 내려받아 화면에 랜더 시켜줄 때

디바이스에선 마치 이미지가 깨진 것처럼 흐리게 보일 때가 있습니다.

 

이미지 깨질 때 Example

Figma에서 export 할 때

시뮬/에뮬

시뮬/에뮬레이터에서 볼 때보다 debug 앱으로 내려받아 Android OS 디바이스에서 볼 땐 흐릿흐릿한 느낌이 더 도드라집니다.

Android OS 디바이스

---

해결 및 적용 후

퍼블리셔 분께 여쭤본 결과 Figma에서 Export 할 때 2~4 배로 내려받아,

코드상에서 Figma에 표기된 width,height를 적용해 주면 선명하게 보인다는 피드백을 받아 해결할 수 있었습니다.

Figma에서 export 할 때 배율 설정

... 

const Img = styled.Image`
  width: 155px;
  height: 116px;
`;

...

<ImgWrap>
   <Img source={IMG_CONGRATULATIONS} />
</ImgWrap>

...

적용 후 시뮬/에뮬

Android OS 디바이스