[Figma] 컴포넌트 & 인스턴스

📌 컴포넌트 & 인스턴스

컴포넌트 : 두 번 이상 재사용될 UI Asset

인스턴스 : 재사용이 가능한 컴포넌트를 복제한 UI Asset

Local 컴포넌트, 인스턴스 

: 전 게시물에서 만들어놓은 버튼 Asset 스타일을 추후 재사용 하기 위한 Local 컴포넌트 생성하기

⭐ 컴포넌트를 수정하면 인스턴스도 함께 수정된다.

 

1️⃣ 컴포넌트 생성

컴포넌트 아이콘을 클릭하여 컴포넌트화 시키고, 컴포넌트를 잡고 Alt + 드래그를 하여 밑으로 복제한다.

 

2️⃣ 메인 컴포넌트 & 인스턴스

Layer 명 앞에 표시되는 아이콘으로 인스턴스 또는 컴포넌트 인지 구분 가능하다.

메인 컴포넌트으 경우, Asset 패널에서 Local Components 영역에 컴포넌트가 표시된다.

 

⚡ 미리 만들어놓은 아이콘 컴포넌트들으 이름은 "/" 기준으로 그룹화가 되어있다.

따라서 Asset 패널에서 그룹명 기준으로 나눠진다.

인스턴스의 Override

: 인스턴스 일부 속성을 변경할 수 있다.

 

1️⃣ 텍스트 변경

인스턴스의 텍스트를 변경하면, 메인 컴포넌트의 텍스트를 변경해도 인스턴스의 내용은 변경되지 않는다.

하지만 인스턴스의 텍스트 컬러는 메인과 동일(변경 하지 않은 속성) 하므로 메인 컴포넌트의 텍스트 색상을 수정하면 인스턴스의 텍스트 색상도 변경된다.

2️⃣ Reset all overrides

인스턴스의 속성을 변경했을 때, Reset all overrides라는 옵션이 생성된다.

선택 시 메인 컴포넌트와 동일한 스타일로 인스턴스의 스타일이 초기화 된다.

3️⃣ Push Overrides to main component

인스턴스의 속성을 메인 컴포넌트로 옮길 수 있다.

이 상태에서 메인 컴포넌트를 수정하면 인스턴스에도 영향을 준다.

 

Detach instance , Small 사이즈의 버튼 만들기

: 컴포넌트와의 연결을 해제할 수 있다. 

 

1️⃣ Detach instance

메인 컴포넌트와 연결을 해제하여 Layer 패널에 표시된다.

2️⃣ Small 사이즈의 버튼 인스턴스 생성

- 인스턴스 폰트 스타일을 Sm사이즈로(14px) 변경 후 , 이모티콘/라인/아이콘의 높이도 14px로 변경해준다.

- 버튼 크기를 32px로 고정하기 위하여 padding 값도 변경해준다.

- 버튼과 아이콘 사이의 간격을 절반(4px->2px) 으로 변경한다.

* 간격은 4px이 되어야 하지만 아이콘 사이에 라인을 추가해놨기 때문에 2px로 해야함

3️⃣ Small 사이즈의 버튼 컴포넌트 생성

단축키 Alt + Ctrl + K 사용 or 상단의 컴포넌트 아이콘 사용

 

4️⃣ 컴포넌트 이름 변경

버튼 컴포넌트의 이름을 "Button / @"로 그룹화하여 변경한다.

Button / Md  , Button / Sm

버튼 이름을 그룹화 하였으므로, 컴포넌트를 복제할 경우(Alt+드래그)

오른쪽 디자인 패널에서 Md->Sm으로 Swap 가능하다.

 

참고

https://www.youtube.com/@yeonjung-figma/videos