[Figma 초보 가이드] 5편. 컴포넌트? 인스턴스? 재사용 가능한 디자인 쉽게 만들기

[5편] 컴포넌트? 인스턴스? 재사용 가능한 디자인 쉽게 만들기

"버튼, 카드, 아이콘을 매번 새로 만들기 귀찮다!"
→ 그래서 컴포넌트(Component) 기능이 있어요.

---

✔️ 컴포넌트(Component)란?

디자인에서 반복해서 쓰는 요소를 한 번만 만들고 재사용할 수 있는 기능이에요.
예: 로그인 버튼, 헤더, 카드 UI 등

컴포넌트를 만들어두면 수정도 한 번에 끝나요!
원본만 수정하면, 모든 인스턴스(복제본)가 자동으로 바뀌어요.

---

✔️ 인스턴스(Instance)란?

컴포넌트로 만든 원본을 복사한 ‘사용본’이에요.
→ 원본을 바꾸면 인스턴스도 함께 바뀌어요.

단, 인스턴스는 일부 속성만 변경 가능

• 텍스트, 색상은 바꿀 수 있어요
• 크기나 구조는 원본과 연결돼 있어요

---

✔️ 컴포넌트 만드는 방법

1️⃣ 원하는 요소(예: 버튼)를 선택
2️⃣ 우클릭 → Create Component 선택
3️⃣ 컴포넌트가 생기면 보라색 다이아몬드 아이콘이 생겨요!

단축키: ⌥ + ⌘ + K (Mac) / Alt + Ctrl + K (Win)

---

✔️ 컴포넌트 사용하기

1️⃣ 만든 컴포넌트를 Assets 탭에서 확인
2️⃣ 드래그해서 원하는 위치에 배치 → 이게 인스턴스예요!

여러 페이지에서 반복되는 요소를 효율적으로 관리할 수 있어요.

 

---

✔️ 컴포넌트 활용 예시

• 버튼 시스템: Primary, Secondary 버튼 스타일을 만들어두고 상황별로 사용
• 네비게이션 바: 헤더/푸터 디자인을 컴포넌트로 만들어놓으면 유지보수가 쉬움
• 아이콘 세트: 동일한 형태의 아이콘 그룹도 컴포넌트화해서 관리

---

정리 요약

• 컴포넌트 = 디자인의 ‘원본 템플릿’
• 인스턴스 = 복제된 사용본, 일부 수정 가능
• 컴포넌트를 활용하면 반복 작업도, 수정도 편해짐!

---

다음 편 예고

[6편] 팀 프로젝트, 협업이 쉬워지는 공유 기능
→ 다른 사람과 실시간 협업하는 법, 링크 공유하는 방법까지 알려드릴게요!