피그마 스타터

PART 01 피그마(Figma) 시작하기
section 01 피그마의 개요
section 02 UI 디자인과 디바이스의 이해
1. UI 디자인의 이해
2. 디바이스의 이해
section 03 그래픽 표현 방식의 이해
1. 그래픽 디자인 프로그램
2. 그래픽 컬러의 이해
section 04 피그마 시작하기
section 05 피그마 인터페이스 살펴보기

PART 02 피그마 기본 도구 활용하기
section 01 도형 도구를 활용하여 제작하기
1. 작업 영역 만들기
2. 사선 만들기
3. 로고 만들기
4. 라인 만들기
5. 텍스트 입력하기
section 02 스타일과 디자인 시스템 라이브러리 관리하기
1. 작업 영역 만들기
2. 색상을 스타일에 등록하기
3. 텍스트 서식을 스타일에 등록하기
4. Effect를 스타일에 등록하기하기
5. Grid를 스타일에 등록하기

PART 03 피그마로 실무 디자인 시작하기
section 01 음악 스트리밍 앱 화면 제작하기
1. 헤더 만들기
2. 메인 컨텐츠 영역 만들기
3. 플레이 버튼과 더 보기 아이콘 제작하기
section 02 랜딩 페이지 디자인 제작하기
1. 메인 이미지 영역 만들기
2. 여행 소개 페이지 만들기
3. 배너 만들기

PART 04 피그마 핵심 기능 활용하기
section 01 디자인 시스템 생성 및 관리
1. 디자인 시스템 파일 불러오기
2. 타이포그래피 시스템 만들기
3. 그리드 시스템 만들기
section 02 아카데미 웹디자인 프로젝트 제작
1. 데스크탑 반응형 코딩학원 웹디자인 제작하기–기본 레이아웃 설정하기
2. 헤더 만들기
3. 메인 비주얼 영역 만들기
4. 메인 콘텐츠 영역 만들기 01 : 제목 영역 만들기
5. 콘텐츠 영역 만들기 02 : 제목 영역 만들기
6. 콘텐츠 영역 만들기 03
7. 배너 영역 만들기
8. footer 만들기
9. 디자인 결과물 Export 하기

PART 05 베이커리 앱 UI 디자인 제작하기
section 01 베이커리 앱 버튼 만들기
1. 베리언츠 이해와 제작하기
section 02 베리언츠 앱 버튼 적용하기
1. 디자인에 필요한 아이콘 가져오기
2. 기본 Frame 화면 만들기
3. 상태 바 삽입하기
4. 헤더 만들기
5. 메인 비주얼 영역 만들기
6. 상세 설명 영역 만들기

PART 06 프로토타이핑과 인터랙션
section 01 캐러셀 인터랙션 제작하기
1. 앱 메인 화면 콘텐츠 수정하기
2. 페이지네이션 제작하기
3. 메인 비주얼 영역을 Carousel로 제작하기
4. Carousel에 인터랙션 적용하기
section 02 이동 메뉴 설계 및 구현하기
1. 제목 설정하기
2. Overflow scrolling Interaction 제작하기
section 03 프레임 연결 및 화면 전환하기
1. Frame 간의 Interaction 설정하기
2. 상세 화면에서 팝업 형태로 나타나는 Frame 간의 Interaction 설정하기
section 04 화면 내의 연동과 인터랙션
section 05 동적인 내비게이션 메뉴 구성
section 06 탭바 제작 및 스타일링
1. 탭바 제작하기
2. 탭바 메뉴와 앱 화면을 이동하는 Interaction 적용하기
3. 헤더와 탭바 고정시키기

PART 07 피그마로 협업 및 개발 모드 살펴보기
section 01 라이브러리 등록하기
section 02 개발 모드 살펴보기
1. Div Mode (유료)
2. 플러그인
section 03 공유하여 함께 살펴보기
section 04 피그마 버전 history 살펴보기