[UIUX] 피그마(Figma) 사용법, 단축키 안내, 맥 / 윈도우

피그마 로고

창의적인 도구가 인터넷을 만나면?

UIUX 디자인의 수요가 많아지면서 UIUX를 표현하기 위한 툴 또한 다양해졌습니다. Adobe에서 나온 XD, Photoshop, 맥의 Sketch 그리고 Zeplin 이 있는데요, 2021년 UI 디자인 통계에서 피그마(Figma)의 점유율 가장 높게 차지했습니다. 피그마는 웹과 앱 모두 자연스러운 동작으로 이용이 편리하고 가볍습니다!
팀원들과의 공유에 있어서도 링크 하나로 빠르게 공유되고 링크로 프로젝트에 접근하는 사람도 별도의 설치 없이 이용할 수 있어 간단하죠.
피그마의 주요 특징에는 실시간 업데이트 되기때문에 팀원들 모두가 결과물의 최신 상태를 늘 확인 할 수 있고, 한 파일 내에서 여러명이
동시에 작업물을 만들며 빠른 피드백이 가능합니다.
게다가 브라우저에서 돌아가는 장점으로 자동 저장과 함께 작업물에 대한 과거 내역 또한 쌓이게 됩니다.
피그마에서 작업한 작업물은 프로토타입핑 하여 실제 동작들에 대한 플로우를 볼 수 있습니다.

 

 

 

 

피그마에서 제공하는 공식 단축키 모음을 보시려면 피그마 화면 하단의 물음표 버튼을 눌러

keyboard shortcuts로 진입하시면 됩니다. 또는  control + shift + ? 

 

 

쉽고 빠른 UIUX 디자인을 위한 피그마 단축키 사용법 정리

퀵 액션 Quick Action

피그마 퀵 액션

Mac	command + /
Window	Ctrl + /

View 이동

Mac / Window

space bar + drag

View 화면 확대 / 축소

Mac	확대 Command + ( + key ) / 축소 Command + ( - key )
Window	확대 Ctrl + ( + key ) / 축소 Ctrl + ( - key )

View 왼쪽(Layers, assets) 패널 숨김

Mac	Command + Shift + \ (backslash)
Window	Ctrl + Shift + \ (backslash)

View 작업 화면 확장

Mac	Command + \ (backslash)
Window	Ctrl + \ (backslash)

View Zoon to fit (전체화면)

Mac / Window

Shift + 1

View Zoom to selection (선택영역으로 이동)

Mac / Window

Shift + 2

View Frame 이동

Mac / Window

다음 프레임 N / 이전 프레임 Shift + N

View Pixel grid visible / hidden

Mac / Window

Shift + '

View Rulers visible / hidden

Mac / Window

Shift + R

View Outline

Mac / Window

Shift + O

View Comment visible / hidden

Mac / Window

Shift + C

View Multiple player cursor

Mac	Command + option + \
Window	Ctrl + Alt + \

Frame ( Artboard ) 이름 바꾸기

Mac	Command + R
Window	Ctrl + R

Frame ( Artboard ) 만들기

Mac / Window

A 또는 F

레이어, 도형 복사

Mac	option + drag
Window	Alt + drag

도형 복사 후 반복

Mac	command + D
Window	Ctrl + D

도형 그리기 사각형

Mac / Window

R

도형 그리기 원형

Mac / Window

O

도형 그리기 라인

Mac / Window

L

도형 정렬

Mac	option + W(위) , A(왼) , S(가운데) , D(오)
Window	alt + W(위) , A(왼) , S(가운데) , D(오)

 

※폴리곤과 별 모양은 단축키 없음

좌우 반전

Mac / Window

shift + H

텍스트 추가 하기

Mac / Window

T

텍스트 크기 조절

Mac	Command + Shift + < or >
Window	Ctrl + Shift + < or >

텍스트 두께 조절

Mac	Command + option + < or >
Window	Ctrl + Alt + < or >

텍스트 자간 (letter spacing)

Mac	option + < or >
Window	Alt + < or >

텍스트 행간 (line height)

Mac	Shift + option + < or >
Window	Shift + Alt + < or >

텍스트 정렬

Mac	Command + option + L (왼) or T (가운데) or R (오)
Window	Ctrl+ Alt +  L (왼) or T (가운데) or R (오)

command + option + L스케일

Mac / Window

K

서식 복사, 붙여넣기

Mac	Command + option + C or V
Window	Ctrl + alt + C or V

코멘트 생성

Mac / Window

C

면과 선 바꾸기

Mac / Window

shift + X

펜 사용 (path 추가)

Mac / Window

P

펜 사용 (path 제거)

Mac	option + path click
Window	alt + path click

Component화 단축키

피그마 컴포넌트

4개의 마름모 아이콘이 부모 컴포넌트 / 빈 마름모 아이콘이 파생된 컴포넌트

Mac	Command + option + K
Window	Ctrl + option + K

Component 해제 단축키

Mac	Command + option + B
Window	Ctrl + option + B

Flatten (레이어 병합으로 벡터화)

Mac	Command + E
Window	Ctrl + E

Outstroke 선을 면으로 전환

Mac	Command + Shift + O
Window	Ctrl + Shift + O

Layer 잠금

Mac	Command + Shift + L
Window	Ctrl + Shift + L

Layer 숨김

Mac	Command + Shift + H
Window	Ctrl + Shift + H

Layer 하위 모두 선택

Mac / Window

부모 레이어에서 Enter

Layer 상위 모두 선택

Mac / Window

자식 레이어에서 \ (Back Slash)

Layer 선택 변경

Mac / Window

tab

Layer Panel로 이동

Mac	option + 1
Window	Alt + 1

Assets Panel로 이동

Mac	option + 2
Window	Alt + 2

Assets Panel은 제작한 모든 컴포넌트를 가져다 쓸 수 있게 모아둔곳이다.

디자인 패널 <=> 프로토타입 패널 전환

Mac / Window

Shift + E

 

 

 

 

 

 

이런 글은 어떠세요?

 

 

2022.12.31 - [UIUX] - UIUX의 강력한 툴, 피그마 컴포넌트로 만들 수 있는 것 (4)

UIUX의 강력한 툴, 피그마 컴포넌트로 만들 수 있는 것 (4)

2022.11.28 - [UIUX] - [UIUX] 피그마 사용법, 프레임, 반응형 디자인 (3)

[UIUX] 피그마 사용법, 프레임, 반응형 디자인 (3)

2022.11.23 - [UIUX] - [UIUX] 피그마(Figma) 사용법, Design패널 단축키 안내, 영문 피그마 (2)

[UIUX] 피그마 사용법, 프레임, 반응형 디자인 (3)