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

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

</aside>

<aside> 💡 수업 목표

• 프레임과 그룹의 차이를 이해하고 사용할 수 있다
• 오토레이아웃의 원리를 이해하고 사용할 수 있다
• 컨스트레인트와 리사이징의 개념을 이해하고 사용할 수 있다 </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>

이번에 배울 것

<aside> ❓ 피그마를 다루기 위해 반드시 알아야 하는 핵심 개념인 프레임과 프레임을 다루는 오토레이이웃, 컨스트레인트 등 핵심 기능에 대해 같이 알아볼까요?

</aside>

❖ 프레임과 컨스트레인트

<aside> 📌 피그마 디자인의 기본 단위, 프레임!

</aside>

• 피그마를 본격적으로 다루기 위해 필요한 기능과 개념을 살펴볼 거예요.
• 피그마로 디자인을 진행할 땐 반드시 ‘프레임(Frame)’ 을 이해해야 해요. 이 프레임을 만드는 것부터 모든 피그마 디자인이 시작돼요.
• 프레임이 움직이는 규칙인 컨스트레인트는 뭔지 하나씩 같이 살펴 봐요!

❖ 오토레이아웃과 리사이징

<aside> 📌 프레임에 벌어지는 마법 같은 기능, 오토레이아웃과 리사이징!

</aside>

• 오토레이아웃은 UI 구조 설계에서 아주 핵심적인 역할을 담당해요.