#3 피그마 플러그인 사용법

피그마 설명서 3부, 플러그인 사용법

피그마를 제대로 활용하기 위해선 플러그인을 활용할 줄 알아야 합니다. 사실 플러그인을 추천해주는 글을 굉장히 많습니다. 그런데 많은 플러그인 글들은 그냥 추천만 해주고 사용법은 알려주지 않습니다. 많이 사용하는 건 알겠는데 어떻게 사용하는지 모르겠고 전부다 영어입니다.

처음에 플러그인 사용법을 배우기 위해 많은 시행착오를 겪었는데 이번 글에서는 저처럼 고생하지 말라고 가장 많이 사용되는 플러그인 5가지와 그 사용법을 설명드리도록 하겠습니다.

플러그인 사용법

일단 플러그인을 사용하는 법은 매우 간단합니다. 로그인 후 들어가시면 왼쪽 바를 보시면 자신의 아이디 그 아래는 'Recent' 포토샵의 활동기록 같은 것이니 넘어가고 그 아래 원래는 Plugin이라고 되어 있을 것입니다.

지금 제창은 커뮤니티 베타 버전을 신청해서 저렇게 변했는데 나중에 저렇게 바뀔 것이니 참고만 하시면 되고 Recent 아래가 바로 플러그인창이고 그냥 원하는 플러그인을 Install 하면 바로 설치됩니다.

피그마 플러그인창 (Community Beta 버전)

상단바에서 플러그인을 실행한 모습

마우스 오른쪽 클릭으로 플러그인을 실행한 모습

플러그인을 설치 완료하셨으면 작업하시다가 일반적으로 활용하는 법은 두 가지 있는데 상단의 이미지처럼 상단바에서 플러그인 목록으로 열거나 마우스 오른쪽 클릭으로 플러그인창을 활성화시켜서 사용하는 법입니다.

조금 더 간편한 방법이 있는데 이 방법은 맥 사용자만 가능합니다. 바로 키보드숏컷을 사용하는 것입니다. 일단 시스템 환경설정-키보드-단축키-앱 단축키로 들어가신 후 일단 하단의 +버튼으로 피그마를 활성화시킨 후 하단과 같이 원하는 플러그인을 추가하면 단축키로 실행 가능합니다.

스케치나 포토샵 모든 앱에 사용가능합니다.

주의 사항으로는 명칭을 올바르게 입력해야 되며 실행되고 있는 다른 앱과 단축키가 겹치면 안 됩니다. 플러그인 이외에도 다른 단축키들을 설정할 수 있지만 자체적으로 웬만한 것들은 단축키가 설정되어있어서 플러그인 정도 설정하는 것을 추천드립니다.

자신의 취향에 맞게 플러그인 사용법을 사용하는 것을 추천하며 플러그인도 남들이 많이 사용한다고 사용하는 것보다는 자신이 잘 사용하는 플러그인들을 사용하는 것을 추천드립니다.

추천 플러그인

다운로드 상위에 있는 플러그인중 제가 주로 사용하는 플러그인들 위주로 사용법과 같이 추천해드리겠습니다. 알고 싶은 플러그인이 있으시다면 댓글로 남겨주시면 설명드리겠습니다.

1) Unsplash

무료 이미지 사이트인 언스플래시를 바로 연동해주는 플러그인으로 다운로드 수 부동의 1위입니다. 언스플래쉬 사용법은 워낙 간단합니다. 하단의 이미지처럼 레이어를 클릭한 후 실행 후  Insert Random 또는 검색하여서 원하는 이미지를 넣으면 끝입니다.

주로 카드 형식 또는 갤러리 화면에 적용하며 이것을 레이어 마스크 개념이 아닌 도형에 맞게 이미지가 리사이징 되어서 들어가는 개념입니다. 위치 값을 변경하려면 도형 레이어를 crop 상태로 변경하여서 조정하시면 됩니다.

2) Content Reel

개인 작업할 때 정말 많이 사용하는 플러그인 중 하나입니다. 전화번호나 이름 또는 주소 등을 임의로 빠르게 입력할 때 사용합니다. 주로 이름을 임의로 설정하거나 프로필 이미지를 넣는 데 사용합니다.

상단의 이미지는 원형에 Avatars와 Name에 Full Name을 적용한 화면입니다. 다양한 항목들 중 Lorem Ipsum은 Content Reel로 사용하면 영역 밖으로 나가는 경우가 있어서 Lorem Ipsum플러그인을 사용하는 것을 추천드립니다.

3) Mapsicle

구글API 또는 네이버API를 사용하지않고 그냥 지도 이미지만을 사용할때 사용합니다. 전 세계 어디든 그냥 지도 이미지를 내가 설정한 영역에 맞게 자동으로 설정이 됩니다. 전 세계 어느 나라든 다크 모드, 라이트 모드 등 6가지의 모드로 사용 가능합니다.

위치나 가로세로 값을 바꾸고 싶다면 지도로 만든 도형을 클릭한 후 다시 Open Mapsicle을 클릭하면 자신이 설정한 값 그대로 나오기 때문에 수정 또한 간편합니다. 그리고 카메라 위치도 상하좌우 다양하게 조절이 가능합니다.

4) Rename It

여러개의 레이어이름을 한번에 바꿀때 사용합니다.피그마의 자체 Rename Layers 기능도 충분히 괜찮지만 좀 더 고도화된 사용법을 사용하고 싶으시다면 Rename It을 추천드립니다. 기본 Rename은 컴포넌트 이름과 숫자 정도 추가할 수 있지만 Rename It은 레이어 이름에 Draft이름, Page이름, 또는 그룹 안의 텍스트를 넣을 수 있으며 레이어의 가로 또는 세로 값을 이름으로 설정 가능하며 레이어 숫자도 대문자 소문자로 다양하게 설정 가능합니다.

왼쪽은 피그마 기본 Rename Layers, 오른쪽은 Rename It 플러그인 활성창

사용법은 스케치의 Rename It과 거의 동일합니다. 하단의 키워드를 클릭하여서 사용해도 되며 내림차순은 '%N' 오름차순은 '%n' 앞에 0을 붙이고 싶으시면 '%NN' 또는 '%nn'을 붙이셔서 사용하시면 됩니다. 키워드를 클릭하면 네임에 추가되며 제일 하단에 Preview가 나오니 사용하시다 보면 감이 오실 것입니다.

5) Lorem Ipsum

Lorem Ipsum은 주로 시안을 잡을 때 많이 사용하는 플러그인인데 텍스트를 영역으로 잡았을 때 해당 영역에 꽉 차게 텍스트를 채울 때 주로 사용합니다. 한글 입숨 플러그인도 나온다면 정말 좋겠지만 아직은 없다는 게 큰 단점입니다.

상단의 이미지와 같이 영역으로 되어있는 텍스트 안에 Auto-generate를 클릭하면 자동적으로 영역 안에 임의로 텍스트가 채워져서 카드나 갤러리 형식의 시안을 잡을 때 유용하게 사용됩니다.

다양해지고 있는 플러그인

스케치보다는 아직 플러그인에 수는 부족하지만 스케치에서 많이 사용하는 anima는 이미 피그마 자체 기능인 Auto Layout으로 더 성능이 뛰어나게 대체가 되었으며 이미 스케치에 있는 필수 플러그인들을 거의 피그마에도 탑재가 되었습니다.

많이 사용하는 것들 중 Stack이나 Google Sheets Sync, Autoflow, Feather Icon 등등 다양한 것들이 있지만 조금 예제와 설명이 필요한 Google Sheets Sync와 Stack 그리고 Zeplin은 따로 개별 포스팅으로 설명드리도록 하겠습니다.