캠프 기간 동안 프로젝트 기획, 협업 할 때 항상 사용했던 피그마.. 사실 캠프를 시작하면서 처음 접하게 되었는데 팀원 중에는 퍼블리싱 경험이 있거나 이미 툴을 사용해봤던 분들이 많았어서 그저 그분들이 하시는 걸 쳐다보고 이것저것 눌러보기만 했었다.
최종때는 디자이너분들이 만들어주신 시안을 Dev mode 로 보면서 똑같이 구현하는 것만 했지, 제대로 다룰 줄 몰랐다.
그래서 시간적 여유가 있을때 별도로 공부하고 싶었기 때문에 공부한 것들을 정리할 겸 하나씩 기록해보고자 한다.
레이어
- 그래픽을 만들 때 Z축으로 층을 쌓은 앞과 뒤의 개념
- 레이어의 순서로 앞, 뒤 표현을 할 수 있다.
단축키
| cmd + [ , cmd + ] | 한칸 뒤로가기 , 한칸 앞으로 가기 |
| cmd + option + [ , cmd + option + ] | 맨 뒤로 가기, 맨 앞으로 가기 |
| cmd + G | 그룹화 |
| cmd + Shift + G | 그룹화 풀기 |
| option | 복제 (옵션키 누른채로 복제하고 싶은 대상 클릭해서 드래그) |
| cmd + D | option 키로 복제 후 cmd + D 클릭 시 반복해서 복제됨 |
프레임
- 각종 디바이스의 해상도가 반영된 작업 영역
- 피그마에서 제공하는 여러 프리셋(모바일, 태블릿 등) 을 선택해서도 사용 가능
단축키
| F 또는 A | 프레임 생성 |
| cmd + option + G | 프레임으로 묶기 (그룹화와 다름) |
섹션
- 여러 프레임을 담을 수 있는 섹션 (프레임의 그룹)
단축키
| shift + S | 섹션 만들기 (드래그한 영역이 섹션이 됨, 프레임들을 드래그해서 담을 수 있음) |
 |
아트보드 기준 상하좌우 100px 자동으로 띄워주는 기능 |
페이지
- 하나의 피그마 파일에 여러 페이지로 관리할 수 있는 기능
- 분류기준
- 반응형 웹 - Desktop / Tablet / Mobile
- Android / IOS
- 시안 A B C
- 서비스 기능 단위 세분화