피그마 꿀팁: 'Mockup Library' 플러그인 사용해 피그마로 목업하기

예전에는 정말 포토샵을 많이 썻는데, 프로그램이 무겁기도 하고 키려면 시간이 좀 걸려서 번거롭기도 해서 그런지 점점 디자인 외의 프레젠테이션 파일 작업도 피그마에서 하게 되는 것 같습니다.

하지만 포트폴리오 목업의 경우, 어쩔수 없이 포토샵을 사용했는데, 대부분의 디자인 파일이 피그마에 있다보니 목업을 위해서는 화면을 일일이 Export 해야하는 번거로움이 있었습니다.

오늘은 이러한 번거로움을 줄여줄 수 있는 피그마 Mockup Library플러그인을 소개하려고 합니다.
Mockup Library플러그인을 사용하면 포토샵을 거치지 않고 다양한 perspective의 3D 목업도 가능하기 때문에 특히나 포폴을 위한 목업에 효과적입니다.

---

'Mockup Library'플러그인 사용방법

1. 먼저 피그마 Community > Plugings에서 'Mockup Library'플러그인을 Try it out을 눌러 설치합니다

 

2. 그 후 커뮤니티에서 Free Clay Mockups 파일을 찾아 엽니다 (해당 파일이 Mockup Library랑 연결된 파일입니다)

3. 해당 파일에 들어가서 마우스 오른쪽 버튼을 눌러 Mockup Library 플러그인을 실행시킵니다

4. Mockup Library 플러그인이 열리면, Distort로 가서 먼저 Target vector shape을 클릭합니다

5. 그 후 아트보드에서 원하는 View의 파일을 확인하고 Change This를 선택하면 Target vector shape에 해당 아트보드 프레임 명이 들어간 것을 확인 할 수 있습니다

6. 그 후 미리 불러 온 소스(원본 이미지)를 Paste here1에 원하는 뷰 대로 붙여넣고 해당 프레임을 선택하면 Source any layer of fram에 프레임 이름이 들어간 것을 확인할 수 있습니다

7.  Mockup Library 플러그인에서 Apply를 누르면 화면이 목업파일에 적용됩니다

8. 적용 후에 왼쪽, 오른쪽의 방향이 맞지 않게 적용된다면

8-2.  Mockup Library 플러그인 아래쪽에 방향을 사용해서 방향 조정도 가능합니다.

 

---

다만 무료료 제공하는 목업화면은 대략 4~5개 정도 밖에 없기 때문에 더 많은 화면 View를 원한다면 유료결제 후 진행해야하는 점이 조금은 불편할 수 있습니다. 하지만 사용법이 간단하고 퀄리티가 좋기 때문에 이 또한 큰 허들은 아니라고 생각합니다.