<aside> 📎

참고 출처

1. Create and use components — Figma Learn — 메인 컴포넌트와 인스턴스, 오버라이드의 공식 설명 자료입니다.
2. Create and use variants — Figma Learn — 베리언트로 컴포넌트의 여러 상태를 하나로 묶어 관리하는 방법의 공식 근거입니다. </aside>

앞 실습에서 오토레이아웃으로 버튼·리스트·네비게이션 같은 구조를 만들었습니다. 그런데 같은 버튼을 수십 개 화면에 붙여놓았다면, 색을 한 번 바꿀 때마다 모든 화면을 일일이 고쳐야 할까요? 이번 레슨에서는 한 곳을 고치면 모든 곣이 바뀌는 컴포넌트와, 하나의 컴포넌트에 여러 상태를 담는 베리언트를 배웁니다. 이는 다음 레슨의 디자인 시스템과 shadcn/ui 키트 활용으로 이어지는 핵심 개념입니다.

컴포넌트와 베리언트

컴포넌트의 개념과 필요성

• 컴포넌트(Component)란?
  • 컴포넌트는 Figma에서 재사용 가능한 디자인 요소를 만드는 기능입니다. 버튼, 카드, 아이콘처럼 반복적으로 쓰이는 UI 요소를 컴포넌트로 만들면 한 곳에서 수정했을 때 모든 곣에 자동으로 반영됩니다.
  • 디자인 시스템의 일관성을 유지하고 작업 효율을 크게 높이는 핵심 기능입니다.
• 컴포넌트가 필요한 이유
  • 같은 버튼을 수십 개 화면에 배치한 상태에서 색이나 크기를 바꿔야 한다면, 컴포넌트 없이는 모든 화면을 일일이 고쳐야 합니다.
  • 컴포넌트를 쓰면 메인 컴포넌트 하나만 수정해도 연결된 모든 인스턴스가 업데이트되어, 시간을 절약하고 실수로 인한 불일치를 방지합니다.

메인 컴포넌트와 인스턴스

• 메인 컴포넌트(Main Component)
  • 원본 컴포넌트입니다. 요소를 선택하고 Cmd/Ctrl + Opt/Alt + K를 누르면 생성되며, 보라색 다이아몬드 아이콘으로 표시됩니다. 모든 복사본의 기준이 됩니다.
• 인스턴스(Instance)
  • 메인 컴포넌트의 복사본입니다. 복사하거나 Assets 패널에서 드래그하면 생성되며, 속이 빈 다이아몬드 아이콘으로 표시됩니다. 메인 컴포넌트의 변경은 모든 인스턴스에 반영됩니다.
• 인스턴스 오버라이드(Override)
  • 메인 컴포넌트의 기본 구조는 유지하면서 특정 속성만 변경하는 기능입니다. 예를 들어 '로그인' 버튼 인스턴스의 텍스트를 '회원가입'으로 바꿔도, 버튼의 크기·패딩 같은 구조는 메인 컴포넌트에 연결되어 일관성이 유지됩니다.

베리언트로 상태 관리하기

• 베리언트(Variants)의 개념

  • 하나의 컴포넌트 안에 여러 상태나 옵션을 묶어 관리하는 기능입니다. 예를 들어 버튼 컴포넌트에 Default, Hover, Pressed, Disabled 상태를 모두 포함시킬 수 있습니다.
  • 이전에는 각 상태를 별도 컴포넌트로 만들어야 했지만, 베리언트로 하나의 컴포넌트 세트로 통합 관리합니다.

• 베리언트 생성과 속성 구성

  • 관련된 컴포넌트들을 선택하고 우클릭해 'Combine as variants'를 선택하면 하나의 컴포넌트 세트가 생성됩니다.
  • 베리언트는 여러 속성(Property)의 조합으로 구성됩니다. 예: State(Default/Hover/Pressed) + Size(Small/Medium/Large) = 9개 조합. 속성명은 의미가 명확하고 일관된 네이밍을 따릅니다.

  

Property로 컴포넌트 제어하기