<aside> 📎

참고 출처

1. Create and use variants — Figma Learn — 이 실습에서 제작하는 버튼 베리언트 구성의 공식 근거입니다. </aside>

앞 이론 레슨에서 컴포넌트·인스턴스·베리언트·Property를 배웠습니다. 이번 실습에서는 그 개념을 합쳍 한 프로젝트에서 자주 쓰이는 핵심 UI 컴포넌트를 직접 만들고 베리언트로 상태를 관리해 봅니다. 여기서 만든 컴포넌트들은 다음 레슨의 디자인 시스템으로 정리되고, 결국 MVP 개발에서 shadcn/ui 코드 컴포넌트와 대응됩니다.

실습: 컴포넌트 시스템 구축하기

실습 목표와 산출물

• 실습 목표
  • 핵심 UI 컴포넌트(버튼·입력 필드·카드)를 직접 제작하고 오토레이아웃을 적용합니다.
  • 버튼에 베리언트(State·Size)를 구성해 상태를 하나의 세트로 관리합니다.
• 최종 산출물
  • 베리언트를 적용한 버튼 컴포넌트 세트 1종
  • 입력 필드 컴포넌트 1종
  • 위 컴포넌트를 조합한 할 일 카드 컴포넌트 1종

Step 1. 버튼 컴포넌트 만들기

• 앞 실습에서 만든 버튼(오토레이아웃 적용)을 메인 컴포넌트로 만듭니다.
  • 버튼을 선택하고 Cmd/Ctrl + Opt/Alt + K로 메인 컴포넌트로 만듭니다.
  • 색·텍스트를 바꿔 Primary·Secondary 두 종류를 준비합니다.

Step 2. 베리언트 구성하기

• 버튼의 상태와 크기를 베리언트로 묶습니다.
  • State 속성: Default, Hover, Disabled
  • Size 속성: Small, Medium, Large
  • 관련 버튼들을 선택하고 'Combine as variants'로 하나의 세트로 묶습니다.
  • 우측 패널의 Variants 섹션에서 속성명과 값을 명확히 정의합니다.
• 점검 질문: 인스턴스를 배치했을 때 우측 패널에서 State·Size를 드롭다운으로 전환할 수 있는가?

Step 3. 입력 필드와 Boolean Property

• 입력 필드 컴포넌트를 만들고 아이콘 표시 여부를 Boolean Property로 제어합니다.
  • 라벨 + 입력창 구조를 오토레이아웃으로 만듭니다.
  • 아이콘 레이어를 선택하고 Has icon Boolean Property를 추가해, true일 때만 아이콘이 보이도록 설정합니다.

Step 4. 카드 컴포넌트로 조합하기

• 앞서 만든 버튼·입력 필드를 조합해 할 일 카드 컴포넌트를 만듭니다.
  • 카드 전체는 Vertical 오토레이아웃으로 제목·설명·버튼을 쌓습니다.
  • 버튼은 앞서 만든 버튼 컴포넌트의 인스턴스를 배치하고, 텍스트만 오버라이드합니다.
  • 메인 버튼 컴포넌트의 색을 바꿔 카드 안의 버튼도 함께 바뀌는지 확인합니다.