📘 [내일배움캠프 사전캠프] Figma 4주차
✨ Figma - Day 4: 컴포넌트 프로퍼티 & 네스티드 인스턴스
✅ 오늘의 학습 키워드
- 컴포넌트 프로퍼티
- 배리언츠(Variants)
- 불리언, 텍스트, 인스턴스 스왑 프로퍼티
- 합성 컴포넌트
- 네스티드 인스턴스
📝 오늘 학습한 내용을 나만의 언어로 정리하기
피그마에서 컴포넌트를 더 유연하게 활용하려면 컴포넌트 프로퍼티를 적절히 설정해야 한다.
프로퍼티는 상태를 바꾸는 배리언츠, 요소의 보임/숨김을 조정하는 불리언, 아이콘 교체를 위한 인스턴스 스왑, 텍스트 수정이 쉬운 텍스트 프로퍼티로 나뉜다.
또한 합성 컴포넌트와 그 안의 요소들을 컨트롤할 수 있는 네스티드 인스턴스 개념을 이해하고 실습했다.
⚠️ 학습 중 겪었던 문제점 & 에러
- 배리언츠 추가 시 "값이 중복되어 오류 발생"
- 컴포넌트 안에 아이콘이 제대로 안 들어감
- 프로퍼티 연결 아이콘(⎆)이 잘 안 보임
🔍 문제 & 에러에 대한 정의
- 값 중복 오류: Variants에서 동일한 프로퍼티 값이 중복되어 충돌
- 드래그 실패: 아이콘을 정확히 컴포넌트 내부에 넣지 못해서 인스턴스로 인식되지 않음
- ⎆ 아이콘: 프로퍼티 적용 가능 요소에만 표시됨. 찾기 어려움
🔁 내가 한 시도
- 배리언츠 중복값 수동 수정
- 아이콘 붙여넣기 대신 드래그 시 컴포넌트 내부 하이라이트 확인
- ⎆ 아이콘 위치 기억하고 반복적으로 확인
✅ 해결 방법
- Select conflicting variants 클릭해 중복 항목 식별 후 이름 수정
- 컴포넌트 안에 정확히 드래그할 수 있도록 연습
- ⎆ 아이콘은 텍스트, 아이콘 등의 속성 편집 영역 우측에 위치함을 인지하고 찾음
🌱 새롭게 알게 된 점
- 모든 상태 변화가 배리언츠가 되는 것이 아님. 파운데이션 값이 변해야 배리언츠
- 불리언 프로퍼티 하나만으로 아이콘 있는/없는 상태를 전환 가능
- 네스티드 인스턴스 설정 시 상위 컴포넌트에서 하위 컴포넌트 속성 제어 가능
🔧 새로 알게 된 구문이나 기능
Show Leading Icon같은 불리언 프로퍼티 이름은 가독성 좋게 명확하게 지어야 함- 배리언츠 이름 예:
Priority,Size,State등 실무에서 바로 쓸 수 있음
🔁 이 문제/에러를 다시 만나게 된다면?
- 오류 메시지에 겁먹지 않고 원인(중복값 등)을 침착하게 찾는다
- 컴포넌트 내부 삽입 시 하이라이트 여부 꼭 확인
- 프로퍼티 연결 여부는 항상 ⎆ 아이콘 확인
📅 내일 학습할 것
- 아이콘이 포함된 상태에서 배리언츠 조합별 실전 UI 컴포넌트 만들기
- 실제 디자인 시스템 분석 및 피그마에서 구현 연습 (예: Material Design Tab, Card 등)
- 프로토타입 연결 시 프로퍼티의 활용법
📅 숙제
잘 부탁드립니다