피그마 사용법 PART3. 피그마 단축키 모음 , 새파일 만들기 (Design file / FigJam file)

피그마 단축키 보는 방법과 새 파일을 만드는 방법을 알아보겠습니다. 피그마 새 파일을 만들 때 Design file / FigJam file 두 가지 타입이 있습니다. 이후에 필요한 메뉴들도 다음 글에서 좀 더 자세히 알아보겠습니다. 단축키를 외워서 사용하는 것은 생각보다 어려운 일입니다. 저도 여러 디자인 프로그램을 사용하면서 모든 단축키를 다 외워서 사용하는 것은 아닙니다. 자연스럽게 사용하면서 자주 사용하는 것만 외워서 사용해도 작업하는데 크게 문제없습니다.

피그마 단축키 목차

1. Figma 새 파일 두 가지 타입

2. Design file의 사용목적과 주요 기능

3. FigJam file의 사용목적과 주요 기능

4. Figma 단축키 보는 방법 (Windows 사용자)

최근에는 디자이너뿐만 아니라 프로젝트 기획이나 진행을 하면서 피그마를 사용하는 기획자들도 늘어나는 추세입니다. 이번기회에 간단한 사용방법을 알아두면 좋을 것 같습니다.

Figma 새 파일 두 가지 타입
Design file / FigJam file

피그마를 사용하는 목적에 따라 Design file / FigJam file을 선택해야 합니다.

Design file의 사용목적과 주요 기능

Design file은 UI/UX 디자인, 프로토타입핑, 디자인 시스템과 연관된 작업을 할 때 주로 사용하게 됩니다. Design file의 주요 기능으로는 와이어프레임, 디자인, 프로토타입핑, 디자인 리뷰, 시안 피드백, hand off입니다.

FigJam file의 사용목적과 주요 기능

FigJam file은 UX리서치, 유저 플로우 제작, 아이디어 수집 등 사용됩니다. FigJam file의 주요 기능은 아이디어 수집, 문제정의, 해결방안 모색, 기능정의입니다. 피그잼의 경우 디자이너뿐만 아니라 디자이너가 아닌 사람들에게도 함께 아이디어를 내고 브레인스토밍을 할 수 있습니다. 피그마 디자인 파일의 비해 피그잼은 사용방법이 단순해서 접근성이 좋은 것이 장점입니다.

Figma 단축키 보는 방법 (Windows 사용자)

피그마 디자인파일이나 피그잼파일 열고 보이는 화면 화면 오른쪽 하단에 위치한 물음표 버튼을 클릭합니다. keyboard shortcuts 메뉴를 클릭하면 관련된 단축키를 확인할 수 있습니다. 한번 이상 사용했던 단축키의 경우 파란색(Windows 사용자)으로 표시됩니다.

단축키 열기 Ctrl+Shift+/

Figma 단축키 정리

Essential

• Ctrl +＼: 메뉴창 UI 보이기/감추기
• I(대문자 i): 색상 추출 스포이트
• Ctrl+/: 피그마 기능 검색

Tools

• V : 이동
• F: 프레임
• P: 펜
• Shift+P: 연필
• T : 텍스트
• R: 사각형
• O: 원형
• L: 라인
• Shift+L: 화살표
• C: 코멘트 추가
• I(대문자 i): 색상 추출 스포이트
• S: 슬라이스 

View

• Ctrl +＼: 메뉴창 UI 보이기/감추기
• Ctrl+Alt+＼: 멀티플레이어 커서 보이기/감추기
• Shift+R: 눈금자
• Shift+O: 아웃라인 보이기/숨기기
• Ctrl+Shift+P: 픽셀 미리 보기
• Shift+G: 레이아웃 그리드 보이기/숨기기
• Shift+`: 픽셀 그리드( 화면을 확대했을 때 보이는 1px 단위의 그리드 보이기/감추기)
• Alt+1: 레이어 패널 열기
• Alt+2: 라이브러리
• Alt+8: 디자인 패널 열기
• Alt+9: 프로토타입 패널 열기
• Alt+0(숫자): Inspect 창(실제 개발에 적용할 수 있는 코드를 확인)

Zoom

• space+drag: 메뉴창 UI 보이기/감추기
• Ctrl+(+): 화면확대
• Ctrl+(-): 화면 축소
• Ctrl+0(숫자): 화면 비율 100%
• Shift+1: 화면 모니터 비율에 맞춤
• Shift+2: 선택한 요소 기준으로 비율 맞춤
• N: 프레임 기준 화면 맞춤 (다음 프레임으로 이동)
• Shift+N: 프레임 기준 화면 맞춤 (이전 프레임으로 이동)
• Page Up: 이전 페이지
• Page Down: 다음 페이지
• Home: 이전 프레임 찾기
• End: 다음 프레임 찾기

Text

• Ctrl+B, I: 볼드체, 이탤릭체
• Ctrl+U: 밑줄
• Ctrl+K: 링크걸기
• Ctrl+Shift+X: 취소선
• Ctrl+Shift+7,8: Turn into a list
• Ctrl+Alt+L: 글자 왼쪽 정렬
• Ctrl+Alt+T: 글자 가운데 정렬
• Ctrl+Alt+R: 글자 오른쪽 정렬
• Ctrl+Alt+J: 글자 가로 맞춤 정렬
• Ctrl+Shift+<,>: 폰트 사이즈 조절
• Ctrl+Alt+<,>: 폰트 굵기 조절
• Alt+<,>: 텍스트 간격 조절
• Alt+Shift+<,>: 텍스트 간격 조절

Shape

• P: 펜툴
• Shift+P: 연필 툴
• B: 페인트 버킷
• Alt+/: Fill 채우기 제거
• Shift+/: Stroke 제거
• Shift+X: Fill과 Stroke 교환
• Ctrl+Shift+O: 외곽선 Stroke
• Ctrl+E: Flatten selection
• Ctrl+J: Join selection 

Selection

• Ctrl+A: 전체 선택
• Ctrl+Shift+A : 선택되지 않은 요소들 전체 선택
• Esc: 선택 취소
• Ctrl+click: 직접 선택 Deep Select
• Enter: Shop 혹은 Image 수정 및 완료
• ＼: select parent
• Tab: Select next sibling
• Shift+Tab: Select previous sibling
• Ctrl+Alt+A
• Ctrl+G: 그룹 지정
• Ctrl+←(Backspace): 그룹해제
• Ctrl+Alt+G: 선택 요소 프레임으로 만들기
• Ctrl+Shift+H: 선택 요소 보이기/감추기
• Ctrl+Shift+L: 선택 요소 잠금/해제

Edit

• Ctrl+C: 복사
• Ctrl+X: 잘라내기
• Ctrl+V: 붙여 넣기
• Ctrl+Shift+R: 특정 요소 교체
• Ctrl+Shift+V: 선택 위에 붙여 넣기
• Ctrl+D: 복제 및 반복
• Ctrl+R: 이름 변경
• Ctrl+Shift+E: 출력(저장)
• Ctrl+F: Find...
• Ctrl+Shift+C: Copy as PNG
• Ctrl+Alt+C: 속성 복사
• Ctrl+Alt+V: 속성 붙여 넣기 

 

Transform

• Shift+H: 수평으로 뒤집기(좌우반전)
• Shift+V: 수직으로 뒤집기(상하반전)
• Ctrl+Shift+M: 마스크 사용
• Ctrl+Shift+K: 이미지 불러내기
• 0 0 (숫자): 투명도 0%
• 1: 투명도 10%
• 5: 투명도 50%
• 0 (숫자): 투명도 100% 

 

Arrange

• Ctrl+] : 앞으로 이동
• Ctrl+[ : 뒤로 이동
• ] : 맨 앞으로 이동
• [ : 맨 뒤로 이동
• Alt+A and D: 왼쪽, 오른쪽 정렬
• Alt+W and S: 상단, 하단 정렬
• Alt+H and V: 수평, 수직 정렬
• Alt+Shift+H and V: Distribute spacing
• Ctrl+Alt+Shift+T: Tidy up
• Shift+A : 자동 레이아웃 추가
• Alt+Shift+A: 자동 레이아웃 제거

Components

• Alt+2: Show assets
• Ctrl+Alt+O: Team library
• Ctrl+Alt+K: 컴포넌트 생성
• Ctrl+Alt+B: 인스턴스 분리하기
• Shift+I: 리소스 삽입(컴포넌트, 플러그인)
• Alt: Swa component instance