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

체계적으 배우는 피그마 기초 완전 정복 (5).pdf

</aside>

<aside> 💡 수업 목표

• 화면 단위의 디자인을 수행하며 필요한 UI를 설계할 수 있다
• 프로토타입의 개념을 이해하고 피그마에서 프로토타이핑을 사용할 수 있다 </aside>

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/83c75a39-3aba-4ba4-a792-7aefe4b07895/393cd135-1603-4797-8fa6-42abcfedd782/SpartaIconS24.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/83c75a39-3aba-4ba4-a792-7aefe4b07895/393cd135-1603-4797-8fa6-42abcfedd782/SpartaIconS24.png" width="40px" /> 목차

</aside>

<aside> <img src="/icons/code_red.svg" alt="/icons/code_red.svg" width="40px" /> 모든 토글을 열고 닫는 단축키 Windows : Ctrl + alt + t Mac : ⌘ + ⌥ + t

</aside>

01. 이번에 배울 것

<aside> ❓ UI 설계와 배리언츠, 프로퍼티까지 모두 한번씩 학습해봤어요. 이제 화면 단위의 디자인을 진행하고, 더 나아가 디자인을 움직이게도 만들어보고, 디자인을 정리해 공유까지 해볼 거예요.

</aside>

❖ 화면 단위의 디자인(로컬 디자인)과 핸드오프

<aside> 📌 우리가 만든 UI들을 사용해 화면을 디자인하고, 필요한 UI를 더 설계해 볼 거예요.

</aside>

• 우리가 이전에 만든 UI들을 기반으로 실제 앱 화면과 유사한 화면을 만들어 볼 거예요.
• 실제 앱 화면과 유사한 화면을 만들면서 추가로 더 필요한 UI들을 더 알아봐요.
• 만든 디자인을 개발자가 이해하기 쉽도록 도와주는 디자인 문서도 알아봐요.

❖ 프로토타이핑과 피그마 프로토타입

<aside> 📌 설계한 화면들을 실제 작동하듯이 만들어 보고, 다양한 피그마 인터랙션을 살펴볼 거예요.

</aside>

• 화면들을 연결해서 실제 제품처럼 작동하도록 만드는 프로토타이핑에 대해서 배워볼 거예요.
• 피그마 프로토타입 기능을 둘러보고, 스마트 애니메이트도 같이 알아봐요.