Figma
브라우저 기반 UI/UX 디자인 협업 도구.
핵심 개념
| 개념 |
설명 |
| Frame |
화면/컴포넌트의 컨테이너. 고정 크기 |
| Component |
재사용 가능한 UI 요소 |
| Instance |
Component의 복사본. 원본 변경 시 자동 반영 |
| Variant |
한 Component의 여러 상태 (Default, Hover, Disabled 등) |
| Auto Layout |
CSS Flexbox와 유사한 자동 정렬 |
| Styles |
색상, 텍스트, 효과를 토큰화해 재사용 |
| Variables |
디자인 토큰 (색상, 스페이싱, 타이포그래피) |
단축키
기본
| 단축키 |
기능 |
V |
선택 도구 |
F |
Frame 도구 |
R |
사각형 |
T |
텍스트 |
P |
펜 (Vector) |
H |
핸드 (이동) |
K |
스케일 |
Z |
확대 |
조작
| 단축키 |
기능 |
Ctrl+D |
복제 |
Ctrl+G |
그룹화 |
Ctrl+Shift+G |
그룹 해제 |
Ctrl+Alt+G |
Frame으로 감싸기 |
Ctrl+[ / ] |
레이어 순서 앞/뒤 |
Alt+드래그 |
간격 측정 |
Ctrl+Shift+H/V |
수평/수직 가운데 정렬 |
Ctrl+Enter |
컴포넌트 내부 진입 |
Esc |
컴포넌트 밖으로 나오기 |
뷰
| 단축키 |
기능 |
Ctrl+0 |
100% 줌 |
Ctrl+Shift+0 |
선택 영역 맞춤 |
Ctrl+1 |
전체 보기 |
Ctrl+\ |
UI 숨기기 |
Auto Layout
Shift+A → Auto Layout 추가
방향: Horizontal / Vertical / Wrap
간격: Gap (between items)
패딩: Top, Right, Bottom, Left
정렬: 9방향 (Flexbox justify-content + align-items)
크기: Fixed / Hug (내용 맞춤) / Fill (공간 채우기)
Component & Variant
컴포넌트 만들기: Ctrl+Alt+K
인스턴스 분리: Ctrl+Alt+B (원본과 연결 끊기)
Variant 추가:
1. 컴포넌트 선택 → Properties 패널 → + 클릭
2. 속성 이름: Type, Size, State 등
3. 값: Primary/Secondary, SM/MD/LG, Default/Hover/Disabled
Variant 활용:
- Boolean: 아이콘 표시 여부 (true/false)
- Text: 레이블 내용
- Instance Swap: 아이콘 교체
디자인 토큰 (Variables)
Local Variables → + 컬렉션 생성
Color: primary-500, gray-900, error ...
Number: spacing-4, spacing-8, radius-sm ...
String: font-sans, font-mono ...
Boolean: dark-mode ...
모드(Mode) 기능으로 Light/Dark 토큰 분리 관리
개발자 핸드오프
Dev Mode (Ctrl+Shift+D):
- 선택 요소의 CSS 속성 자동 생성
- 스페이싱, 색상, 폰트 수치 확인
- 에셋 Export (PNG, SVG, PDF)
Export 설정:
선택 → Design 패널 아래 Export → + 클릭
포맷: PNG / JPG / SVG / PDF
배율: 1x / 2x / 3x
SVG 코드 복사:
오브젝트 우클릭 → Copy as SVG
플러그인 추천
| 플러그인 |
용도 |
| Unsplash |
스톡 이미지 삽입 |
| Iconify |
아이콘 라이브러리 |
| Lorem ipsum |
더미 텍스트 |
| Contrast |
색상 대비 체크 |
| Tokens Studio |
디자인 토큰 관리 |
| Figma to Code |
React/HTML/Tailwind 코드 변환 |
메모