#프로토타입핑 #프레젠테이션 #피그마 기초

figma 프로토타입핑 어디까지 될까

https://youtu.be/oY4EoQCOzeo

1. 프레젠테이션 제작 #기초

저는 UX 프로토타입핑 뿐만 아니라 발표 리소스 자료 준비 및 PT 시 Figma로 프레젠테이션을 합니다.

Youtube 모바일 App을 기준으로 UX/UI Case Study #피그마기초 #프로토타입핑

[Part 1 강좌 요약] 

• 0:00 - Intro
• 0:25 - 1/6 프레젠테이션 모드 설정방법 {오타 정정: 프리젠테이션 -> 프레젠테이션}
• 1:44 - 2/6 Interaction & Animation 옵션 설정
• 2:05 - 3/6 실전 연습 1 - Page Transition 효과
• 6:17 - 4/6 실전 연습 2 - 뒤로가기 버튼 설정
• 7:32 - 5/6 Figma 프레젠테이션 공유하고 피드백 받기
• 8:14 - 6/6 모바일 디바이스로 Figma Mirroring

 

 

2. Smart Animate 기능 구현 

"보다 자연스럽고 디테일한 프로토타입핑을 제작하기 위한 기능"

#피그마 #스마트-애니메이션

[Part 2 강좌 요약] 

• Youtube 모바일 App을 기준으로 UX/UI Case Study
• 프로토타입핑 제작을 위한 기본 가이드 영상입니다.

 

3. 스크롤 기능 구현하는 방법

스크롤, 팀 라이브러리 활용, 컴포넌트 활용, 오토 레이아웃 기능 활용, 기타 Tip

#피그마 스크롤 #스크롤 3종 세트

[Part 3 강좌 요약] 

• 0:00 Intro
• 0:32 1/4 스크롤 기능 구현을 위한 화면 배치 #팀라이브러리
• 5:23 2/4 가로 스크롤 기능(Horizontal Scrolling)
• 6:30 3/4 세로 스크롤 기능(Vertical Scrolling)
• 8:15 4/4 좌우상하 스크롤 기능(Horizontal & Vertical Scrolling)

 

4. Overlay 구현하는 방법

팝업, Side Menu 프로토타입핑 구현 시 유용한 기능

#figma overlay #실무예제

[Part 4 강좌 요약]

• 0:33 실전 예제 1/4 - Overlays를 활용한 {Side Menu, Dialog} 구현
• 2:08 실전 예제 2/4 - Overlays를 활용한 {Bottom Sheets} 구현
• 3:05 실전 예제 3/4 - 원하는 위치에 Overlays를 적용 {오타 정정: Menual -> Manual}
• 4:33 실전 예제 4/4 - Overlay를 {Swap With}로 변경

 

 

---

Sketch에서 Figma로 전환하게 된 계기

프로토타입과 관련된 기능 일부가 최근 업데이트 되었습니다. (아래 링크 참고)

8월 figma Releases

---

연정's figma - Youtube 채널

구독과 좋아요는 힘이 됩니다. 

연정's Figma