[figma] 피그마 미러mirror 앱으로 디자인 모바일 환경에서 보기

안녕하세요. 당근입니다.

피그마에서 디자인을 한 다음에 재생버튼을 눌러 프로토타입을 볼 때 PC버전은 잘 나오지만 모바일 환경을 PC에서 미리보기 할 때 불편하잖아요.

브라우저 세팅으로 모바일 환경으로 맞출 수 있긴 하지만 한계가 있고요.

 

그래서 피그마에서는 피그마 미러(figma mirror)라는 앱을 통해 모바일에서도 모바일 환경에 최적화된 디자인 프로토타이핑을 볼 수 있는 환경을 제공하고 있는데요.

PC환경에서 모바일 프로토타이핑을 재생할 떄

오늘은 피그마 미러 사용법에 대해 간단히 알아볼까요?

 

앱스토어나 구글스토어에서 피그마를 검색하세요.

피그마 미러

이렇게 생긴 앱을 다운받으시면 됩니다.

 

figma mirror

앱을 실행하시면 로그인창이 떠요. 현재 작업중인 피그마에 로그인 되어 있는 아이디와 동일한 걸로 로그인해야겠죠?

저는 구글 계정으로 로그인했기 때문에 Log in with google을 선택하여 로그인했습니다.

select a frame

로그인을 하면 이렇게 생긴 창이 뜰텐데요. 여러분이 작업중인 PC환경으로 돌아가셔서 프레임을 선택만해주면 바로 모바일 뷰가 반영이 됩니다.

프레임 선택하기

이렇게 프레임이 파란색으로 활성화되게 선택해주세요. 그럼 특별히 재생버튼을 누르지 않아도 mirror에 바로 반영이 된답니다. 

간단하죠?

아이폰 11기준 화면

아이폰 11기준으로 잘 보이네요. 이렇게 미러를 사용해야하는 이유는 폰 환경에 정말로 어떻게 보이는지 알 수 있고 또 아이폰 같은 경우는 위에 노치가 있잖아요. 그래서 내부에 있는 콘텐츠가 가려지지는 않는지, 버튼 크기가 적당히 잘 나오는지 확인해봐야하기 때문입니다.

 

오늘은 피그마에서 디자인한 프로토타입을 모바일환경에서 볼 수 있는 앱 피그마 미러figma mirror에 대해 알아봤어요.

이상 당근이었습니다.