피그마 클래스(설계부터 개발까지 완벽한 협업을 위한)

★세 가지 클래스로 완성하는 피그마 마스터 코스★
Part 1. 피그마 기초 클래스
-. 피그마의 이해
-. 디자인 파일 관리 방법
-. 피그마 UI와 기본 툴 실습
-. 화면을 구성하는 이미지 편집
-. 피그마 UI와 기본 툴 실습
-. 작업 환경을 위한 스타일 구성

Part 2. 피그마 활용 클래스
-. 반응형 레이아웃의 기본
-. 시스템 구축을 위한 컴포넌트
-. 베리언트 활용
-. 프로토타이핑 실습
-. 인터랙션의 이해와 활용

Part 3. 피그마 실전 프로젝트
-. 인터랙션 화면 디자인
-. 실전 앱 화면 제작
-. 반응형 웹 사이트 제작
-. 피그마로 협업하는 방법
-. 핸드오프와 버전 관리

★이 책의 대상 독자★
-. 피그마 기초부터 제대로 배우고 싶은 디자인 비전공자
-. 기획자, 개발자와의 소통을 중요하게 생각하는 디자이너
-. 조직에서 원활한 프로젝트 협업을 끌어내고 싶은 관리자

[Part 1 피그마 기초 클래스]
Chapter 1 피그마와 친해지기
_1.1 피그마의 이해
_1.2 피그마 회원 가입과 앱 설치하기
__기본 예제 1-1 피그마 계정 생성
_1.3 파일 브라우저와 커뮤니티 살펴보기
_1.4 디자인 파일 관리 방법
__기본 예제 1-2 새로운 디자인 파일 만들기
__기본 예제 1-3 디자인 파일 안에 페이지 생성하기
_1.5 피그마 UI와 기본 툴 파악하기
_1.6 피그마의 기본 프레임 다루기
__기본 예제 1-4 프레임 만들고 이름 변경하기
_1.7 레이아웃 그리드 설정하기
__기본 예제 1-5 모바일 레이아웃 그리드 만들기
__기본 예제 1-6 데스크톱 레이아웃 그리드 만들기

Chapter 2 피그마 툴 이해하기
_2.1 디자인 요소를 만드는 도형 툴
__활용 예제 2-1 도형 툴 사용하기
_2.2 시각적인 화면을 구성하는 이미지 편집
__활용 예제 2-2 소셜 미디어 앱의 메인 화면 만들기
_2.3 디자인 작업 환경을 위한 스타일 만들기
__기본 예제 2-1 레이아웃 그리드 스타일 만들기
__기본 예제 2-2 컬러 스타일 만들기
__기본 예제 2-3 텍스트 스타일 만들기

[Part 2 피그마 활용 클래스]
Chapter 3 피그마 기능 익히기
_3.1 반응형 레이아웃을 위한 오토 레이아웃과 리사이징
__활용 예제 3-1 텍스트 길이에 반응하는 버튼 만들기
__활용 예제 3-2 카드 UI 제작하기
_3.2 다양한 디바이스에 대응하는 콘스트레인트
__활용 예제 3-3 UI 요소마다 콘스트레인트 설정하기
_3.3 디자인 시스템 구축을 위한 컴포넌트
__활용 예제 3-4 버튼 컴포넌트 만들기
__활용 예제 3-5 컴포넌트를 복사한 인스턴스 사용하기
__활용 예제 3-6 인스턴스를 오버라이드하기
_3.4 복잡한 디자인 시스템도 깔끔하게 정리하는 컴포넌트 프로퍼티
__활용 예제 3-7 버튼 컴포넌트 프로퍼티
_3.5 컴포넌트를 논리적으로 그룹핑하는 베리언트
__활용 예제 3-8 베리언트를 활용한 텍스트 필드 만들기
_3.6 디자인 설계를 도와주는 베리어블
__기본 예제 3-1 베리어블 만들기
__활용 예제 3-9 컬러 베리어블을 활용한 라이트/다크 테마 구현하기

Chapter 4 프로토타이핑
_4.1 프로토타이핑 알아보기
_4.2 플로와 스타팅 포인트 다루기
_4.3 인터랙션의 기본과 활용
__기본 예제 4-1 인터랙션 연결하기
__활용 예제 4-1 인터랙션과 애니메이션으로 온보딩 화면 만들기
_4.4 스크롤 비헤비어 다루기
__활용 예제 4-2 소셜 미디어 앱 스크롤 설정하기
__활용 예제 4-3 지도에 양방향 스크롤 설정하기
_4.5 인터랙션 실습하기
__활용 예제 4-4 카드 슬라이딩 스마트 애니메이션 만들기
_4.6 인터랙티브 컴포넌트 사용하기
__활용 예제 4-5 스위치 만들기

[Part 3 피그마 실전 프로젝트]
Chapter 5 실무에서 바로 쓰는 인터랙션 디자인
_5.1 고정 탭 만들기
_5.2 상품 갤러리 스크롤 인터랙션 만들기
_5.3 GNB 메뉴 구성하기
_5.4 웹 사이트 헤더 만들기
_5.5 섬네일 크기를 조정하는 인터랙션 만들기

Chapter 6 클래스 앱 디자인
_6.1 클래스 앱의 홈 화면 디자인하기
_6.2 베스트 클래스 리스트 디자인하기
_6.3 클래스 상세 페이지 디자인하기
_6.4 드로어 만들기
_6.5 질문 모달 만들기
_6.6 프로토타이핑 설정하기

Chapter 7 반응형 웹 사이트 디자인
_7.1 반응형 웹 사이트 이해하기
_7.2 데스크톱 크기의 메인 화면 만들기
_7.3 디바이스 크기에 반응하는 오토 레이아웃 설정하기

Chapter 8 피그마로 협업하기
_8.1 협업을 위한 팀 만들기
__기본 예제 8-1 팀 만들기
_8.2 디자인을 개발에 넘기는 핸드오프
_8.3 공유된 파일의 코드 확인하고 복사하기
_8.4 버전 히스토리 관리하기

박수진 15년 차 프리랜서 디자이너이자 강사로 활동하며, 유튜브 채널 '루씨의 UX/UI 디자인'을 운영 중이다. UX/UI 디자이너는 물론 서비스 기획자, 개발자까지 모두가 피그마로 자유롭게 협업할 수 있길 바라며, 수년간의 현장 경험과 강의를 바탕으로 피그마 온/오프라인 교육에 힘쓰고 있다.
youtube.com/@UXUI
figma.com/@designerlucy