컴포넌트

디자인에서 컴포넌트란?

재사용 가능한 원본 템플릿 → 디자인 기준점

• 디자인에서 반복적으로 사용되는 요소를 하나의 형태로 묶어둔 것

• 하나 만들어두면 여러 곳에서 재사용됨

• 실무에선 모든 UI가 컴포넌트로 구성

• 수정하면 모든 인스턴스가 자동 반영

• 디자인시스템의 기본 단위

• 컴포넌트 설정 단축키: cmd + opt + k

인스턴스

컴포넌트를 복제해 사용하는 실제 UI

• 컴포넌트 원본과 연결되어 있음

• 일부 속성은 오버라이드 가능 (원본 컴포넌트는 영향 X)

• 원본이 변경되면 자동으로 반영됨

Override란?

• 인스턴스에서 일부 값만 변경하는 것

• 즉, 컴포넌트의 구조는 그대로 두고, 텍스트, 색상 등 일부 속성만 바꾸는 것

피그마	개발 예시
Component	<Button />
Instance	<Button />, <GhostButton /> , <IconButton />
Override	children
Variant	상태(props) - variants, size, disabled, pressed

베리언츠

컴포넌트의 여러 상태/종류를 정의하는 시스템

• 피그마에서 여러 상태의 컴포넌트를 한 세트로 묶어 관리할 수 있는 기능

• property 라는 개념으로 상태를 정의

  • Variant (primary / secondary)

  • Size (sm / md / lg)

  • State (hover / pressed / disabled)

  • Boolean (icon true / false)