사이드프로젝트 시 도움 되는 피그마 플러그인
사이드프로젝트 꿀팁 for 디자이너
필자는 지난 2년간 사이드프로젝트 IT동아리 Mash-Up 에 프로젝트 디자이너로서 참여했다. 작년에 첫 사이드프로젝트를 했을 때와 올해 2번째 진행했을 때 더욱 성장했음을 느낄 수 있었는데, 그 때와 달리 프로젝트에 필요한 플러그인을 더욱 폭넓게 서치하고 활용하며 효과적으로 작업할 수 있었다. 나와 같은 사람들에게 도움 되길 바라는 마음에 이 글을 공유하게 되었다.
1.
Annotation Sticky Note
https://www.figma.com/community/widget/1125842729650935566
피그마 위젯에서 검색할 수 있는 Annotation Sticky Note는 화면에 대한 설명들을 작성할 수 있는 주석, 노트 위젯이다. 클릭 시 바로 피그마 작업창에 포스트잇형태의 주석이 나타난다.
이번 사이드프로젝트에선 아래와 같이 개발자에게 어떤 플로우로 작동하는지 프로토타입을 보지 않고도 바로 텍스트로 알 수 있도록 주석을 달 때 이 위젯을 사용했다.
피그마 코멘트나 프로토타입은 눌러야 콘텐츠가 보이는 번거로움이 있는데, 중요한 플로우의 경우에는 이 노트를 이용해 한눈에 볼 수 있는 점이 이 위젯의 장점이다. 또한, 노트를 적은 날짜, 작성자, 말풍선꼬리의 위치 및 색깔 모두 입맛대로 선택할 수 있어 사용이 매우 간편하다.
2.
Autoflow
https://www.figma.com/community/plugin/733902567457592893
화면 두 개를 선택하면 자동으로 화살표가 생성되는 플로우를 그릴 때 매우 유용한 플러그인이다. 화살표의 꺾임, 양쪽 화살표의 모양, 색상 등을 자유자재로 설정할 수 있다.
나의 경우엔 아래와 같이 와이어프레임 단계에서 특히 많이 사용했다. 어떤 플로우로 작동하는지 개발자와 효과적으로 공유하기 위해 이 플러그인을 사용했다.
3.
Spectral
https://www.figma.com/community/plugin/1177722582033208360
개발자도 피그마 Spec 섹션에서 간격을 확인할 수 있지만, 전부 다 확인하기 어렵고 실제로 개발단계에서 개발자가 디자이너에게 컴포넌트 간 간격을 자주 물어보는 상황이 발생했다.
따라서 key가 되는 화면에 각 컴포넌트의 간격을 표시하고자 했는데, 이때 이 작업을 일일이 하기에는 오버스펙이어서, 작업시간을 단축하고자 관련 플러그인을 서치 했다. 그리고 여러 spec 플러그인을 사용해 본 결과 이 플러그인이 가장 좋았다.
이번 사이드프로젝트에선 위와 같이 개발자에게 각 컴포넌트의 간격을 보여주기 위해 이를 사용했다.
단점이 있다면, 화면 아트보드를 이동할 때 간격을 표시한 플러그인이 따로 움직이지 않는다. 이 부분이 조금 불편했는데, 그래서 화면 수정단계가 거의 없는 최종단계 (High Fidelity)에 이 플러그인을 사용했다.
(이 작업 이후 실제로 개발자의 간격 피드백 요청은 거의 0에 수렴했다..!)
이번 사이드프로젝트는 굉장히 다양한 플러그인과 위젯들을 적극 서치하고 활용했다. 특히 플러그인은 자주 사용해 봤는데 위젯은 처음이라 굉장히 생소했지만, 유용한 위젯들이 많아 탐구하는 재미가 쏠쏠했다. 이처럼 효율적인 작업 방식을 고민하고 탐구하는 것 또한 디자이너로서 중요한 업무 아닐까라는 생각이 들었다.
#피그마 #디자이너 #피그마플러그인 #UXUI
#매시업 #MashUp #IT동아리
