[TIL][03.26] 컴포넌트, 인스턴스, 배리언트, 인터랙션, 플로우 차트

컴포넌트

• 재사용 가능한 디자인 요소
• 버튼, 네비게이션 바 등 반복적으로 사용되는 UI 요소를 컴포넌트로 생성 가능
• 원본 컴포넌트를 수정하면 모든 인스턴스에도 자동 반영됨
• Ctrl + Alt + K

인스턴스

• 컴포넌트의 복사본(자식 요소)으로 원본과 연동됨
• 원본 컴포넌트의 변경 사항이 인스턴스에 자동 적용됨
• Detach러 인스턴스와 원본 컴포넌트의 연동을 끊을 수 있음 >> 더 이상 원본 컴포넌트의 변경이 적용되지 않음

배리언트 (Variant)

• 컴포넌트의 다양한 상태를 관리하는 기능
• 버튼(기본/호버/비활성화)이나 아이콘(활성/비활성) 같은 상태를 한 곳에서 관리 가능
• Properties에서 다양한 속성을 추가해 쉽게 변경 가능

인터랙션 (Interaction)

• 사용자 인터랙션(클릭, 호버 등)에 따른 동작을 설정하는 기능
• Prototype 탭에서 이벤트(탭, 드래그, 호버 등)와 애니메이션(페이드, 슬라이드 등) 설정 가능
• 버튼 클릭 시 페이지 이동, 호버 시 색상 변경 등 다양한 동작 추가 가능

디자인 시스템 실습 - 플로우 차트

주제 : 맥도날드 키오스크 UI/UX 개선