📕

[스파르타 코딩클럽] PPT보다 쉬운 피그마 - 3주차

매 주차 강의자료 시작에 PDF파일을 올려두었어요!

PDF 파일

피그마 강의자료+실습예제 (피그마 파일)

[3주차 수업 Title]

빠르게 프로젝트 만들고 초간단 프로토타이핑 만들기

[수업 목표]

•

피그마로 유저 플로우를 쉽게 그릴 줄 알게 됩니다.

•

피그마 프로토타이핑의 기본기를 익힙니다.

•

작업 환경을 모바일 환경에서 볼 수 있습니다.

[목차]

모든 토글을 열고 닫는 단축키 Windows : Ctrl + alt + t Mac : ⌘ + ⌥ + t

3주차 배울 내용 피그마로 유저 플로우 쉽게 그리는 방법!

피그마로 화면설계서 템플릿을 쉽게 만드는 방법!

화면설계서 템플릿을 쉽게 만드는 방법!

피그마 프로토타이핑 기본기를 익히기!

피그마 프로토타이핑 심화, 스마트애니메이션 예제만들기

피그마를 이용해서 유저 플로우를 그리는 방법을 익혀봅시다.

1) 유저 플로우란?

2) 유저 플로우를 알아야 하는 이유는?

3) 유저 플로우 예시

피그마를 이용해서 화면설계서를 제작하는 방법을 익혀봅시다.

1) 화면설계서란?

2) 화면설계서 예시

피그마 프로토타입에 대해서 알아보고, 프로토타입에서 자주 사용하는 ‘On click (클릭시 이동)’을 적용해봅시다.

1) 피그마 프로토타입이란?

2) 피그마 프로토타입에서 알아야 하는 기본 용어

3) 피그마 프로토타입에서 트리거 종류 알아보기

4) 나이키 화면에 On click 적용하기

5) 피그마 프로토타입 인터랙션 디테일창

6) 피그마 프로토타입에서 액션 종류 알아보기

피그마 프로토타입 중에 Smart animate(스마트 애니메이션) 작동방법에 대해서 알아봅시다.

1) 간단한 스마트 애니메이션 따라 만들기

2) 스마트 애니메이션 적용 시 주의사항

3) 그래프에 스마트 애니메이션 적용하기

Figma Mirror 앱을 다운로드한 후 모바일 환경에서 피그마 작업물을 확인해 봅시다.

1) Figma Mirror 다운로드 링크

2) Figma Mirror를 이용해서 작업물을 확인하는 방법

블로그에 “클릭하면 이동하는 피그마 프로토타이핑” 총정리하기

숙제 예시

전체 강의자료 보기

다음 주차