✅ Figma 소개
📌 현재 가장 뛰어난 디자인 협업 툴
와이어프레임부터 핸드오프 과정 전부를 하나의 툴에서 할 수 있는 효율적인 툴
📍Figma 특징
🗺️ 언제나 어디서나
✓ 웹에서도 사용할 수 있어 접근성이 좋고, 맥과 윈도우 모두 사용 가능
🎨 디자인부터 개발까지 올인원
✓ 디자인 기능 + 개발 관련 기능(종합 협업 툴)
🧑🤝🧑 강력한 커뮤니티
✓ 각종 플러그인과 디자인 자료들
📘 쉬운 학습
✓ 사용 방법이 쉬워 금방 배울 수 있고 디자인 기초부터 고급 기능까지 피그마 하나만으로 가능
📍Figma 둘러보기
1. 피그마 메인화면 : 맨 위의 탭에서, 맨 왼쪽의 홈 아이콘을 누르면 메인 화면으로 이동
2. 피그마 메인화면 구성 
1) Recents(최근 파일)
최근에 열어본 파일들을 볼 수 있다. 피그마를 실행하면 나오는 기본 화면
2) Drafts(연습 파일)
연습을 위한 개인 파일들. 피그마 커뮤니티에서 가져온 파일들도 여기에 먼저 저장된다.
3) Favorite files(즐겨 찾는 파일)
자주 열어보는 파일을 썸네일 우측 상단의 ⭐️아이콘을 눌러 즐겨찾기에 저장할 수 있다.
4) Teams
현재 내 계정이 속한 팀과 파일 목록
5) 탭
현재 열려 있는 파일들을 전환하면서 볼 수 있다. 탭을 꾹 눌러서 순서를 바꾸거나 창을 분리해 낼 수도 있고, 탭 이름에 대고 마우스 오른쪽 버튼을 클릭해 탭을 닫거나 고정할 수도 있다.
✨피그마 탭 전환 단축키
- MacOS
Command+Shift+[
Command+Shift+]
- Windows
Control+Shift+[
Control+Shift+]
6) 파일 생성하기
디자인 파일을 생성하거나, 피그잼 파일을 생성하거나, 다운로드받은 fig 파일을 열 수 있다.
📌피그마의 파일 저장 방식
피그마는 기본적으로 피그마 계정에 파일을 온라인으로 저장하는 클라우드 방식. 직접 내 컴퓨터에 파일을 저장하는 방식은 로컬 방식이라고 부르는데, 이런 경우 파일 이름 끝에 .fig 가 붙는다.
[ 피그마의 파일 저장 방식 비교 ]
| 방식 | 저장위치 | 특징 |
|---|---|---|
| 클라우드 방식 | 피그마 서버 | 공유나 편집 권한을 제한할 수 있음 |
| 로컬 방식 | 내 컴퓨터 | 백업용, 산출물 전달 등에 주로 쓰임 |
7) 파일 목록
현재 선택한 팀이나 최근 파일 등 보고 있는 작업 공간(워크스페이스)에 있는 파일 목록을 보여줌. 목록 또는 큰 썸네일로 볼 수 있다.
3. 디자인 화면 둘러보기
1) 도구 메뉴 : 이동, 도형 그리기, 텍스트 입력 등 주요 도구의 퀵 메뉴
2) 파일 메뉴 : 버전 기록, 이름 변경, 삭제 등 파일과 관련된 주요 기능
3) 공유하기 : 파일을 다른 사람과 공유할 수 있는 기능
4) 디자인/개발 모드 전환 : 디자인 모드와 개발자 모드를 전환할 수 있는 기능
5) 프로토타입 재생 : 만든 디자인을 실제 화면으로 볼 수 있는 프로토타입 재생 기능
6) 페이지 패널 : 페이지를 탐색할 수 있는 패널
7) 레이어 패널 : 현재 페이지의 레이어들을 볼 수 있는 패널
8) 캔버스 : 현재 페이지에 있는 디자인들을 실제로 보고 편집하는 화면
9) 디자인 패널 : 현재 선택한 레이어의 디자인 속성들을 조정할 수 있는 패널
4. 도구 메뉴(툴바) 둘러보기
1) 이동 V : 개체를 선택하고 움직이는 기본 커서
2) 프레임 삽입 F : 디자인 기본 단위인 프레임을 삽입하는 기능
3) 사각형 그리기 R : 기본 도형인 사각형을 그릴 수 있는 기능
4) 펜 P : 벡터 개체의 패스를 편집할 수 있는 기능
5) 텍스트 레이어 삽입 T : 글자를 삽입할 수 있는 기능
6) 리소스 Shift + i : 컴포넌트, 플러그인, 위젯을 빠르게 검색할 수 있는 기능
7) 핸드 H or Space bar : 개체를 건드리지 않고 화면을 탐색할 수 있는 기능
8) 댓글 달기C : 디자인 파일에 댓글을 달 수 있는 기능
5. 도형 반전하기
Vertical = 수직 , Horizontal = 수평
✨단축키
- 공통
Shift+V(수직 뒤집기)
Shift+H(수평 뒤집기)
6. 텍스트 패널 둘러보기
7. 이미지 리사이징
- Fill 섹션의 항목 앞부분 클릭 ⇾ 이미지 채우기 패널 오픈
📌 리사이징 비교
- Fill : 정해진 도형 크기를 비율을 유지한 채 꽉 채우고, 나머지는 숨김
- Fit : 정해진 도형 크기 안에 비율을 유지한 채 이미지를 다 보이게 넣음
- Crop : 원하는 영역을 잘라 보여줌 도형의 비율이 변하면 이미지 역시 비율이 변함
- Tile : 이미지를 반복해서 보여줌
8. 추출 패널 구성
9. 피그마 파일로 컴퓨터에 저장하기
📌 피그마 파일 저장의 원리
클라우드 저장 방식. 따라서 따로 저장하지 않아도 피그마가 알아서 서버에 진행 상황을 동기화함
1) 도구 모음 맨 앞에 있는 피그마 아이콘을 눌러 피그마 메뉴를 열고, File 메뉴를 열어준다.
2) Save local copy를 선택해 컴퓨터 저장 위치를 선택
📌 컴퓨터에 저장한 fig 파일을 피그마로 열려면?
파일을 불러오고 싶은 곳의 우측 상단에 있는 import를 눌러서 컴퓨터에 있는 피그마 파일을 선택
📌 진행상황 메모해서 클라우드 저장하기
1) File 메뉴를 열고, Save to version history 를 클릭
2) 간단한 메모 제목과 내용을 작성해 저장
📌 저장된 진행 상황 확인하기
1) 피그마 메뉴에서 File → Show version history 클릭
💡 파일 이름 옆의 더보기 아이콘을 눌러서도 확인 가능
2) 저장한 메모와 날짜를 확인
💡이전 버전으로 되돌리려면?
- 원하는 버전에 대고 오른쪽 마우스 버튼 클릭
- 메뉴에서 Restore this version 을 누르면 이전 버전으로 되돌릴 수 있음
