UXUI 툴의 최강자인 피그마, 그 중에서도 플러그인을 어떻게 활용하고 계신가요? 피그마를 활용하여 업무 속도를 개선했던 경험을 전해드릴게요.😀
1.1 피그마 플러그인에 대해
🎨
피그마 플러그인이 뭔데?
기획 혹은 디자인을 진행하기 위해 작업자는 자신만의 재료들을 모은다. 파운데이션이 되는 뼈대의 템플릿을 모으기도 하고, 각각의 컴포넌트들을 모으기도 한다. 그리고 반복되는 작업 혹은 생성이 필요한 작업을 자동화 시켜주는 ‘플러그인’이 존재한다. 마치 엑셀의 매크로의 기능과 유사하다고 생각하면 쉽다.
사실 피그마가 아닌 다른 디자인 툴에서도 플러그인은 존재하지만 주로 외부에서 소스를 가져오거나 라이브러리 기능이 제공되지 않는 경우도 있다. 피그마는 이러한 단점들이 보완되어 플러그인을 아주 손쉽게 사용해볼 수 있다.
반복되는 작업을 단 몇초만에 완성시키고, 필요한 결과물이 있다면 손쉽게 생성도 도와주니 업무 속도를 높여주는 데에 일등공신이다!
1.2 플러그인 사용으로 업무 개선했던 사례 모음
🕵🏻
실무에서 어떻게 사용하는지 엿볼 수 있는 기회!
플러그인의 종류도 엄청나고 같은 기능 중에서도 작업자들 사이에서 좋다고 입소문이 난 플러그인도 있다. 보통은 자주 쓰는 플러그인을 따로 정리해두기도 하고, 필요에 따라 Community에서 키워드를 검색 후 사용하기도 한다.
1.2.1 피그마 페이지에 ‘표를 만들어’ 기획 문서 작성하기
📌
활용 플러그인: Table Creator
기존에는 웹/앱을 기획할 때, 다양한 기획 문서들을 PPT 혹은 엑셀로 작성했다. 워터폴 형식으로 작업을 할 시에는 기획이 많은 수정을 거친 후 픽스된 후 화면설계서가 최종 산출물로 나오지만, 애자일 형식으로 작업을 할 시에는 스프린트 별, 여러 작업자가 공동으로 작업을 하며 각각의 문서가 필요할 때가 많다.
‘A 정당 2024 국민참거선거인단’ 사이트를 구축할 때의 사례를 소개한다. A 정당은 2024년에 창당한 신당이기에 기존의 유저 데이터와 많은 정보가 부족했고, 4월의 총선을 앞두고 ASAP의 상황으로 국민참거선거인단 페이지와 기능 구축이 필요했다. 이 때, 루와의 SW개발팀과 디자인팀은 빠른 협업 속도를 보여준다.
▶스프린트별 업무를 분류하고 [화면 목록/정책/기능]을 각각 문서로 정리한다. 이 때, 열과 행의 개수만 입력하면 5초 안에 테이블이 자동으로 완성되는 Table Creator 플러그인을 사용했다. 플러그인이 없었다면 표를 하나하나씩 그리고 있었어야 했다. 무료로 이렇게 유용한 기능을 사용할 수 있음에 감사함을 전한다.
플러그인-Table Creator
스프린트별 기획 문서 제작 사례
1.2.2 그래픽 툴을 사용하지 않고, 자동으로 ‘풍선 효과’ 디자인 만들기
📌
활용 플러그인: glyf - 3D Design Assets
이번 루와 홈페이지 리뉴얼을 기획하면서 메인 페이지의 썸네일에 대한 고민을 가장 많이 했었다. 아무래도 우리 회사 홈페이지의 얼굴인 역할을 하기에 고민을 많이 하였고, 다양한 버전의 디자인 작업물도 산출되었었다. 그 중 최종 선택은 ‘플러그인’으로 제작한 디자인이었다.
▶플러그인을 선택한 뒤, 이미지를 올리고 원하는 설정값을 조정 후 [render]만 클릭하면, 빠르게 작업물이 완성된다. 물론 포토샵이나 일러스트의 파이어플라이를 활용하여 작업도 가능하나 프롬프트 내용을 입력하고 풍선 소스를 모아서 작업해야하는 번거로움이 있다. 그것도 아니라면 직접 제작하는 방식이 있으나 피그마 플러그인이 가장 빠르다!
1.3 추천하는 필수 플러그인 0가지
💡
이것만은 꼭! 알아두자
유용한 플러그인을 미리 많이 알면 알수록 실무에서 사용할 기회가 더욱 많아진다!
1.3.1 Unsplash
디자이너들이 무료, 저작권 프리의 이미지 소스를 찾을 때 유용하게 사용하던 Unsplash가 피그마 플러그인에도 있다. UXUI 디자인을 피그마로 할 때에는 더미 이미지를 많이 사용하게 되는데, 외부에서 더미 이미지를 서칭하고, 다운받고, 가져오는 번거로움을 완전히 없앨 수 있다.
이미지가 들어갈 영역에서 우클릭하여 플러그인을 실행 후, 원하는 이미지를 클릭만 하면 자동으로 영역 안에 이미지가 생성된다.
1.3.2 Styler
디자인시스템을 구축할 때, 유용하게 사용할 수 있는 플러그인이다. 정해진 시스템을 정리한 뒤, 일괄 선택 후 [우클릭 > Plugins > Styler > Generate Styles]을 실행하면 한 번에 Local styles가 생성된다.
1.3.3 Clean document
빠르게 작업을 하다 보면 프레임 사이즈가 소수점 이하로 남는 경우가 더러 있습니다. 이 때, 플러그인을 활용하면 전체 레이어를 일괄적으로 소수점 정리 작업을 진행할 수 있습니다.
