피그마 마스터 컴포넌트와 인스턴스 / 베리언츠와 프로퍼티

🤴 마스터 컴포넌트와 인스턴스

❖마스터 컴포넌트는 원본! 가장 상위에 위치한 컨트롤타워 역할입니다.
◇인스턴스는 마스터 컴포넌트의 복제본! 마스터 컴포넌트가 있어야만 인스턴스가 존재합니다.
복제본인만큼 마스터 컴포넌트의 속성을 이어 받아요. 

 

👥 마스터 컴포넌트와 인스턴스의 관계성

1. 마스터 컴포넌트를 지워도 인스턴스는 남아있습니다.
2. 연결을 해제하면 인스턴스는 컴포넌트와 분리되고, 일반적인 프레임으로 변경됩니다.
3. 마스터 컴포넌트를 수정하면 인스턴스에도 반영됩니다.
4. 인스턴스를 수정하면 마스터 컴포넌트에 반영되지 않습니다.

ex)마스터 컴포넌트의 색상을 레드 ➡️ 블루로 바꾸면 인스턴스도 블루로 바뀝니다.
인스턴스의 컬러를 마음대로 바꿔도 마스터 컴포넌트의 색상은 바뀌지 않습니다.

 

컴포넌트를 다양한 환경에서 유연하게 쓸 수 있도록 하는 배리언츠와 프로퍼티 기능 알아보기!👇👇

 

🤴 베리언츠와 프로퍼티

베리언츠는 변종이라는 뜻으로 컴포넌트가 가질 수 있는 또 다른 모습을 말합니다.
같은 버튼이라도 누르지 않았을 때, 마우스를 올렸을 때, 누를 수 없는 상태일 때 모습을 보면
형태는 같지만 상태가 다름을 인지할 수 있게 스타일에 변화가 있죠 :) 

 

프로퍼티는 속성이라는 뜻으로 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소를 다룰 때 사용해요.
위 버튼을 보면 아이콘+텍스트 구조는 같지만 속성에 따라 글자와 아이콘이 바뀌는 것을 볼 수 있죠 :)