처음 만나는 피그마

1부 피그마 기초
1장 피그마는 어떤 툴인가
1.1 디자인, 프로토타이핑, 협업까지 모든 프로세스를 한곳에서
1.2 피그마 무료로 사용하기
1.3 피그마 기능 업그레이드하기
1.4 지금 피그마를 써야 하는 이유

2장 피그마 시작하기
2.1 웹으로 시작하기
2.2 데스크톱 앱으로 시작하기
2.3 미러 앱 시작하기

3장 파일 브라우저 살펴보기
3.1 파일 브라우저
3.2 팀 만들기
3.3 팀 프로젝트 시작하기
3.4 커뮤니티 이용하기

4장 에디터 살펴보기
4.1 에디터 구성
4.2 툴바 알아보기
4.3 레이어 패널
4.4 속성 패널

5장 에디터 사용하기
5.1 카드 UI 만들기
5.2 효과 추가하기

2부 작업 속도를 두 배 높이는 피그마 활용
6장 컴포넌트 사용하기
6.1 컴포넌트 알아보기
6.2 마스터 컴포넌트와 인스턴스
6.3 컴포넌트로 리스트 디자인하기

7장 오토 레이아웃 사용하기
7.1 오토 레이아웃 알아보기
7.2 오토 레이아웃으로 뉴스피드 헤더 디자인하기

8장 컨스트레인트 사용하기
8.1 컨스트레인트 알아보기
8.2 컨스트레인트 로그인 화면에 적용하기

9장 레이아웃 그리드 사용하기
9.1 레이아웃 그리드 알아보기
9.2 그리드 시스템 용어 이해하기
9.3 레이아웃 그리드로 스케줄러 디자인하기

10장 플러그인 사용하기
10.1 플러그인 알아보기
10.2 플러그인으로 연락처 디자인하기
10.3 추천하는 플러그인

11장 스타일 사용하기
11.1 스타일 알아보기
11.2 스타일로 디자인 시스템 만들기

3부 피그마에서 디자인하기
12장 반응형 랜딩 페이지 디자인하기
12.1 반응형 웹 알아보기
12.2 랜딩 페이지 디자인 준비하기
12.3 그리드 설정하기
12.4 글로벌 내비게이션 바 디자인하기
12.5 인트로 배너 영역 디자인하기
12.6 소개 영역 디자인하기
12.7 클로징 배너 영역 디자인하기
12.8 태블릿, 모바일 화면 크기 대응하기

13장 뉴스 앱 디자인하기
13.1 모바일 운영체제 이해하기
13.2 뉴스 앱 디자인 준비하기
13.3 상태 바, 홈 인디케이터 넣기
13.4 하단 탭바 디자인하기
13.5 타이틀 영역 디자인하기
13.6 가로 스와이프 뉴스 디자인하기
13.7 세로 스크롤 뉴스 디자인하기
13.8 안드로이드 대응하기

4부 피그마에서 협업하기
14장 와이어프레임과 프로토타입으로 화면 설계하기
14.1 와이어프레임과 프로토타입이 필요한 이유
14.2 스케치하며 화면 기획하기
14.3 화면 와이어프레임 그리기
14.4 프로토타입으로 동적인 화면 만들기
14.5 프레젠테이션 뷰 활용하기

15장 팀 라이브러리로 디자인 리소스 관리하기
15.1 팀 라이브러리에 파일 퍼블리싱하기
15.2 팀 라이브러리 파일 다루기
15.3 디자인 시스템과 아토믹 디자인

16장 실시간 협업하기
16.1 파일 공유로 실시간 협업 시작하기
16.2 코멘트 남기기
16.3 옵저베이션 모드

17장 개발자가 피그마 활용하기
17.1 피그마 한곳에서 해결하기
17.2 디자인 에셋 추출하기
17.3 코드 탭 활용하기

부록 A 피그마 커뮤니티 활용하기
부록 B 피그마 템플릿 사용하기
부록 C 어떤 디자이너로 성장하고 싶은가