컴포넌트와 그냥 복사·붙여넣기는 뭐가 다른가요?

복사한 요소는 각각 따로입니다. 컴포넌트는 원본 하나를 수정하면 모든 인스턴스가 동시에 바뀝니다. 버튼·카드처럼 반복되는 요소는 컴포넌트로 만들어야 수정이 편합니다.

Variant는 언제 쓰나요?

같은 컴포넌트의 다른 상태(버튼의 기본/호버/클릭, 카드의 일반/강조)를 표현할 때 씁니다. Variant끼리 전환을 연결하면 호버 효과나 토글 같은 인터랙션이 됩니다.

네. Property(속성)를 노출하면 됩니다. 텍스트·이미지·색상 속성을 만들어두면 같은 컴포넌트라도 인스턴스마다 다른 내용을 넣을 수 있습니다.

같은 디자인을 여러 곳에 쓴다면 컴포넌트(Component) 로 만드세요. 한 번 수정하면 모든 곳이 함께 바뀌어, 디자인 속도와 일관성이 크게 올라갑니다.

버튼·카드처럼 여러 번 쓸 요소를 선택합니다.

우클릭 → Create Component. 보라색 테두리로 컴포넌트가 됐음을 표시합니다.

이제 이 컴포넌트의 복사본(인스턴스)을 여러 개 배치할 수 있습니다. 원본을 수정하면 모든 인스턴스가 한 번에 바뀝니다.

같은 컴포넌트의 다른 상태를 정의합니다.

Variant끼리 전환을 연결하면 호버 효과·토글·아코디언 같은 인터랙션이 됩니다. (인터랙션 · 애니메이션 참고)

컴포넌트에 바꿀 수 있는 값을 노출합니다. 같은 컴포넌트라도 인스턴스마다 다른 내용을 넣을 수 있습니다.

잘 만든 컴포넌트 하나가 작업 속도를 몇 배로 올립니다. 버튼 · 카드 · 내비게이션(헤더) · 푸터부터 컴포넌트로 만드세요. 이 네 가지는 거의 모든 페이지에 반복됩니다.