피그마 컴포넌트, Variants 기능 배우기

컴포넌트: 두번이상 사용되는 UI 요소

버튼을 하나 만든 다음, 컴포넌트 아이콘을 클릭한다.
(또는 Ctrl + Alt + K)

우측 사각형 4개 아이콘 클릭

 

원본을 복제하면 하이어라키뷰에서 아이콘이 다른 것을 알 수 있다.

원본은 컴포넌트,
복제본은 인스턴스라고 한다.

---

인스턴스에 적용된 컴포넌트를 교체하는 방법

1. 우측 사이드 바에서 컴포넌트를 클릭해서 다른 컴포넌트로 교체

2. Assets에서 드래그 한 다음, 컴포넌트 위에서 Alt + Ctrl를 눌러 교체

위와 같이 보라색 선 (Swap 가이드 라인)이 나올 때 마우스를 뗀다.

---

인스턴스 오버라이드 기능

컴포넌트를 수정하면 인스턴스도 같이 수정되지만,
인스턴스에서 수정될 경우 해당 요소는 컴포넌트와 함께 수정되지 않는다.

---

오버라이드 초기화

우측 사이드바에서 컴포넌트의 액션 버튼을 클릭 > Reset all overrides를 클릭하면
인스턴스에 적용된 오버라이드가 초기화된다.

---

오버라이드 적용

똑같은 액션 버튼에서 Push override to main component를 클릭하면
오버라이드된 변경사항이 컴포넌트로 적용된다.
(모든 내용이 변경될 수 있으므로 조심)

---

Variant 기능

여러가지 바리에이션을 만든 다음, 다중선택하고
우측 사이드바의 Combine as variants를 클릭한다.

하나의 컴포넌트가 되고, Properties에 새로운 variant가 추가된 것을 볼 수 있다.

다만, 아이콘이나 이미지의 경우 어떤 이미지인지 확인하면서 컴포넌트에서 갖다 쓰는게 좋기 때문에,
Variant 기능을 사용하는 것 보다는 각각 컴포넌트로 쓰는게 좋다.