🎨 피그마
피그마(Figma) https://www.figma.com
: UI 디자인, 프로토타이핑 등을 구현하기 위한 디자인 툴
장점
1. 디자인 프로세스를 적극 반영한 사용성과 인터페이스
2. 개발자 핸드오프(handoff, 개발자에게 전달) 과정에서 유용
3. 무료 가능(편집자 2명 제한)
4. 강력한 협업 툴 - 동시작업, 보기전용, 링크공유, 히스토리 버전관리 등 다양한 옵션 존재
5. 거의 없는 환경적 제약 - Mac, Windows, 리눅스 모두 동작 어디서나 접속 가능
6. 커뮤니티, 다양한 플러그인, 디자인 래퍼런스 활성화
+ 피그잼(Figjam)
: 브래인스토밍을 위한 화이트보드 협업 툴. 프로젝트 시각화, 스케쥴링, 데이터스키마 설계 등 다방면으로 사용되고 있다. Figjam또한 무료이고 실시간 협업과 관리가 쉽고 편하다.
⌨️ 피그마 단축키 모음
Files
Ctrl+Alt+S : 히스토리 저장 Save to Version History
(히스토리확인 :file > Show version history)
Tools
V : 이동 Move
C : 코멘트 추가 또는 보기 Add/Show Comments
P : 펜툴 Pen
Shift+P : 연필 툴 Pencil
R : 사각형 그리기 Rectangle
O : 원 그리기 Ellipse
L : 선 그리기 Line
F : 프레임 생성 Frame
S : 슬라이스 Slice
I : 스포이드 툴Pick Color
TEXT
T : 텍스트 Text
Ctrl+Shift+V : 스타일에 맞춰 붙여넣기 Paste and Match Style
Ctrl+B : 볼드 Bold
Ctrl+I : 이탤릭 Italic
Ctrl+U : 밑줄 Underline
Object
Ctrl+A : 전체 선택 select All
Esc : 전체 선택 해제 select None
Ctrl+G : 그룹 Group Selection
Ctrl+Shift+G : 그룹 해제 Ungroup Selection
Ctrl+Shift+H : 숨기기/나타내기 Show/Hide Selection
Ctrl+Shift+L : 잠금/잠금해제 Lock/Unlock Selection
Ctrl+Alt+Shift+L : 전체 잠금 해제 Unlock All Object
Ctrl+C : 복사 Copy
Ctrl+X : 잘라내기 Cut
Ctrl+V : 붙여넣기 Paste
Alt+drag : 선택 복사 Duplicate Selection
Component
Ctrl+Alt+K : 컴포넌트 만들기 Create Component
Ctrl+Alt+B : 인스턴스 분리하기 Detach Instance
컴포넌트 해제 :
1. 해당 컴포넌트로 instance생성(복붙)
2. 해당 Instance를 Detach Instance하여 일반 Frame으로 변경(Ctrl+Alt+B)
3. Assets에서 해당 컴포넌트 제거(Delete키)
View
Alt + 1 : Open layers panel
Alt + 2 : Open Libraries(Assets) panel
Alt + 8 : Open Design panel
Alt + 9 : Open Prototype panel
Alt + 0 : Open inspect panel
Ctrl+/ : 검색 Search
Ctrl+Shift+/ : 단축키 보기 Keyboard Shortcuts
Shape
Shift + V : 가로 뒤집기
Shift + H : 세로 뒤집기
Ctrl+E 병합 Flatten Selection
Ctrl+Shift+O 윤곽선으로 변경 Outline Stroke
Alt+double+click 이미지 자르기 Crop Image
Zoom
Ctrl+drag : Zoom In-Out
Shift+drag : Move to Left-Right
Shift+1 : Zoom to fit
Shift+2 : Zoom to selection
N : Zoom to next frame
Shift+N : Zoom to previous frame
- 성공적인 협업을 위하여! 🍻
