[내배캠 베이스캠프] 피그마 기초 완전 정복 | 4주차

컴포넌트 프로퍼티

 

컴포넌트 프로퍼티의 개념

 

변화와 변경 관련 피그마 컴포넌트 기능

 

컴포넌트 프로퍼티의 구성

 

‣ Variant: 컴포넌트 가상의 상태를 만들 때 사용

‣ Text: 컴포넌트 안에 있는 텍스트를 컴포넌트 속성으로 만들어 줌

‣ Boolean: 레이어를 껐다 켰다 하는 속성 값

‣ Instance swap: 인스턴스를 다른 인스턴스로 교체할 때 사용

‣ Slot: 슬롯이라는 에셋 교환 영역을 가진 빈 깡통 형태의 컴포넌트 (새로 추가된 기능인 듯)

 

 

 

 

배리언츠 실습

 

버튼의 위계 배리언츠 만들기

 

 

Properties - Varient 추가

 

‣ Priority: 프라이머리 (Primary, 1순위) - 세컨더리 (Secondary, 2순위) - 터시어리 (Tertiary, 3순위)

‣ Size: Large - Small

‣ State: Default - Pressed

 

 

아이콘 추가하기 (Boolean)

 

 

 

Properties - Boolean 추가 - 아이콘 선택 - Appearance 패널 - Apply propertiy - 생성한 Boolean 적용

 

 

 

아이콘 변경하기 (Instance swap)

 

 

 

 

 

 

 

합성 컴포넌트

 

합성 컴포넌트

 

컴포넌트를 모아 만든 컴포넌트

 

네스티드 인스턴스

 

피그마 기능, 감싼 인스턴스 기능

재료로 쓰인 컴포넌트를 하위 컴포넌트, 본체를 상위 컴포넌트라고 봤을 때 상위 컴포넌트에서도 하위 컴포넌트의 속성을 조작할 수 있도록 하는 기능

 

합성 컴포넌트의 일종인 탭(Tab) 구조

 

 

 

탭 만들기