홈앤서비스 SK BROADBAND

[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 버전 히스토리 관리하기