데브허브 | DEVHUB | 14-Figma 아이콘 변경가능한 버튼 만들기(Instance Swap property)14-Figma 아이콘 변경가능한 버튼 만들기(Instance Swap property)
- 반복적인 버튼 생성은 비효율적이므로 피그마 컴포넌트를 활용해야 합니다. 🚫
- 컴포넌트는 재사용 가능한 구성 요소로, 한 번 정의하면 여러 곳에서 활용할 수 있는 마스터 템플릿과 같습니다. 🧱
- 요소를 선택하고 'Create Component'를 통해 컴포넌트를 생성하면 에셋 패널에서 관리됩니다. ✨
- 컴포넌트는 '타입'(메뉴판의 메뉴)이며, 인스턴스는 그 타입의 '실체화'(주문된 실제 음식)입니다. 🍽️
- 마스터 컴포넌트의 변경 사항은 모든 인스턴스에 자동으로 반영되어 일관성을 유지합니다. 🔄
- 컴포넌트 안에 다른 컴포넌트를 중첩하여 사용할 수 있습니다 (예: 버튼 컴포넌트 안의 아이콘 컴포넌트). 📦
- 'Instance Swap Property'는 부모 컴포넌트의 인스턴스 내에서 중첩된 인스턴스(예: 아이콘)를 쉽게 교체할 수 있게 합니다. ↔️
- 중첩된 인스턴스를 선택하고 'Create Instance Swap Property'를 정의하여 교체 가능한 변수를 선언합니다. 🏷️
- 정의된 Instance Swap Property를 통해 부모 컴포넌트의 인스턴스에서 드롭다운 메뉴로 중첩된 요소를 쉽게 변경할 수 있습니다. 🎨
- 이 워크플로우는 디자인 효율성, 일관성 유지, 그리고 여러 요소의 수정 시간을 크게 단축시킵니다. 🚀
- 다음 시간에는 버튼의 다양한 상태(예: 활성/비활성) 관리 방법에 대해 다룰 예정입니다. 💡