컴포넌트와 재사용 — 디자인 시스템의 핵심 단위

컴포넌트란?

컴포넌트는 Figma에서 재사용 가능한 UI 요소를 만드는 방법입니다. React의 컴포넌트와 같은 개념으로, 하나의 Main Component(원본)를 수정하면 해당 컴포넌트를 사용하는 모든 Instance(복사본)에 즉시 반영됩니다.

구분	Main Component	Instance
아이콘	보라색 다이아몬드 4개	하늘색 다이아몬드 4개
수정 권한	구조, 스타일 모두 수정 가능	오버라이드만 가능
역할	원본 정의 (숨겨두는 게 일반적)	실제 화면에 배치
위치	별도 페이지 "Components"에 모아둠	각 화면 페이지에 배치

컴포넌트 생성 방법

방법 1: 단축키
요소 선택 → Ctrl+Alt+K

방법 2: 마우스
요소 우클릭 → Create Component

방법 3: 여러 요소를 하나의 컴포넌트로
여러 요소 선택 → Ctrl+Alt+K → 오토 레이아웃 포함 컴포넌트 생성

Instance 복제:
Main Component 선택 → Alt+드래그 → Instance 생성
또는 Assets 패널(Ctrl+Alt+O) → 컴포넌트 드래그 앤 드롭

Instance 오버라이드

컴포넌트에서 자유롭게 변경할 수 있는 속성:

텍스트: 더블클릭 후 내용 수정 (Main에 영향 없음)
색상: Fill/Stroke 개별 변경 가능
크기: 너비/높이 개별 조절 가능
이미지: 이미지 Fill 교체 가능
아이콘: 내부 아이콘 Swap 가능 (Props 설정 시)

오버라이드 초기화:
Instance 우클릭 → Reset All Overrides
→ Main Component 상태로 되돌아감

Main 이동:
Instance 선택 → 오른쪽 패널 상단 Main Component 썸네일 클릭
→ Main Component 위치로 즉시 이동

Component Properties (Props)

Figma의 컴포넌트 Props를 활용하면 Instance마다 다른 상태/내용을 패널에서 쉽게 바꿀 수 있습니다.

Props 종류:

1. Text Property
Main Component에서 텍스트 선택 → 오른쪽 패널 Content 섹션 "+" → Text
결과: Instance 패널에서 텍스트 직접 수정 가능

2. Boolean Property (표시/숨김)
Main Component의 레이어 선택 → Properties "+" → Boolean
결과: Instance 패널에서 체크박스로 요소 ON/OFF

3. Instance Swap Property
아이콘 자리 선택 → Properties "+" → Instance Swap
결과: Instance 패널 드롭다운으로 아이콘 교체

4. Variant (다음 강에서 상세 다룸)
같은 컴포넌트의 여러 상태(Primary/Secondary, Hover/Pressed)

실습 — 버튼 컴포넌트 3종 세트

Step 1: Primary 버튼 만들기
텍스트 "버튼" 생성 → Shift+A (오토 레이아웃)
Padding: 상하 12, 좌우 24 / Gap: 8
Fill: #6366f1 / Corner Radius: 12
Ctrl+Alt+K → Main Component 완성
이름: "Button/Primary"

Step 2: Text Property 추가
텍스트 레이어 선택 → 오른쪽 패널 "+" → Text Property
이름: "label", 기본값: "버튼"
결과: Instance에서 레이블 패널 수정 가능

Step 3: Secondary 버튼 만들기
Button/Primary Instance 복제 → 색상 변경
Fill: transparent, Stroke: #6366f1 1px, 텍스트 색: #6366f1
우클릭 → Create Component → "Button/Secondary"

Step 4: 카드 컴포넌트 만들기
F 320x200 → Shift+A (Vertical)
썸네일 영역 (160px 높이, Fill: #e2e8f0)
텍스트 영역 Padding: 16, Gap: 8
제목(16px Bold) + 설명(14px Regular)
Ctrl+Alt+K → "Card/Default"

Step 5: 실제 화면에 배치
Assets 패널 → Button/Primary 3개 드래그
각각 레이블 오버라이드: "로그인" / "회원가입" / "더 보기"
Main에서 색상 변경 → 3개 Instance 모두 즉시 반영 확인

관련 검색어  ·  피그마 컴포넌트, Figma Component Instance, 피그마 Main Component, 피그마 오버라이드, Figma Component Props, 피그마 디자인 시스템, 피그마 재사용