[Figma] 컴포넌트 프로퍼티 (배리언츠 vs 프로퍼티)

컴포넌트 프로퍼티(Property)

컴포넌트 인스턴스를 더 유연하게 제어할 수 있도록 만들어주는 속성

디자이너가 마스터 컴포넌트를 만들 때 텍스트, 아이콘, 상태, 토글 여부 등을 인스턴스에서 쉽게 수정하거나 선택할 수 있도록 설정

 

 

프로퍼티 종류

배리언츠 / 텍스트, 불린, 인스턴스 스왑

 

 

 

---

 

Variant(배리언츠)

컴포넌트가 가질 수 있는 또 다른 모습을 만들 수 있게 하는 컴포넌트 기능

• 여러 의사결정 상태를 디자인할 때 사용

 

 

1️⃣ 배리언츠 - 위계(hierarchy, priority); 하이어라키, 프라이어티

제품에서 사용자가 반드시 해야하는 중요한 행동이라면 가장 돋보이는 1순위의 버튼을 쓰고, 중요하지 않을 수록 3순위의 버튼을 사용

프라이머리(Primary, 1순위), 세컨더리(Secondary, 2순위), 터시어리(Tertiary, 3순위)의 위계 3단계

 

2️⃣ 배리언츠 - 크기(Size)

일반적으로 Large, Medium, Small의 3가지 단계를 사용

 

3️⃣ 배리언츠 - 상태(State)

버튼이 가질 수 있는 의사 상태로 Default(Enable), Hover, Pressed, Disabled 등을 표현

 

---

 

 

Property(프로퍼티) : Text, Boolean, Instance swap

디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용

• 같은 디자인 안에서 텍스트 바꾸고, 요소를 on/off 하거나, 아이콘 변경할 때 사용

 

 

1️⃣ Boolean

컴포넌트 안에 있는 특정 요소를 보이게 하거나 안 보이게 할 수 있는 속성

즉, 레이어를 껐다가 켰다가 할 수 있는 속성값

 

2️⃣ Instance swap

인스턴스를 다른 인스턴스로 교체하는 기능

주로 버튼 안의 아이콘, 팝업 안의 버튼 등을 교체할 때 사용

* 인스턴스여야 서로 교체 가능!

 

3️⃣ Text

컴포넌트 안에 있는 텍스트를 수정하기 쉽도록 컴포넌트 속성으로 만들어주는 기능