[목 차]

들어가며

 

Part 01 피그마 알아보기

Lesson 01 피그마 특징 살펴보기

클라우드

실시간 협업

파일 관리

벡터 이미지

플러그인

 

Lesson 02 피그마 다운로드하기

피그마 웹

피그마 데스크톱 앱

피그마 모바일 앱

 

Lesson 03 피그마 인터페이스 알아보기

홈 화면

디자인 화면

 

Lesson 04 피그마 파일 구조 알아보기

프로젝트

파일 및 페이지

 

Part 02 피그마 시작하기

Lesson 01 툴 바 알아보기

이동 도구

영역 도구

도형 도구

창작 도구

텍스트

댓글

작업

 

Lesson 02 간단한 예제로 툴 바 익히기

프레젠테이션 슬라이드 만들기

복잡한 도형 만들기

이미지 배치·활용하기

 

Lesson 03 레이아웃 가이드 만들기

레이아웃 가이드 설정

그리드 스타일 등록하기

가이드 활용하기

 

Lesson 04 피그마 드로우 알아보기

피그마 드로우 펜

피그마 드로우 브러시

 

Part 03 스타일 관리하기

Lesson 01 색상 스타일 관리하기

색상 팔레트 설정하기

색상 팔레트 활용하기

 

Lesson 02 텍스트 스타일 관리하기

텍스트 스타일 설정하기

텍스트 스타일 활용하기

 

Part 04 컴포넌트로 동일한 형태 반복 사용하기

Lesson 01 컴포넌트 시작하기

인스턴스 만들기

오버라이드 적용하기

컴포넌트 활용하기

 

Lesson 02 복잡한 인터페이스, 컴포넌트로 관리하기

중첩 컴포넌트 활용하기

불리언으로 컴포넌트 더 쉽게 관리하기

알림창 만들기

 

Part 05 오토레이아웃 마스터하기

Lesson 01 오토레이아웃 시작하기

흐름

크기조정

정렬

패딩

 

Lesson 02 오토레이아웃을 활용한 실무 예제 4가지

내비게이션 바 만들기

뉴스레터 구독 섹션 만들기

댓글 화면 만들기

뉴스 기사 레이아웃 만들기

 

Lesson 03 그리드를 이용한 레이아웃 구성하기

카드형 레이아웃으로 콘텐츠 정리하기

대시보드 그리드로 보기 쉽게 정리하기

 

 

Part 06 프로토타입으로 움직이는 디자인 완성하기

Lesson 01 프로토타입 시작하기

프로토타입 살펴보기

프로토타입을 활용한 실무 예제 8가지

 

Lesson 02 사용자 입장에서 사용성 테스트하기

프로토타입 공유하기

슬라이드를 이용해 피드백 수집하기

 

 

Part 07 피그마 버즈로 더 쉽게 디자인하기

Lesson 01 피그마 버즈 시작하기

피그마 버즈로 브랜드 콘텐츠 제작하기

피그마 버즈에서 콘텐츠 공유하기

 

Lesson 02 피그마 버즈로 생산성 끌어올리기

스프레드시트로 대량 콘텐츠 제작하기

피그마 AI 시작하기

템플릿 게시하기

 

Part 08 변수로 디자인의 가능성 넓히기

Lesson 01 변수 시작하기

라이트·다크 모드 디자인하기

버튼을 이용해 라이트·다크 모드 전환하기

Lesson 02 변수로 다양한 인터랙션 구성하기

펼치고 접히는 메뉴 만들기

조건부 프로토타입으로 토스트 구현하기

 

Part 09 팀원 모두와 협업하기

Lesson 01 팀 라이브러리로 협업하기

팀 라이브러리 만들기

팀 라이브러리에 포함된 스타일을 문서화하기

팀 라이브러리 업데이트하기

 

Lesson 02 디자인 파일 안전하게 관리하기

브랜치 시작하기

버전 내용 확인하고, 파일 복원하기

데브 모드 알아보기

 

자주 사용하는 디자인 실무 플러그인 정리

마치며

찾아보기