안녕하세요 PNcoding입니다 :)
오늘은 피그마에서 사용하는 단축키에 대하여 알아보도록 하겠습니다.
피그마에 대하여 궁금하신 분은 이 포스팅을 참고해 주시면 되겠습니다 :)
https://pncoding.tistory.com/5
[UX UI figma] 피그마란?
안녕하세요 PNcoding입니다 :) 이번 포스팅에선 UX UI 디자인에서 자주 사용하는 Figma에 대하여 알아볼게요! 1. 피그마(figma)란? https://www.figma.com/ Figma: the collaborative interface design tool. Build better products a
pncoding.tistory.com
단축키가 없어도 프로그램을 사용하는 데에 문제는 없습니다.
하지만 단축키를 안다면 좀 더 작업의 시간을 단축시키고 효율적으로 프로그램을 다룰 수 있게 되니
작업을 하시는데 있어 시간을 단축하고 싶으신 분들은 자주 사용하는 기능의 단축키를 알고 있으면 좋습니다 :)
피그마 단축키
알려드리는 단축키는 윈도를 기준으로 작성하였습니다.
만약 맥 유저라면 Cmd(command) 키로 대체하여 사용하시면 됩니다.
피그마 단축키 확인
기본적으로 피그마의 단축키는 직접 프로그램 내부에서 확인 가능합니다.
Ctrl + Shift + /
Essential
| 단축키 | 기능 |
| Ctrl + \ | 피그마 UI 보이기 / 숨기기 |
| I (대문자 i) | 색상 추출 스포이드 |
| Ctrl + / | 피그마 퀵 액션 창 (기능 검색) |
File & Properties
| 단축키 | 기능 |
| Ctrl + Shift + E | export (추출, 출력) |
| Ctrl + Alt + S | save to version history (히스토리 저장) |
| Ctrl + Shift + K | place image (이미지 불러오기) |
Tools
| 단축키 | 기능 |
| V | move tool (이동) |
| F | frame tool (프레임 생성하기) |
| P | pen tool (펜) |
| Shift + P | pencil tool (연필) |
| T | text tool (텍스트 작성하기) |
| R | rectangle tool (사각형 그리기) |
| O | ellipse tool (원 그리기) |
| L | line tool (선 그리기) |
| Shift + L | arrow tool (화살표 그리기) |
| C | add comment (코멘트 추가 또는 보기) |
| I | pick color (스포이드) |
| S | slice tool (슬라이스) |
View
| 단축키 | 기능 |
| Ctrl + Alt + \ | 멀티플레이어(동시 작업하는 유저) 커서 보이기/숨기기 |
| Shift + R | rulers (눈금자, 룰러) 보이기/숨기기 |
| Shift + O | outline (아웃라인) 보이기/숨기기 |
| Shift + G | layout grids (레이아웃 그리드) 보이기/숨기기 |
| Alt + 1 | layer (레이어 패널) |
| Alt + 2 | asset 창 |
| Alt + 8 | design (디자인 패널) |
| Alt + 9 | prototype (프로토타입 패널) |
Zoom
| 단축키 | 기능 |
| Space + 드래그 | 화면 이동 |
| Ctrl + +(플러스) | 화면 확대 |
| Ctrl + -(마이너스) | 화면 축소 |
| Ctrl + 0 | 화면 비율 100% |
| Shift + 1 | 전체 화면 (브라우저 기준으로 맞춰줌) |
| Shift + 2 | 선택한 요소 기준으로 화면 맞춤 |
| N | 선택된 프레임의 다음 프레임으로 이동 |
| Shift + N | 선택된 프레임의 이전 프레임으로 이동 |
| PgUp (page up) | 이전 페이지로 이동 |
| PnDn (page down) | 다음 페이지로 이동 |
| Home | 이전 프레임으로 이동 |
| End | 다음 프레임으로 이동 |
Text
| 단축키 | 기능 |
| Ctrl + B / I | 글자 굵게 / 굴자 기울림 |
| Ctrl + U | 글자 밑줄 |
| Ctrl + K | 링크 만들기 |
| Ctrl + Alt + L / T / R | 텍스트 왼쪽 / 가운데 / 오른쪽 정렬 |
| Ctrl + Shift + < , > | 폰트 크기 조절 |
| Ctrl + Alt + < , > | 폰트 두께 조절 |
| Alt + < , > | 자간 조절 |
| Alt + Shift + < , > | 행간 조절 |
Shape
| 단축키 | 기능 |
| Alt + / | fill (배경색) 제거 |
| Shift + / | stroke (테두리) 제거 |
| Shift + X | fill(배경색) 과 stroke(테두리) 전환 |
| Ctrl + Shift + O | outline stroke (아웃라인 스트로크) |
Selection
| 단축키 | 기능 |
| Ctrl + A | 전체 선택 |
| Esc | 선택 해제 |
| Ctrl + click | 하나의 오브젝트만 선택하고 싶을때 사용 (deep select) |
| Ctrl + G | 그룹 (group) |
| Ctrl + Shift + G | 그룹 해제 (ungroup) |
| Ctrl + Shift + H | 숨기기 / 나타내기 (show / hide) |
| Ctrl + Shift + L | 잠금 / 잠금해제 (lock / unlock) |
| Ctrl + Alt + Shift + L | 전체 잠금 해제 |
Cursor
| 단축키 | 기능 |
| Alt + 마우스커서 이동 | 오브젝트 간의 거리 측정 |
| Alt + 크기조절 | 오브젝트 중심을 기준으로 크기 조절 |
| Shift + 크기조절 | 오브젝트의 비율을 유지하며 크기 조절 |
Edit
| 단축키 | 기능 |
| Ctrl + C | 복사 |
| Ctrl + V | 붙여넣기 |
| Ctrl + X | 잘라내기 |
| Ctrl + D | 제자리 복사 붙여넣기 반복 |
| Ctrl + R | 이름변경 |
Edit
| 단축키 | 기능 |
| Enter | 오브젝트 및 이미지 수정 완료 |
| Shift + H | 좌우반전 (가로 뒤집기) |
| Shift + V | 상하반전 (세로 뒤집기) |
| Ctrl + Alt + M | 마스크 만들기 |
| Ctrl + Shift + K | 이미지 불러오기 |
| 0 + 0 | 투명도 0% |
| 1 | 투명도 10% |
| 5 | 투명도 50% |
| 0 | 투명도 100% |
Arrange
| 단축키 | 기능 |
| Ctrl + ] | 앞으로 이동 |
| Ctrl + [ | 뒤로 이동 |
| ] | 맨 앞으로 이동 |
| [ | 맨 뒤로 이동 |
| Alt + A / D | 왼쪽, 오른쪽 정렬 |
| Alt + W / S | 위, 아래 정렬 |
| Alt + H / V | 수평, 수직 정렬 |
여기까지 피그마의 단축키에 대하여 알아보았습니다.
"단축키가 너무 많아서 외우기 힘들어요"라고 하시는 분들도 많겠죠?
하지만 단축키는 앞에서 말씀드렸다시피 다 외울 필요는 없습니다.
본인이 자주 사용하는 기능의 단축키 정도만 알고 계셔도 충분하며, 사용하는 단축키가 익숙해졌다면
다른 단축키들에 관심을 가지셔도 무방합니다 :)
'UX UI' 카테고리의 다른 글
| [UX UI figma] 피그마 오토 레이아웃 (Auto layout) (101) | 2023.12.01 |
|---|---|
| [UX UI figma] 피그마 프레임과 그룹 (189) | 2023.11.22 |
| [UX UI figma] 피그마 인터페이스 (4) - 디자인 패널 (0) | 2023.04.06 |
| [UX UI figma] 피그마 인터페이스 (3) - 레이어 패널 (0) | 2023.03.17 |
| [UX UI figma] 피그마 인터페이스 (2) - 추가적인 툴바 (0) | 2023.03.10 |
