피그마 시작
피그마 사이트 접속 또는 앱 설치
Figma: The Collaborative Interface Design Tool
Figma is the leading collaborative design platform for building meaningful products. Design, prototype, and build products faster—while gathering feedback all in one place.
www.figma.com
구글로 로그인 후 즉시 사용 가능
일정 부분 유료로 사용 가능하며,
일부는 유로 툴로 사용 가능
피그마 기본 툴 설명
<메인화면>
왼쪽: 메뉴 바
중앙: workspace로 작업 영역
draft > + 버튼으로 메뉴 선택
<draft 작업 영역>
: design, slide 등 작업 영역을 선택해 생성
왼쪽: 페이지 정보 패널
중앙: 워크스페이스 공간
오른쪽 : 세부 설정 창
중앙 아래: 피그마로 만들 수 있는 작업창
자주 사용하는 기본 작업 툴은
워크스페이스 공간 중앙 아래쪽에 위치해 있으며
다양한 단축키로 사용 가능
피그마 기본 작업 방식
F버튼을 눌러 프레임 생성 가능
shift키를 사용해 정사각형 배율의 프레임을 생성할 수 있다
프레임 왼쪽 상단의 타이틀을 눌러
Frame1을 변경해 프레임 제목을 바꿀 수 있다
하나의 페이지가 하나의 작업 영역이 된다
Figma 자주 사용하는 기본 단축키
기본 조작
| M | move(기본) |
| Alt + 드래그 | 복사 |
| Shift + 드래그 | 정방향(정비율) 이동 |
| 요소를 클릭한 상태에서 alt | px 거리 확인 |
| Space + "+", "-" | 작업영역 이동 |
| Ctrl + \ | 레이아웃 보이게 하기 |
| Ctrl + D | 이전 작업 반복 |
1. File & Properties
| Ctrl + Shift + E | Export 출력(저장) |
| Ctrl + Alt + S | Save to Version History 히스토리 저장 |
| Ctrl + Shift + K | Place Image 이미지 삽입 |
2. Edit
| Ctrl + C | 복사 |
| Ctrl + X | 잘라내기 |
| Ctrl + V | 붙여넣기 |
| Ctrl + Shift + V | 선택 위에 붙여넣기 |
| Alt + drag | 중심점 중심으로 사이즈 조절 |
| Alt + drag | 선택 복사 |
| Ctrl + Alt + C | 속성 복사 |
| Ctrl + Alt + V | 속성 붙여넣기 |
3. Select
| Ctrl + 클릭 | 직접 선택 |
| Ctrl + 마우스우클릭 | 레이어 선택 |
4. View
| Ctrl + "+" / Z + Click / Ctrl + Wheel | 줌인 Zoom In |
| Ctrl + "-" / Z + Click / Ctrl + Wheel | 줌아웃 Zoom Out |
| Shift + 0 | Zoom to 100% 100%로 맞추기 |
| Shift + 1 | Zoom to Fit 화면에 맞추기 |
| Shift + R | Rulers 눈금자 |
| Ctrl + Shift + 3 | Show Outlines 외곽선으로 보기 |
| Ctrl + Alt + Y | Pixel Preview 픽셀 모드 프리뷰 |
5. Arrange
| Shift + A | Add Auto Layout 오토 레이아웃 만들기 |
| Alt + Shift + A | Remove Auto Layout 오토 레이아웃 해제 |
| Ctrl + ] | 앞으로 가져오기 |
| Ctrl + [ | 뒤로 보내기 |
| Ctrl + Shift + ] | 맨 앞으로 가져오기 |
| Ctrl + Shift + [ | 맨 뒤로 보내기 |
6. Tools
| V | 이동 Move |
| C | 코멘트 추가 또는 보기 |
| P | Pen 펜툴 |
| Shift + P | Pencil 연필 툴 |
| R | Rectagle 사격형 그리기 |
| O | Eclipse 원 그리기 |
| L | Line 선 그리기 |
| F | Frame 프레임 생성 |
| S | Slice 슬라이스 |
| I | Pick Color 스포이드 툴 |
7. Text
| T | Text |
| Ctrl + Shift + V | 스타일에 맞춰 붙여넣기 |
| Ctrl + B | Bold |
| Ctrl + I | Italic |
| Ctrl + U | Underline |
8. Object
| Ctrl + G | 그룹 |
| Ctrl + Shift + G | 그룹해제 |
| Ctrl + Shift + H | 숨기기/나타내기 |
| Ctrl + Shift + L | 잠금/잠금해제 |
| Ctrl + Alt + Shift + L | 전체 잠금 해제 |
| Ctrl + E | 병합 |
| Ctrl + Shift + O | 윤곽선으로 변경 |
| Alt + double + click | 이미지 자르기 |
9. Components
| Ctrl + Alt + K | 컴포넌트 만들기 |
| Ctrl + Alt + B | 인스턴스 분리하기 |
10. Misc
| Ctrl + / | 검색 |
| Ctrl + Shift + / | 단축키 보기 |
피그마 공유 기능
피그마는 협업이 가능한 툴이라 활용도가 높다
링크로 작업영역 공유가 가능하고 동시에 접속이 가능하며
실시간 작업 상황을 볼 수 있다
단축키 C 버튼으로
작업 상황에 대한 코멘트를 남길 수 있다
Figma: The Collaborative Interface Design Tool
Figma is the leading collaborative design platform for building meaningful products. Design, prototype, and build products faster—while gathering feedback all in one place.
www.figma.com
'Frontend > Figma' 카테고리의 다른 글
| Figma 피그마 기본 기능 사용 - 플러그인, 커뮤니티 (0) | 2025.12.04 |
|---|---|
| Figma 피그마 기본 기능 사용 및 예제 - 프레임, 컴포넌트 생성 (0) | 2025.12.04 |