피그마의 컴포넌트 프로퍼티(Property)와 베리언트(variants) 사용법
이전 포스팅에서 피그마의 컴포넌트에 대해서 포스팅을 했었습니다. 만약 피그마의 컴포넌트에 대해서 잘 모르시면 아래 링크를 먼저 읽어보시는 것이 좋습니다.
피그마에서 가장 중요하고 이해가 필요한 것이 컴포넌트 프로퍼티(Property)와 베리언츠(Variants), 오토 레이아웃입니다.
한글로 번역하면..
- 프로퍼티(Property) - 속성 : 인스턴스의 디자인 패널을 통해 미리 마스터 컴포넌트에 설정해 놓은 속성(Property)을 선택 또는 입력으로 지정한 변형을 줄 수 있음
- 베리언츠(Variants) - 변형 : 몇 개의 마스터 컴포넌트를 베리언츠로 하나로 묶어서 설정하며 인스턴스로 사용할 때 디자인 패널에서 그 중 하나를 선택하여 사용함
마스터 컴포넌트를 생성하고 인스턴스를 복제하여 사용할 때 미리 세팅해 놓은 속성이나 베리언츠의 설정으로 인스턴스에 제한된 변형을 줄 수 있습니다.
예를 들면, 버튼의 on/off의 형태나, 버튼의 위계 구분 등에 활용할 수 있습니다.
컴포넌트의 프로퍼티(Property)
하나의 컴포넌트에 3종류(Boolean, Instance swap, Text)의 프로퍼티가 있으며 이 프로퍼티를 여러 번 사용하면서 여러 건의 프로퍼티를 만들 수 있습니다. 프로퍼티의 설정은 컴포넌트 하위의 요소를 선택하고 3개의 프로퍼티 중 하나를 선택하여 설정하면 됩니다.
- Boolean : 컴포넌트 요소에 대해 True/False로 2가지 값을 가짐
- Instance swap : 컴포넌트 요소에 대해 다른 요소로 바꿔치기할 수 있음
- Text : 사용된 글씨를 변경할 수 있음
아래와 같이 마스터 컴포넌트에 Text 프로퍼티와 Boolean 프로퍼티를 지정하였습니다.
이렇게 설정된 프로퍼티의 사용은 인스턴스로 사용될 때 디자인 패널에서 지정된 속성값을 선택하면서 사용이 가능합니다. 아래와 같이 Title과 ShowIcon의 설정을 변경하며 사용할 수 있습니다.
컴포넌트의 베리언츠(Variants)
베리언츠는 위에서처럼 생성한 마스터 컴포넌트들을 여러 개 묶어서 하나의 베리언츠로 만들 수 있습니다. 베리언츠는 보라색 점선 테두리로 하나로 묶인 것처럼 표시를 합니다.
베리언츠로 묶인 각각의 마스터 컴포넌트들은 위에서 설정한 프로퍼티를 다르게 가지고 있습니다. (일반적으로 베리언츠로 묶인 컴포넌트들은 프로퍼티를 동일하게 맞춰서 사용하는 편이긴 합니다.)
.
이 베리언츠의 사용도 인스턴스로 사용될 때 디자인 패널에서 베리언트 컴포넌트를 선택하는 것으로 사용할 수 있습니다. 위의 그림에서는 2번째 베리언트 컴포넌트를 선택했네요.
결론
이 컴포넌트, 컴포넌트 프로퍼티, 베리언츠를 활용하여 아래와 같이 버튼 시스템 같은 UI 시스템을 만들어 놓고 필요할때 적용하여 사용합니다. 컴포넌트, 베리언츠를 사용하면 여러 사람이 동시에 디자인을 진행해도 동일한 UI를 구사할 수 있고 마스터 컴포넌트를 수정하게 되면 적용된 전체 인스턴스를 수정할 수도 있습니다. 컴포넌트로 아토믹 디자인을 구현하게 되는 것이지요.
