DAY 13 | 피그마 기초 뽀개기 (기초 인터페이스)

피그마 기초 인터페이스에 대해 알아보자!

 

피그마(Figma)는 웹 기반의 디자인 도구로, 사용자 인터페이스(UI) 디자인, 사용자 경험(UX) 디자인, 프로토타입 제작 등 다양한 디자인 작업을 할 수 있다.

피그마의 기본 인터페이스는 다음과 같이 구성되어 있습니다.

1. 도구 모음 (Toolbar)

• 메뉴: 피그마 파일, 편집, 보기, 객체 등 다양한 메뉴에 접근할 수 있습니다.
• 도구: 선택 도구, 프레임 도구, 도형 도구, 펜 도구, 텍스트 도구 등 디자인 작업에 필요한 도구들을 제공합니다.
• 옵션: 선택한 도구에 대한 세부 옵션을 설정할 수 있습니다.

2-1. 레이어 패널 (Layers Panel)

• 디자인 요소들의 레이어를 관리하고, 레이어의 순서, 이름, 가시성 등을 조절할 수 있습니다.
• 레이어를 그룹화하거나 컴포넌트로 만들 수 있습니다.

2-2. 페이지/에셋 패널 (Pages/Assets Panel)

• 여러 페이지를 관리하고, 컴포넌트나 스타일과 같은 에셋을 관리할 수 있습니다.
• 디자인 시스템을 구축하고 재사용 가능한 요소들을 관리하는 데 유용합니다.

3-1. 속성 패널 (Properties Panel)

• 선택한 디자인 요소의 속성을 편집할 수 있습니다.
• 위치, 크기, 색상, 텍스트 스타일, 효과 등 다양한 속성을 변경할 수 있습니다.
• 오토 레이아웃과 컨스트레인트 설정도 여기서 할 수 있습니다.

3-2. 프로토타입 패널 (Prototype Panel)

• 디자인한 화면들을 연결하여 인터랙티브한 프로토타입을 제작할 수 있습니다.
• 화면 전환 효과, 애니메이션, 상호작용 등을 설정할 수 있습니다.

4. 캔버스 (Canvas)

• 실제로 디자인 작업을 하는 영역입니다.
• 프레임을 생성하고, 도형, 텍스트, 이미지 등 다양한 디자인 요소를 배치할 수 있습니다.
• 무한대로 확장이 가능합니다.
  
  
  

---

섹션, 프레임, 그룹 차이에 대해 알아보자!

 

---

피그마 단축키 외우기!!

1. 파일 저장 / 이미지 삽입

Ctrl+Shift+E	출력(저장) Export
Ctrl+Shift+K	이미지 삽입

2. 속성

Ctrl+C	복사
Ctrl+X	잘라내기
Ctrl+V	붙여넣기
Ctrl+Alt+C	속성 복사 (적용된 스타일까지 그대로 복사됨)
Ctrl+Alt+V	속성 붙여넣기
Ctrl+Shift+V	선택 위에 붙여넣기 Paste Over Selection
Alt+drag	중심점 중심으로 사이즈 조절 Resize from Center
Alt+drag	선택 복사 Duplicate Selection
Shift+drag	정사각형, 원형 사이즈로 제한

5. 오토레이아웃

Shift+A	오토레이아웃 만들기 Add Auto Layout
Alt+Shift+A	오토레이아웃 해제 Remove Auto Layout

6. 객체 이동하기

Ctrl+]	한 칸씩 앞으로 가져오기 Bring Forward
Ctrl+[	한 칸씩 뒤로 보내기 Send Backward
Ctrl+Shift+]	맨 앞으로 가져오기 Bring to Front
Ctrl+Shift+[	맨 뒤로 보내기 Send to Back

6. 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

7. 텍스트

T	텍스트 Text
Ctrl+Shift+V	스타일에 맞춰 붙여넣기 Paste and Match Style
Ctrl+B	볼드 Bold
Ctrl+I	이탤릭 Italic
Ctrl+U	밑줄 Underline

8. 객체

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+E	병합 Flatten Selection
Ctrl+Shift+O	윤곽선으로 변경 Outline Stroke
Alt+double+click	이미지 자르기 Crop Image

9. Components

Ctrl+Alt+K	컴포넌트 만들기 Create Component
Ctrl+Alt+B	인스턴스 분리하기 Detach Instance

 

---

수업 시간 예제 활용하기!!

---

오늘의 과제!!