[피그마] 디자이너가 자주쓰는 figma 단축키 정리 (window, mac)

 

프로덕트 디자이너로써 자주 사용하는 단축키를 정리해 보려고 한다. 

이걸 알고 있느냐와 아니냐에 따라 디자인 작업 속도차이가 굉장히 많이 나기때문에 필수로 알고 있으면 좋다 :) 

 

 

---

Figma 기초 단축키 (툴바) 

figma를 처음 사용해보신분을 위해 아주 기초적인 단축키도 정리해 보았다. 

기초 단축키는 참고로 윈도우와 맥이 동일하다.

 

화면이동 : 스페이스 바 + 드래그 (drag)

 

이동 Move : V

 

프레임 Frame : F

 

도형그리기 Rectangle : R

 

펜 툴 Pen : P

 

텍스트 입력 Text : T

 

코멘트 달기 Comment : C

 

 

 

요정도가 기본툴 단축키가 될것같다. 

이제 디자이너 심화과정을 살펴볼까? 

 

Figma 디자이너 필수 단축키

복사 : 

(Mac) Option + 드래그 (drag)

(Window) Alt + 드래그

컨트롤씨 컨트롤 브이 말고 이제 편하게 복사하세요~

 

 

개체 직접 선택 : 

수많은 레이아웃 뎁스를 뚫고 원하는 개체를 한번에 선택할 수 있다.

(Mac) Cmd + 개체 클릭

(Window) Ctrl + 개체 클릭

그룹이나 프레임 등으로 묶여진 개체들중에, 커서에 포인팅 된 개체만 Depth에 상관없이 바로 선택할 수 있다.

 

 

개체 앞으로 가져오기 : 

단축키를 누르면 위 이미지와 같이 프레임 내 가장 상단에 위치하는 걸 알 수 있다.

(Mac) Cmd + ]

(Window) Ctrl + ]

 

개체 뒤로 가져오기 : 

(Mac) Cmd + [

(Window) Ctrl + [

다만 frame 안에서 fixed된 개체들보다 위로 이동할수는 없다. 각각 fixed와 scroll 안에서만 위로, 아래로 가져오기가 가능하다.

 

 

스포이드 툴 (컬러 선택) : 
(Mac, Window 공통) i

 

내비게이션 패널 숨기기 :

단축키를 누르면 네비게이션 패널이 사라지는 걸 볼수 있다.

(Mac) Cmd + \ 

(Window) Ctrl + /

누군가에게 내 피그마 화면을 보여줄때! 보여줄건 많은데 굳이 좁은화면에서 보여줄 필요는 없으니 아주 유용하다 ㅎㅎ 

 

 

오토 레이아웃 만들기 :

(Mac) Shift + a 

(Window) Shift + a

오토 레이아웃 해제 (Frame 으로 변경) : 

(Mac) Shift + Option + a 

(Window) Shift + Ctrl + A

오토 레이아웃을 해제하게 되면 그룹으로 돌아갈수는 없고 Frame으로 변경된다.

데브모드 (개발자모드) 변경 :

개발자모드 변경 전, 후

(Mac) Shift + d

(Window) Ctrl + Shift + i

간혹 피그마 편집모드에서는 멀쩡한데 개발자모드에서 간격이 소수점으로 나오거나 하는 경우가 있다. 그럴 때를 위해 작업도중 수시로 필수체크! 참고로 개발자 모드 변경은 Figma 개인에선 불가능하고, 팀단위인 유료 버전에서만 할 수 있다.

 

말풍선 : 

기록을 남기지 않고 대화하기 아주좋은 ㅎㅎ...

(Mac) /

(Window) /

Figma 를 사용하면 위와같은 말풍선으로 말을 거시는 분이 있는데, 당황하지 말고 / 키를 눌러보자

 

 

---

 

모쪼록 이 글이 많은 도움이 되었으면 좋겠다 🙂