[Figma] 메인 컴포넌트(Main component) 와 인스턴스 컴포넌트(Instance component)

메인 컴포넌트(Main component) 
인스턴스 컴포넌트(Instance component)

컴포넌트(Component)란?

반복적으로 사용되는 요소를 재사용하기 위해 사용하는 기능이다.
피그마에서 컴포넌트는 디자인 전체에서 재사용 할 수 있는 요소로 정의된다.
버튼이나 아이콘 같은 작은 요소부터 레이아웃 전체까지 다양한 범위에서 사용 할 수 있다.

핵심은, 컴포넌트의 '재사용성'에 있다.
컴포넌트로 요소들을 만들고 반복하여 사용하면, 모든 요소를 한 번에 편집할 수 있기 때문에 유지보수에 용이하다.
그렇기 때문에 컴포넌트들은 따로 분류하여 관리하는 것이 좋다.

 

예시로, 버튼을 하나 만들어보았다.

컴포넌트로 만들고 싶은 요소를 클릭한 후 상단 중앙을 보면, Create component 라는 버튼을 발견할 수 있다.

이 버튼을 클릭하면, 3가지의 변화가 생긴다.

 

 

 

1. 상단 아이콘의 변화

 

2. 좌측 요소의 레이어 모습의 변화

 

3. 변화툴의 색 변화 (파란색 →보라색)

 

 

이렇게 만든 컴포넌트를 메인 컴포넌트라고 한다.

메인 컴포넌트(Main Component)란?

가장 먼저 생성한 컴포넌트를 ' 메인 컴포넌트 '라고 한다.
메인 컴포넌트로부터 복사된 컴포넌트인 인스턴스 컴포넌트의 기본 속성을 정의하는 역할을 한다.
보통, 디자인 작업물에 직접 사용하지 않고 별도의 페이지에서 관리하는 것이 일반적이다.
메인 컴포넌트를 디자인에 직접 사용하게 될 경우에 메인 컴포넌트와 인스턴스 컴포넌트를 혼동하게 되는데,
이럴 경우에 의도치 않게 모든 컴포넌트 속성이 한번에 변경될 수 있어 주의해야한다.

 

인스턴스 컴포넌트(Instance Component)

메인 컴포넌트를 복제하면 상단에 프레임 명이 뜨지 않고 레이어 패널 모양도 바뀌며 ' 인스턴스 컴포넌트 '가 된다.
인스턴스 컴포넌트는 디자인에 직접 사용되는 컴포넌트로, 메인 컴포넌트와 속성이 동기화 되어있다.
컴포넌트 속성이 바뀔 때 인스턴스 컴포넌트도 함께 바뀐다.

인스턴스 컴포넌트는 
만약 인스턴스 임포넌트를 수정하게 되면 

메인 컴포넌트를 복제하면 인스턴스 컴포넌트가 생긴다. 우측의 프레임 명이 없는 버튼이 인스턴스 컴포넌트이다.

좌측 레이어패널에도 모양이 변화하며 Frame 으로 이름이 설정된다.

요소 좌측상단에 레이어명이 없는 것이 특징이다.

인스턴스에게 따로 속성을 주면 메인컴포넌트는 바뀌지 않지만, 메인컴포넌트를 바꾸면 인스턴스도 바뀐다.

만약 인스턴스를 어떤 부분을 바꿔놓으면 메인컴포넌트를 바꿔도 그 부분은 그대로 유지된다. 하지만, 인스턴스에게 바꿔놓은 부분이 메인컴포넌트에 바꾸려고 하는 부분이랑 중복되는 속성이 아니라면 메인 컴포넌트를 바꾸면 같이 바뀐다.

 

컴포넌트 채널의 Go to main componet 아이콘을 클릭하면 메인 컴포넌트의 위치로 이동한다.

 

 

<메인 컴포넌트 복구>
실수로 컴포넌트가 삭제된 경우, 인스턴스 컴포넌트를 클릭 후
채널에서 Restore Componet를 클릭하면 된다.