인터페이스 완전 정복 — 4개 패널과 모든 도구

편집 화면 전체 구조

┌──────────────────────────────────────────────────┐
│           상단 툴바 (도구 선택 + 메뉴)              │
├───────────┬──────────────────────┬───────────────┤
│           │                      │               │
│  레이어   │       캔버스          │  디자인 패널   │
│  패널     │    (작업 영역)        │  (속성 편집)  │
│  (왼쪽)   │                      │               │
│           │                      │               │
└───────────┴──────────────────────┴───────────────┘

상단 툴바 — 10가지 도구

도구	단축키	역할
이동(Move)	V	요소 선택 및 이동
프레임(Frame)	F	화면 프레임 생성
섹션(Section)	Shift+S	프레임 그룹 묶기
도형(Shape)	R(사각), O(원), L(선)	기본 도형 그리기
펜(Pen)	P	벡터 패스 그리기
텍스트(Text)	T	텍스트 입력
손(Hand)	H 또는 Space 누르기	캔버스 이동
코멘트(Comment)	C	협업 코멘트 추가
컴포넌트	Ctrl+Alt+K	선택 요소를 컴포넌트화
자동 크기조절	-	내용 기반 크기 조정

왼쪽 패널 — 레이어와 에셋

레이어 탭 (Layers):
모든 요소의 계층 구조 표시
- 눈 아이콘: 보이기/숨기기 토글
- 잠금 아이콘: 실수로 이동 방지
- 이름 더블클릭: 레이어 이름 변경

레이어 이름 관리 중요성:
나쁜 예: Rectangle 3, Group 7, Frame 12
좋은 예: btn-primary, card-product, nav-header
→ 팀원이 레이어만 봐도 구조 이해 가능

에셋 탭 (Assets):
등록된 컴포넌트, 로컬 스타일, 팀 라이브러리 검색
Ctrl+Alt+O 로 토글

오른쪽 패널 — 디자인 속성

디자인 탭 (선택한 요소에 따라 달라짐):

위치/크기 섹션:
X, Y: 캔버스 내 좌표 (수치 직접 입력 가능)
W, H: 너비/높이 (자물쇠 아이콘 = 비율 고정)
회전 각도, 모서리 반경(border-radius)

Fill (채우기):
색상, 그라디언트, 이미지, 없음

Stroke (테두리):
색상, 두께, 위치 (안쪽/바깥쪽/가운데)

Effects (효과):
그림자(Drop Shadow), 내부 그림자(Inner Shadow)
블러(Blur), 배경 블러(Backdrop Blur)

Export (내보내기):
PNG, JPG, SVG, PDF 형식으로 직접 내보내기

캔버스 조작법

확대/축소:
Ctrl + 마우스 스크롤
Ctrl + Plus / Minus
화면 전체 보기: Shift+1
선택 요소에 맞춤: Shift+2

이동:
Space 누르면서 드래그 (임시 Hand 도구)
가운데 마우스 버튼 누르면서 드래그

멀티 선택:
Shift+클릭: 개별 추가 선택
드래그: 범위 안 전체 선택
Ctrl+A: 전체 선택

필수 단축키 완전 정복

기본 조작:
Ctrl+Z         실행 취소
Ctrl+Shift+Z   다시 실행
Ctrl+D         복제 (제자리)
Ctrl+C / V     복사 / 붙여넣기
Alt+드래그     복사 이동
Delete         삭제

정렬 (요소 선택 후):
Alt+A          왼쪽 정렬
Alt+D          오른쪽 정렬
Alt+W          상단 정렬
Alt+S          하단 정렬
Alt+H          수평 가운데 정렬
Alt+V          수직 가운데 정렬

그룹/프레임:
Ctrl+G         그룹 만들기
Ctrl+Alt+G     프레임으로 감싸기
Ctrl+Shift+G   그룹 해제

레이어 순서:
Ctrl+]         앞으로 보내기
Ctrl+[         뒤로 보내기
Ctrl+Shift+]   맨 앞으로
Ctrl+Shift+[   맨 뒤로

실습 — 인터페이스 탐색

빈 파일 열기 → 다음 순서대로 직접 해보기:

1. F 누르기 → 드래그로 프레임 생성 → 오른쪽 패널에서 iPhone 14 선택
2. R 누르기 → 프레임 안에 사각형 그리기
3. T 누르기 → 텍스트 입력 "Hello Figma"
4. V 누르기 → 이동 도구로 복귀
5. 레이어 패널에서 계층 구조 확인
6. 각 요소 선택 → 오른쪽 패널 속성 살펴보기
7. Ctrl+Z로 단계별 되돌리기 연습

관련 검색어  ·  피그마 인터페이스, 피그마 단축키, 피그마 레이어 패널, 피그마 디자인 패널, Figma 사용법, 피그마 도구