Figma Component (컴포넌트)

 

피그마에서 Component는 다음과 같은 의미를 갖는다.

 

 

Component

반복적으로 사용되는 UI/UX 또는 패턴을 의미한다.

 

 

 

먼저 120 x 48 의 Frame을 하나 만들어준 뒤에

BUTTON 이라는 텍스트를 추가해준다.

 

그리고 동시에 선택해서 가운데 정렬을 해준다.

 

그다음에 또 전체 선택해서 Create Component 해준다.

 

오른쪽 버튼 누르고 Create Component 버튼을 누르던지

아니면 상단에 있는 아래와 같은 아이콘을 눌러주면 된다.

 

그러면 지금 컴포넌트가 생성되고, 이렇게 생성한 컴포넌트가 마스터 컴포넌트가 된다.

중심부, 즉 본체라는 말이다.

 

 

이 마스터 컴포넌트의 이름을 Frame 17에서, TOP_TAB / Active로 변경해줬다. 추후에 쓸 일이 있어서!

 

그리고 Shift + Option + 드래그를 통해

복제를 해주는데, '마스터 컴포넌트의 인스턴스 컴포넌트를 생성' 한다고 표현된다.

 

 

여기서 조금 헷갈릴 수 있는건

 

Command + D로 해도

Option + 드래그 해도

Shift + Option + 드래그 해도 모두 복붙인건 똑같은데,

 

 

제자리에 복붙

자유로운 위치로 복붙

위치 각 유지하며 복붙

 

의 차이가 있다.

두번째와 세번째의 차이를 느끼기 어렵다면 직접 드래그를 하면 느껴볼 수 있다.

 

 

아무튼 이 마스터 컴포넌트를 복제하여 인스턴스 컴포넌트를 생성한다.

 

이렇게 마스터 컴포넌트와 인스턴스 컴포넌트의 관리 차이가 다르게 되고 표현됨을 볼 수 있다.

 

 

지금은 단축키로 복붙했지만,

좌측 상단 Asset 탭을 눌러서, 방금 만든 Component를 비주얼적으로 드래그해서 가져와서 새로 생성할 수도 있다.

 

 

Master Component와 Instance Component는 어떤 관계일까?

Master Component를 수정하면 Instance Component도 자동으로 바뀐다.

 

단, 마스터 컴포넌트에서 인스턴스로 파생했을 때, 인스턴스에서 임의로 수정하여 마스터 컴포넌트와 다르게 오버라이딩 된 것은 독립적이고, 그 외에는 다 종속적으로 동작한다.

 

무슨 말이냐면, 저렇게 마스터 컴포넌트 버튼이 있는데 그걸 복사해서 인스턴스 컴포넌트를 생성했다.마스터 컴포넌트의 텍스트를 BUTTON에서 임의로 다른 것으로 변경하면, 인스턴스 컴포넌트의 텍스트도 수정된다.

 

그치만 인스턴스 컴포넌트의 텍스트를 임의로 TAB으로 수정한 뒤에마스터 컴포넌트의 텍스트를 수정해봤자, 인스턴스 컴포넌트의 텍스트는 더이상 종속적으로 바뀌지 않는다.

 

 

하여간, 이제 우리가 TOP_TAB / Active 컴포넌트를 만들었으니,

TOP_TAB / Inactive를 컴포넌트를 만들어 볼 것이다.

 

만드는 방법은 크게 두 가지가 있겠다.

 

지금 인스턴스 컴포넌트를 클릭한 뒤에, 또 다시 Create Component를 하는 방법이 있고

지금 인스턴스 컴포넌트를 오른쪽 클릭한 뒤에 Detach Instance 한 뒤에 Create Component 하는 방법이 있다.

 

 

두 방법의 결과는 위와 같이 이렇게 두 가지가 된다.

 

인스턴스 컴포넌트 위에 새로운 컴포넌트를 생성하면 계층구조가 겹치게 되고

인스턴스 컴포넌트를 Detach 하여 독립적으로 만든 뒤에 새로 컴포넌트를 생성하면 계층구조가 없어진다.

 

어느 것으로 만들던 상관 없겠지만, 차이가 있다면

전자의 경우에는 여전히 마스터 컴포넌트에서 Button 텍스트를 수정 시에 같이 종속적으로 바뀐다는 점이 될 것이다.

 

아 그리고 여기서 컴포넌트의 이름을 TOP_TAB / Inactive로 수정해주면 된다!

 

같은 방식으로 TOP_TAB / Disabled 컴포넌트도 만들어준다.

 

 

우리가 이렇게 컴포넌트명을 규칙성을 갖게 한 이유는 뭘까?

 

이제 알게 된다!

 

일단 Bottom Navigation을 만들어서 이 세개의 컴포넌트를 넣어준다.

이름도 BUTTON 1 , 2 , 3 으로 수정했다.

 

그리고 이걸 또 복사해서 아래에 놓는다.

이렇게 Frame 17 컴포넌트(Bottom Navigaton bar)에 대한 인스턴스 컴포넌트를 생성했고,

 

아래의 프레임 인스턴스의 세 버튼들 중 버튼들을 선택해서 컴포넌트를 스와핑 할 수 있다.

무슨 말이냐면, 두 네비게이션 바 중에 아래 것의 BUTTON 2를 선택하여 오른쪽 Design 탭에서

Inactive를 active로 변경해주고, BUTTON 1은 같은방식으로 active에서 Inactive로 변경해주면 아래와 같은 결과를 볼 수 있다.

Component Swapping에 있어서, 컴포넌트의 이름을 슬래시 기준으로 맞춰주어야 스왑핑 할 수 있는 선택권이 부여된다.

 

TAP / A

TAP / B

이렇게 명칭을 지정하면 두 컴포넌트 간의 스와핑이 가능하지만

 

TAP / A

B

 

이렇게 하면 불가능하다.

 

컴포넌트 간 속성 스위칭은 이렇게 이름으로 그룹핑된다.

그렇기에 TAP / A, TAP / B 이런식으로 명칭을 부여한 것이다.

 

 

 

추가로 한가지 기능을 소개하자면,

위의 바텀 네비게이션의 프레임의 크기를 조절함에 따라 탭 버튼들도 유동적으로 크기가 조절되고 싶다면

각 탭 버튼들의 Constraints를 scale로 설정해준다.

가로를 늘여보았다.

BUTTON 1에 대해서 잘 동작하지 않을 경우,

BUTTON 1의 마스터 컴포넌트에 가서 모든 요소들을 Scale로 해주면 된다.

 

 

Constraints는 약간 안드로이드에서 layout_xxx 속성들 같다.

 

Constraints 기능을 통해 각 버튼들을 Scale로 맞춰주면, 프레임의 가로를 늘여도 버튼들이 따라옴을 볼 수 있다.

- Constraints( Adaptive Layout ) 기능 : 반응형 및 다양한 디바이스 환경을 고려하여 UI 에셋을 세팅할 수 있다.

 

 

 

참고

https://youtu.be/6e46VxYgcpI