Figma를 쓰다 보면 가장 많이 듣는 단어 중 하나가 ‘컴포넌트’예요.
그런데 이 컴포넌트를 복사하거나 화면 곳곳에 배치하다 보면
어느 순간 “이건 인스턴스라고 뜨는데 뭐가 다른 거지?”라는 의문이 생기죠.
사실 컴포넌트(Component)와 인스턴스(Instance)는
디자인 시스템을 효율적으로 관리하는 핵심 구조입니다.
이 두 개념을 제대로 이해하면
반복 작업은 줄이고, 수정은 한 번에, 협업은 더 빠르게 할 수 있어요.
컴포넌트(Component)란?
컴포넌트는 말 그대로 원본(마스터) 디자인이에요.
예를 들어 버튼 하나를 만들었다고 가정해볼게요.
이 버튼을 여러 화면에서 사용하고 싶다면, 복사-붙여넣기보다는 컴포넌트로 만들어 두는 게 좋습니다.
왜냐하면?
- 나중에 버튼 디자인이 바뀌었을 때 → 컴포넌트 원본만 수정하면
- 사용된 모든 인스턴스에 자동 반영되기 때문이죠.
만드는 방법:
버튼이나 요소를 선택하고 Cmd/Ctrl + Alt + K → 컴포넌트 생성 완료!
인스턴스(Instance)란?
컴포넌트의 인스턴스는 말 그대로 복사본이지만,
단순한 복붙이 아니라 연결된 복사본이라고 생각하면 돼요.
이 인스턴스는 컴포넌트 원본의 스타일, 구조, 위치 정보를 따라가고,
필요한 경우에는 부분적으로만 수정도 가능해요.
예를 들어:
- 버튼 텍스트만 바꾸고 싶을 땐 → 인스턴스에서 텍스트만 수정
- 버튼 색상/레이아웃 등은 원본에 맞춰 유지됨
둘의 차이, 요약하자면?
| 항목 | 컴포넌트 | 인스턴스 |
|---|---|---|
| 역할 | 원본 마스터 디자인 | 연결된 복사본 |
| 수정 범위 | 전체 구조 변경 가능 | 일부 내용만 변경 가능 |
| 위치 | 일반적으로 한 파일의 중앙에서 관리 | 여러 화면에 배치 |
| 관계 | 기준이 되는 요소 | 기준을 따르는 요소 |
실무에서 자주 겪는 상황을 정리해볼게요,
- 인스턴스를 편집하려고 하니까 막혀 있어요!
→ 기본 속성은 원본 기준이기 때문에 직접 수정이 제한됩니다.
해제하려면Detach instance기능 사용 (Cmd/Ctrl + Shift + B)
단, 이러면 원본과 연결이 끊기니 신중하게! - 버튼 전체를 바꾸고 싶은데, 일일이 다 수정해야 하나요?
→ 컴포넌트 원본을 수정하면 인스턴스가 자동 업데이트됩니다. - 텍스트만 바꿨는데도 전체 버튼 스타일이 깨졌어요!
→ 인스턴스에서 너무 많은 수정 시 원본과 구조가 충돌할 수 있어요.
꼭 필요한 부분만 수정하고, 전체 변경은 컴포넌트에서 하기!
최종적으로
컴포넌트와 인스턴스를 잘만 활용해도 반복되는 지긋지긋한 과정을 우리는 줄일수가 있답니다.
디자인 시스템이 더 강력해지고, 디자인 관리가 압도적으로 쉬워집니다.
처음에는 개념이 헷갈릴 수 있지만,
직접 만들어보고, 수정해보는 과정을 반복하다 보면
이 둘의 차이와 쓰임새가 몸에 익힐수 있어요!