UX 디자이너의 피그마에
설치된 플러그인의 모든 것
쓰면서 정리하는 UX 디자인
2020년은 그야말로 피그마의 해였다. 디자인 업계에서 코로나19의 최대 수혜자 중 하나는 피그마 툴이 아닐까?
2019년 초부터 피그마를 사용하고 있었지만 지금처럼 활발하게 또 효율적으로 활용된 적은 없었다.
코로나 19가 터지고 재택근무, 온라인 프로젝트를 진행하면서 피그마는 없어서는 안 될 가장 강력한 툴이 되어버렸다. 같은 공간에 있지 않더라도 피그마 안에만 접속해 있으면 전세계 모든 사람을 만나 협업을 할 수 있다.
예민한 디자이너들에게 완성되지 않은 디자인을 보여주는 것은 매우 힘든 일 중의 하나라 여전히 스케치나 어도비 XD를 고수하는 디자이너도 있다. 그럼에도 불구하고 코로나 19가 종식되어도 피그마 유행은 계속 진행될 것이다.
피그마의 가장 큰 장점은 온라인에서 협업이 가능하다는 것인데 그것과 함께 정말 다양한 플러그인을 지원한다는 것이다. 2020년 초 대비 2020년 12월에는 정말 다양한 플러그인이 출시되었고, 웬만한 플러그인만 있으면 아이디에이션부터 프로토타입까지 모든 디자인 과정을 피그마로 해결할 수 있는 수준에 이르렀다.
UX 디자이너라면 다들 들어 봤거나 설치했을 플러그인에는 어떤 것들이 있을까?
스타트업이나 애자일팀에서 유용하게 사용할 수 있는 플러그인이다. 기획자와 디자이너가 프로젝트를 빠르게 진행하고 효율적인 문서 관리를 위한 툴이라고 할 수 있다.
디자인 콘셉트와 아이디어 도출을 위해 미로, 윔스킬, 노션 등을 이용하는 경우가 많은데 이 플러그인이 있으면 피그마 안에서 필요한 문서들을 작성할 수 있다.
개인적으로 유용하게 사용했던 템플릿은 브레인스토밍을 위한 Assumption Grid와 Persona Template, Project Overview을 종종 사용했다. 사실 이런 템플릿은 개인이 필요에 따라 그려도 무방하다. 다만 템플릿이 있는 게 편한 기획자 & 디자이너라면 필요에 따라 효율적으로 사용하면 좋을 듯하다.
가히 혁명적인 플러그인이라고 할 수 있다. 모든 웹페이지를 피그마의 레이어로 변환시켜주는 놀라운 플러그인이다. 기존의 웹사이트에서 영감을 받아서 일부 디자인을 그대로 적용하고 싶을 때 이 플러그인을 이용하면 손쉽게 레이아웃을 내 피그마 페이지로 불러올 수 있다.
해외 사이트는 전체의 80% 이상을 불러온다면 국내 사이트의 경우엔 60-70% 정도를 불러오는 것 같았다. 또한 페이지의 내용이 많을수록 불러들이는 시간이 꽤 오래 걸리는 건 약간의 단점!
Lo-fi 와이어프레임을 만드는데 시간을 단축시켜주는 플러그인이다. 웹과 모바일 버전의 와이어프레임을 모두 지원한다.
플러그인을 클릭하면 로그인 페이지부터, 메인 페이지, 헤더, 본문 스타일 등 다양한 와이어프레임을 제공한다. 디자이너의 창의성을 방해할 수도 있지만 빠른 작업을 위해서는 꼭 필요한 플러그인이다.
* Autoflow
Wireframe 플러그인에서도 플로우 기능을 제공하는데 Autoflow 플러그인의 경우, 이미 디자이너가 작업해 놓은 페이지의 플로우들을 쉽고 빠르게 연결시켜주는 데 최적화되어 있는 플러그인이다.
아래의 예시처럼 이미 디자인 페이지를 작업해 놓고 Autoflow를 클릭한 후 연결시키고 싶은 디자인 페이지를 누른 후 shift를 클릭하면 자동으로 화살표가 생긴다.
이미 작업해 놓은 디자인 페이지의 플로우를 보여주고 싶을 때는 Autoflow를 이용하면 손쉽게 플로우를 완성시킬 수 있다.
와이어프레임을 디자인할 때 안에 들어갈 내용들, 문자열, 이미지, 숫자, 아바타, 아이콘 등의 필요한 콘텐츠를 쉽고 효율적으로 추가시켜주는 툴이다. 그냥 이유 불문하고 설치해 놓기 바란다.
피그마의 기본 글꼴 선택기는 글꼴 미리보기를 제공하지 않는다. 그래서 폰트를 선택할 때 번거로움이 발생한다.
Better Font Picker 플러그인을 설치하면 포토샵처럼 폰트를 미리보기 할 수 있어서 작업하기 훨씬 수월하다.
그밖에 유용한 플러그인
*Find and Replace – 한 번에 글씨를 변경해 주는 플러그인
*Charts – 다양한 차트를 만들어주는 플러그인
* Unplash – 저작권에 구애받지 않는 다양한 이미지 제공
*Color Palettes -최적의 컬러 매칭을 위한 팔레트 기능 제공
* LottiesFiles -GIF 또는 SVG로 삽입할 수 있는 1000여 개 이상의 무료 Lottie 애니메이션을 액세스 하는 플러그인.
여기에 소개하지 않은 플러그인 중에서도 너무 많은 플러그인이 출시되었고 지금도 개발되고 있다.
피그마를 사랑하는 디자이너들이 증가하는 한, 피그마 환경은 개선될 것이며 더 쉽고 유용한 플러그인도 함께 성장할 것이다.
헤일리님이 브런치에 게재한 글을 편집한 뒤 모비인사이드에서 한 번 더 소개합니다.
