▶️ 컴포넌트를 다양한 환경에서 유연하게 쓸 수 있도록 하는 배리언츠와 프로퍼티 기능 알아보기
배리언츠와 프로퍼티는...
컴포넌트는 가상의 상태를 가질 수 있고 이때 형태에 조금씩 변화를 주어야 하거나 컴포넌트 안의 요소가 바뀌는 경우도 있는데 베리언츠와 프로퍼티는 이런 변화 및 변경을 만들 수 있는 피그마 컴포넌트 기능이다.
배리언츠와 프로퍼티를 왜 쓰는가?
피그마에서의 디자인이란 컴포넌트를 만들고 인스턴스를 다루는 것과 밀접한 관련이 있는데 오토레이아웃 등 피그마 스킬을 통해 컴포넌트를 만들고, 디자인에 적용하는 과정을 반복하기 때문이다.
이 과정에서 하나의 컴포넌트만으로 더 다양한 디자인을 효율적으로 만들기 위해서는 배리언츠와 프로퍼티가 필수인 것이다.
배리언츠(Variants)
컴포넌트가 가질 수 있는 또 다른 모습을 만들기 위한 기능으로, 배리언츠는 컴포넌트의 가상의 상태를 만들 때 사용한다.
🔼 마우스를 올렸을 때, 누를 수 없을 때는 기본 상태의 배리언츠
프로퍼티(Property)
속성이란 뜻으로 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소를 다룰 떄 사용한다.
이처럼 기본 상태 + 아이콘이라는 디자인 구조는 그대로 존재하고 글자나 아이콘 스타일이 바뀌는 것은 프로퍼티로 조정한다.
배리언츠와 프로퍼티의 기준
둘 다 디자인에 변화가 발생한다는 것은 동일하나, 컴포넌트에 적용된 파운데이션 속성이 변하는지를 선택 기준으로 잡는 것이 좋다.
이처럼 색상, 간격, 폰트 등의 파운데이션 요소가 바뀌었을 때는 배리언츠로 만들어야 하는 것이다.
피그마 프로퍼티
우선, 마스터 컴포넌트를 생성하자 그럼 프로퍼티 패널을 확인할 수 있다.
Boolean
컴포넌트 안에 있는 요소를 보이거나 안 보이게 할 수 있는 속성으로 요소를 선택한 후 레이어 패널에서도 설정이 가능하다.
아이콘과 버튼 타이틀에 불리언 프로퍼티를 적용하면 이렇게 껐다 켰다를 적용할 수 있다.
Instance swap
현재 인스턴스를 다른 인스턴스로 교체하는 기능이다. 때문에 인스턴스가 아닌 것과의 교체는 불가능하다!
컴포넌트 안에 다른 컴포넌트의 인스턴스가 있는 경우 다른 인스턴스로 교체할 수 있는 속성이다. (주로 아이콘이나 버튼 등을 교체할 때 사용한다)
이렇게 아이콘을 변경하기 쉬워진다.
Text
컴포넌트 안에 텍스트를 수정하기 용이하도록 속성을 만들어준다.
마스터 컴포넌트에서 편집 가능한 텍스트로 속성을 설정하면
인스턴스에서 버튼 타이틀 내용을 수정할 수 있다!
