피그마 플러그인, 제대로 쓰고 있나
피그마를 쓰고 있지만, 솔직히 기본 기능만 썼다. 컴포넌트 만들고, 오토레이아웃 쓰고, 프로토타입 연결하는 정도. 플러그인은 뭔가 복잡할 것 같고, 배우기 귀찮다는 생각이 앞섰다.
그런데 어느 순간부터 해외 디자이너들 작업물을 보면서 의문이 생기기 시작했다. 분명히 나보다 속도가 빠른데, 퀄리티도 높다. 어떻게 하는 건지 파고들었더니 대부분 플러그인 활용 차이였다.
20년 넘게 디자이너로 일하면서 배운 게 하나 있다면, 시간이 곧 돈이라는 것이다. 반복 작업에 시간을 쏟을수록 정작 중요한 의사결정과 크리에이티브에 쓸 에너지가 줄어든다. 이 글에서 소개하는 플러그인 3가지는 그 반복을 대신 해주는 도구들이다.
1. Maps to Design — 주소 하나로 지도를 바로 피그마에 넣는다
이게 왜 필요한가
부동산 서비스, 배달 앱, 여행 플랫폼, 로컬 커머스. 지도가 들어가는 UI는 생각보다 훨씬 많다. 그런데 지금까지 디자인에 지도를 넣으려면 어떻게 했나? 구글 맵 캡처해서 넣거나, 스크린샷 잘라서 넣거나, 그냥 회색 직사각형으로 때웠다.
Maps to Design은 그 과정을 없애버린다.
어떻게 작동하나
사용 방법은 단순하다.
- 피그마에서 Maps to Design 플러그인 실행
- 원하는 주소 또는 좌표 입력
- 지도 스타일 선택 (라이트, 다크, 새틀라이트 등)
- 피그마 캔버스에 바로 삽입
결과물은 그냥 이미지가 아니라 실제 지도 데이터 기반의 벡터 레이어에 가깝게 들어온다. 줌 레벨도 조정 가능하고, 스타일도 커스터마이즈할 수 있다.
실무에서 이렇게 썼다
얼마 전에 부동산 스타트업 랜딩페이지 작업을 했다. 매물 위치를 보여주는 섹션이 있었는데, 클라이언트가 “실제 동네 느낌이 나야 한다”고 했다. 예전이라면 구글 맵 캡처를 여러 장 찍어서 포토샵에서 색 보정하고, 피그마에 옮기고, 다시 맥락에 맞게 자르고 하는 과정을 거쳤을 것이다.
Maps to Design을 쓰니까 주소 입력하고 스타일 선택하는 데 3분이면 됐다. 다크 모드 버전도 바로 만들었다.
특히 유용한 케이스
- 배달/라이드헤일링 앱: 출발지-도착지 경로 UI 목업
- 부동산/숙박 서비스: 매물 위치 표시 디자인
- 로컬 이벤트 페이지: 행사 장소 지도 삽입
- 투자 유치용 덱: 서비스 커버리지 시각화
2. HTML to Design — URL 하나면 웹사이트 전체가 레이어로
이게 왜 필요한가
경쟁사 분석을 해야 할 때, 레퍼런스를 정리해야 할 때, 클라이언트가 “이 사이트 참고해서 비슷하게 만들어줘”라고 할 때.
지금까지는 스크린샷 찍고, 잘라내고, 레이어 위에 올려놓고, 투명도 낮춰서 트레이싱하거나 참고했다. 번거롭고, 해상도도 안 맞고, 반응형은 따로 캡처해야 했다.
HTML to Design은 URL만 넣으면 그 웹사이트의 HTML과 CSS 구조를 피그마 레이어로 변환해준다.
어떻게 작동하나
- HTML to Design 플러그인 실행
- URL 입력
- 변환 옵션 선택 (페이지 전체 / 섹션 지정)
- 피그마 레이어 트리로 가져오기
가져온 결과를 보면 꽤 놀랍다. 텍스트는 텍스트 레이어로, 이미지는 이미지 레이어로, 컨테이너는 프레임으로 분리되어 들어온다. 완벽하게 1:1로 옮겨지진 않지만, 작업 출발점으로 쓰기엔 충분하다.
실무에서 이렇게 썼다
클라이언트가 “글로벌 SaaS 사이트들처럼 만들어달라”고 했다. 레퍼런스가 영어 사이트 5개였는데, 각 사이트의 히어로 섹션, 피처 섹션, 프라이싱 섹션을 HTML to Design으로 가져와서 나란히 놓고 비교 분석했다. 그리드 간격, 폰트 사이즈 비율, 버튼 크기 패턴을 비교하니까 클라이언트한테 설명할 때도 훨씬 설득력이 생겼다.
디자인 방향 잡는 데 반나절도 안 걸렸다.
특히 유용한 케이스
- 경쟁사 벤치마킹: 여러 사이트 한 캔버스에서 비교
- 레퍼런스 분석: 그리드 시스템, 타이포그래피 스케일 파악
- 리디자인 작업: 기존 사이트 구조를 베이스로 수정
- 클라이언트 설득: 레퍼런스를 실제 레이어로 분리해 설명
주의할 점
퍼블릭하게 공개된 웹사이트에서만 사용하는 게 맞다. 저작권 이슈가 있는 소스를 그대로 납품하면 문제가 생기니까, 어디까지나 분석과 참고 용도로만 써야 한다.
3. Wanna This — 클릭 몇 번으로 실제 같은 목업 완성
이게 왜 필요한가
디자인을 다 했는데, 클라이언트한테 보여줄 때 플랫 화면으로만 보여주면 임팩트가 약하다. 특히 앱 디자인의 경우, 실제 폰에 올라가 있는 모습을 보여줘야 “아, 이런 느낌이구나” 하고 실감한다.
기존에는 목업 만들려면 Mockup World 같은 곳에서 PSD 파일 받고, 포토샵에서 스마트 오브젝트에 디자인 끼워넣고, 피그마로 다시 가져오는 과정을 거쳤다. 한 번 만들고 끝나면 괜찮은데, 수정이 생기면 이 과정을 반복해야 한다.
Wanna This는 이 과정을 피그마 안에서 끝낸다.
어떻게 작동하나
- 내 디자인 프레임 선택
- Wanna This 플러그인 실행
- 원하는 디바이스 목업 선택 (아이폰, 맥북, 아이패드 등)
- 자동으로 해당 화면에 디자인이 삽입된 목업 생성
고퀄리티 디바이스 이미지에 내 디자인이 자연스럽게 합성되어 나온다. 조명, 그림자, 화면 반사까지 이미 잘 처리되어 있어서 별도 후작업이 거의 필요 없다.
실무에서 이렇게 썼다
포트폴리오를 정리할 때 제일 많이 쓴다. 작업물마다 목업 이미지 하나씩 만들어야 하는데, 예전에는 작업물 10개면 목업 만드는 데만 반나절이 걸렸다. 지금은 Wanna This로 작업물 10개 목업을 1시간 안에 만든다.
클라이언트 제안 덱에 넣을 때도 마찬가지다. “이렇게 만들면 실제로 이렇게 보입니다”를 보여주는 데 목업이 결정적인 역할을 한다.
특히 유용한 케이스
- 포트폴리오 정리: 일관된 스타일로 작업물 목업 제작
- 클라이언트 제안서: 실사 느낌의 프레젠테이션
- 소셜 미디어 공유: 비핸스, 드리블 업로드용 이미지
- 앱 스토어 스크린샷: 실제 디바이스 화면 합성
세 가지 플러그인 한눈에 비교
| 플러그인 | 핵심 기능 | 가장 유용한 상황 | 난이도 |
|---|---|---|---|
| Maps to Design | 주소 → 지도 레이어 | 위치 기반 서비스 디자인 | 쉬움 |
| HTML to Design | URL → 피그마 레이어 | 경쟁사 분석, 레퍼런스 정리 | 보통 |
| Wanna This | 디자인 → 고퀄 목업 | 포트폴리오, 제안서, 발표 | 쉬움 |
플러그인 도입할 때 고려할 것들
플러그인이 편리하다고 무조건 쓰라는 게 아니다. 실무에서 몇 가지 기준을 가지고 있다.
학습 비용 대비 시간 절감 효과를 먼저 따진다. 쓸 때마다 설정이 복잡하고 결과를 많이 수정해야 한다면, 그냥 직접 하는 게 나을 때도 있다. 위 세 가지는 처음 써보는 사람도 10분 안에 익힐 수 있는 수준이라 진입 장벽이 낮다.
팀 작업이라면 공유 가능한지 확인한다. 플러그인 결과물이 피그마 네이티브 레이어로 들어오는지, 외부 연동이 필요한지에 따라 팀 협업 시 복잡해질 수 있다. 위 세 플러그인은 모두 피그마 레이어로 결과가 떨어져서 핸드오프나 협업에 무리가 없다.
개발자 핸드오프 시 주의점도 있다. HTML to Design으로 가져온 레이어는 구조가 지저분할 수 있다. 참고용으로만 쓰고, 실제 개발에 전달할 파일은 따로 정리해서 만드는 게 맞다. Wanna This로 만든 목업도 마찬가지—최종 납품 파일에는 목업이 아닌 실제 디자인 프레임을 전달해야 한다.
마치며
20년 넘게 디자인하면서 가장 크게 든 생각 중 하나는, 도구를 잘 쓰는 것도 실력이라는 것이다. 처음엔 툴에 의존하는 게 실력을 감추는 것처럼 느껴졌는데, 지금은 반대로 생각한다. 반복 작업을 빠르게 처리할 수 있어야 진짜 중요한 판단과 결정에 에너지를 쓸 수 있다.
이 세 가지 플러그인이 모든 프로젝트에 다 맞지는 않는다. 하지만 위치 기반 서비스 디자인하거나, 레퍼런스 분석하거나, 포트폴리오 정리할 일이 있다면 한 번은 써보길 권한다.
한 번 써보면 왜 해외 디자이너들이 이걸 쓰는지 바로 이해가 된다.
이 글이 도움이 됐다면 북마크 해두고, 비슷한 고민을 하는 디자이너 동료에게 공유해 주세요.