피그마 작업 효율을 높이기 위한 몇 가지 팁
프로덕트 디자이너가 제일 자주 사용하는 도구 중 하나가 피그마죠? 업무 시간에 많이 활용하는 도구인 만큼 잘 다루면 좋지 않을까 해서 제가 실제로 자주 쓰는 팁을 몇 가지 선별하여 가져와봤습니다. 플러그인과 단축키 두 분류로 나눴고요. 바로 ㄱㄱ하시죠.
플러그인
Similayer
선택한 레이어에 대해 내가 지정한 속성이 똑같은 레이어 모두를 선택해 주는 플러그인입니다. 다중 편집을 위해서는 변경할 레이어를 모두 선택해야 하는데, 이 플러그인이 모든 것을 해소해 줍니다.
(살짝 버그 같은 게 있는데, 선택 시에 아무런 속성이 안 뜬다면 다른 레이어 선택하고 다시 선택해 보세요! 사용에는 무리 없습니다 ㅎㅎ)
Styles & Variables Organizer
베리어블을 빠르게 수정할 수 있게 도와줍니다. 디자인 토큰을 적용할 때 용이합니다.자동으로 베리어블을 적용해 주는 플러그인도 있지만 잘못 적용되는 부분도 있기 때문에, 하나하나 확인해 가면서 베리어블을 적용해 나갈 수 있어 좋습니다. (컬러만 무료이고 나머지 속성은 유료지만 구매 가치가 있고, 컬러만 써도 업무 생산성이 오를 거예요)
Text Styler
이 녀석 최근에 알게 된 물건입니다. 텍스트 스타일 한정으로 이 녀석만 있으면 쓸데없는 시간을 소모할 걱정이 없습니다. 피그마 파일/페이지에 대해 지정한 라이브러리의 텍스트 스타일로 적용해 줍니다. 단점은 딱 하나.. 몇 회 사용만 무료라는 점.. 평생 쓰려면 구매해야 합니다.
Link Spacing Variables
수치 값까지 정의된 디자인 시스템이라면 꼭 사용해 보면 도움이 될 플러그인입니다. 컬렉션에 정의된 수치값을 토대로 패딩과 갭 등에 자동 적용해 줍니다. 개발자와 수치값을 디자인 토큰으로 소통한다면 필수!
Propstar
컴포넌트 베리언츠를 정리해 놓기 위해 씁니다. 필수는 아니고, 개발자와 소통을 돕기 위한 보조 도구라고 생각하시면 편합니다. 이 플러그인을 통해 베리언츠를 보기 쉽게 나열해 놓고, 피그마 Dev Mode 자체적으로 제공하는 ‘Open in Playground’ 기능을 활용하여 꼭 시연해보라고 한다면 컴포넌트를 정의할 때 큰 도움이 되리라 확신합니다.
단축키
Select all with same instance (인스턴스 선택 + cmd / + ‘saint’)
동일한 인스턴스 전체를 선택해 주는 피그마 고유 기능입니다. 이 기능으로 다중 편집에 자유로워질 수 있을 것입니다. (saint라고 쓰는 이유는 기억하기 쉬우라고)
Paste to replace (cmd + shift + R)
선택한 레이어를 미리 복사해 둔 레이어로 교체해 주는 단축키. 피그마 작업은 이 단축키를 아냐, 모르냐의 차이가 굉장합니다. 위에서 언급된 Similayer 플러그인, Select all with same instance 기능과 함께 활용할 줄 안다면 효율적으로 작업하는 손 빠른 디자이너 인정.
레이어 이동 단축키
부모 레이어 선택 (Enter), 자식 레이어 선택 (\ 역슬래시)
다음 레이어 선택 (Tab), 이전 레이어 선택 (Shift + Tab)
레이어 이동에 자유로워질 수 있다면, 위에서 언급한 모든 플러그인과 단축키를 뻥 안 치고 200% 활용할 수 있게 되실 겁니다. 기능을 따로따로 보면 별거 없어 보이지만, 섞어 사용하면 그 시너지가 몇 배로 가속되니 꼭 알아두시길 추천드립니다.
덧붙이는 말
위에서 언급드린 기술들(?)만 숙달한다면, 생각하는 시간을 더 벌 수 있을 것입니다. 우리 모두 야근 없는 생활을 위해 화이팅..! 많이 사용해 주시고, 도움이 되신다면 링크드인 디엠이나 댓글로 달아주세요! 엄청 뿌듯할 것 같아용 ㅎㅎ..
