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

피그마(Figma)에서 효율적인 UI 작업을 위해 반드시 알아야 하는 개념이 바로 **컴포넌트(Component)**와 **인스턴스(Instance)**입니다. 이 두 개념만 제대로 이해해도 디자인 재사용성과 유지보수 효율이 크게 올라갑니다.
아래에서는 가장 핵심적인 기능과 단축키만 골라 간단하게 정리해보았습니다.

 

1. 컴포넌트(Component)란?

컴포넌트는 일종의 원본(Template) 요소입니다.
버튼, 카드, 입력창 등 반복해 사용하는 UI 요소를 컴포넌트로 만들어두면, 이후 여러 화면에서 동일한 디자인을 다시 사용할 수 있습니다.

컴포넌트 만들기

• Ctrl + Alt + K
  선택한 요소가 바로 컴포넌트로 변환됩니다.

레이어 패널에서도 컴포넌트는 ◇ 모양 아이콘으로 표시되어 쉽게 구분할 수 있습니다.

 

2. 인스턴스(Instance)란?

인스턴스는 컴포넌트의 복제본(Clone) 이라고 생각하면 됩니다.
컴포넌트의 디자인과 속성을 그대로 가져오지만, 원본(컴포넌트)이 수정되면 인스턴스도 자동으로 업데이트되는 구조입니다.

인스턴스 생성 방법

• Alt + 드래그
  컴포넌트를 Alt 키를 누른 채 드래그하면 즉시 인스턴스가 생성됩니다.

이미지처럼 레이어 패널에서는 컴포넌트 아래에 여러 인스턴스가 생성되어 구조적으로 정리된 모습을 확인할 수 있습니다.

 

 

 

3. 인스턴스 오버라이드(Override)

인스턴스는 원래 컴포넌트를 따라가지만, 일부 속성은 인스턴스마다 따로 변경할 수 있습니다.
예를 들어 인스턴스의 텍스트, 색상, 크기 등을 변경하면 그것이 오버라이드(Override) 로 기록됩니다.

오버라이드 특징

• 인스턴스에서 변경한 값은 컴포넌트 수정 시 자동으로 덮어쓰지 않음
• 즉, “이 요소는 원본과 달라도 된다”라는 의미
• 텍스트, 색상, 오토레이아웃 값 등 다양한 속성 변경 가능

UI 시스템을 만들 때 매우 강력한 기능이며,
버튼 라벨만 다른 여러 화면에 동일 컴포넌트를 쓰는 상황에 특히 유용합니다.

 

 

4. 인스턴스를 다시 일반 요소로 분리하기

가끔 인스턴스를 컴포넌트 기능 없이 ‘일반 프레임/객체’로 사용하고 싶을 때가 있습니다.
이런 경우 인스턴스 분리 기능을 사용합니다.

인스턴스 분리

• 메뉴 → 인스턴스 분리(Detach Instance)
• 혹은 우클릭 메뉴에서 선택 가능

분리된 객체는 더 이상 컴포넌트와 연결되지 않으며, 독립적인 요소가 됩니다.

 

 

 

정리하면

 

피그마의 컴포넌트 기능은 디자인 시스템의 핵심이자, 협업 환경에서 가장 강력한 기능입니다.
오늘 다룬 기능을 요약하면 다음과 같습니다:

• Ctrl + Alt + K → 컴포넌트 만들기
• Alt + 드래그 → 인스턴스 생성
• 인스턴스 오버라이드 → 각 화면에 맞게 인스턴스 속성만 변경 가능
• 인스턴스 분리 → 컴포넌트 기능을 제거하고 독립 요소로 사용

이 네 가지 기능만 익히면, 피그마 작업 속도와 유지보수 효율이 크게 향상됩니다.