카카오엔터프라이즈 디자인 팀
피그마 이전기 (2/2)
피그마 파일 정리 & 유용한 플러그인
막상 피그마로 스케치 파일을 이전한 이후에도 모두가 피그마에 익숙해지는 것이 중요했습니다.
프로젝트별로 피그마를 활용하는 경우도 있었지만, 여전히 스케치를 메인 툴로 사용하고 있었기 때문에 개개인의 피그마 툴 익숙도가 달랐어요. 아무래도 사용하는 툴을 전환하는 것이다보니 다양한 팀원들의 우려도 있었습니다.
피그마 이전작업을 시작하기 전, figJam 에서 나눠본 피그마에 대한 의견이전 편에 소개해드린 라이브러리 연결 작업 이후, 디자인을 꼼꼼하게 살펴보며 수정해야 했는데 이 과정에서 팀원들이 자연스럽게 피그마에 익숙해질 수 있었습니다.
Text, Color, Effect Style 등록하기
Sketch 파일에 등록된 텍스트 & 컬러 스타일이 잘 Import 되었는지 확인해봅니다. 피그마는 Sketch와는 다르게 Text style에서는 Color, Align을 따로 정해줄 수 없어요. 카카오워크의 경우 폰트의 color, align 별로 스타일을 지정해서 사용하고 있었기에 Text 스타일은 피그마에 맞는 방식으로 새롭게 정리했습니다.
유용하게 사용한 플러그인
컴포넌트를 옮겨오는 과정에서 연결이 끊어진 컴포넌트끼리 다시 연결시켜주거나, 중복된 컴포넌트 중 실제로 사용되고 있는 것이 무엇인지 파악하는 과정이 끊임없이 반복되었습니다. 이러한 작업을 유용하게 해 준 몇가지 플러그인을 소개합니다.
Style Organizer ★★★★★
페이지 단위로 사용된 컬러와 폰트 스캔
로컬/리모트 스타일 적용된 비율 퍼센트로 확인 가능
스타일이 적용되어 있지 않은 부분을 한번에 style 적용할 수 있음
Instance Finder ★★★★★
페이지에서 사용된 인스턴스 찾기에 용이함
But, 피그마 내에 있는' Quick actions(commend+/) -> Select all with same instance' 기능이 더 편해서 잘 이용하지 않음
Master (유료) ★★★★
연결이 끊어진 컴포넌트끼리 쉽게 링크해줄 수 있음
Pick target component -> Link objects to target component
무료 버전은 개수 제한이 있어 플러그인 구매 후 이용함
Design System Organizer ★★★
컴포넌트 구조 체계 정리에 용이함
새로 만든 라이브러리에 기존 스타일/컴포넌트을 export하고 relink 가능(유료인 master 플러그인을 쓰지않아도 되겠네요..)
Appearance ★★★★
다크모드가 적용된 모바일 라이브러리 정리 때 사용
컬러 스타일명 앞에 Light/Dark 로 구분하여 지정 후 사용하면 쉽게 라이트/다크모드 적용 가능
끝나지 않는 정리
피그마 이전 후 더 중요한 ‘잘 정리하고 관리하기’ 미션이 남아 있습니다.
디자인팀 내 팀원들과 유관 부서 기획, 개발자 분들과 다양하게 협업하는 과정에서 피그마 파일과 라이브러리를 잘 관리하고 유지하는 방식을 계속 고민하고 있습니다.
