📘 [내일배움캠프 사전캠프] Figma 2주차

✨ Figma - Day 2: 오토 레이아웃과 컴포넌트 기초

---

✅ 오늘의 학습 키워드

• Frame vs Artboard
• Auto Layout 설정과 활용
• Component 생성 & 인스턴스
• Align, Gap, Spacing 기능

---

📌 오늘 학습한 내용을 나만의 언어로 정리하기

오늘은 피그마의 핵심 기능 중 하나인 Auto Layout과 Component 시스템에 대해 학습했다.
Frame을 캔버스처럼 쓰는 방식에 익숙해졌고, Auto Layout을 적용해 콘텐츠들이 자동으로 정렬되게 만드는 방법을 익혔다.
또한 Button이나 Card를 컴포넌트로 만들고 재사용하는 법도 연습해보았다.

---

❗ 학습하며 겪었던 문제점 & 에러

• 오토 레이아웃을 적용한 뒤 텍스트가 알맞게 정렬되지 않음
• 컴포넌트를 수정했는데 전체 인스턴스가 다 바뀌는 문제 발생

---

📖 문제 & 에러에 대한 정의

• 오토 레이아웃 문제: 텍스트 박스의 크기 설정이 ‘Hug contents’가 아니라 ‘Fixed size’로 되어 있어 의도한 정렬이 깨짐
• 컴포넌트 문제: 원본 컴포넌트를 수정해서 모든 인스턴스가 같이 변경됨 (인스턴스 분리 안 됨)

---

🧪 내가 한 시도

• 오토 레이아웃 속성(방향, 정렬, 패딩 등)을 하나씩 바꿔보며 동작 확인
• 인스턴스를 ‘Detach’하고 수정해보기

---

✅ 해결 방법

• 텍스트 박스의 Size를 Hug contents로 변경
• 수정 전, 컴포넌트 인스턴스를 Detach Instance하여 개별 수정

---

🌱 새롭게 알게 된 점

• Auto Layout은 요소 간 반응형 정렬이 가능해서 디자인 효율이 높아진다
• Component는 디자인 시스템의 핵심이며, 재사용성과 유지보수에 유리하다
• 프레임 안에서 Auto Layout을 잘 활용하면 '수동 정렬'을 거의 안 해도 된다

---

💻 알게 된 단축키 & 기능

• Shift + A: Auto Layout 추가
• Alt: 요소 간 간격 확인
• Cmd/Ctrl + D: 요소 복제
• Cmd/Ctrl + Shift + K: 컴포넌트 만들기
• Cmd/Ctrl + Enter: 인스턴스 바로 편집 진입

---

🤔 이 문제를 다시 만나게 된다면?

• Auto Layout 설정 시 Hug / Fill / Fixed 구분을 먼저 점검하겠다
• Component는 복제해서 테스트하고, 수정 전에는 항상 인스턴스를 분리하겠다

---

📅 내일 학습할 예정

• 다양한 상태(hover, disable 등)를 가진 컴포넌트 만들기
• 변수(Variables) 기능 사용해보기
• Figma 플러그인 활용법 & 추천 플러그인 탐색

숙제