[Figma : design system #3] Buttons부터 Modals까지, 컴포넌트 구성 총정리

 

 

Design System 구축에서 Foundation 단계(컬러, 타이포그래피, 간격 등 기본 요소)를 정의했다면, 다음으로 넘어갈 단계는 바로 Components(컴포넌트) 입니다. 이 단계는 실제 UI를 구성하는 구체적인 요소들을 만들고 관리하는 핵심 작업입니다.

 

목차

1	Figma : Design System #1 - 디자인 시스템 구축하는 이유, 구축 단계를 알아보자	✔️ 완료
2	Figma : Design System #2 - Foundation 구축, 시스템의 뿌리를 다지자	✔️ 완료
3	Figma : Design System #3 - UI 컴포넌트 설계, 재사용 가능한 구조 만들기	✔️ 완료
4	Figma : Design System #4 - 패턴과 사용자 흐름 정의하기	📌 예정
5	Figma : Design System #5 - 실무 적용: Figma → 코드까지 연결하기	📌 예정

 

Components 이란?

 

Foundation에서 정한 기본 규칙을 바탕으로 실제 사용자 인터페이스(UI)에서 반복적으로 사용되는 컴포넌트들을 설계하는 단계입니다. 디자인 시스템의 실질적인 무게 중심이 여기에 있습니다. 버튼, 인풋 같은 기본 컴포넌트부터 카드, 모달, 알림, 네비게이션 요소까지 반복 가능한 UI 요소들을 일관성 있고 재사용 가능한 방식으로 구축합니다.

 

Components 단계에서의 중요성

컴포넌트는 디자인 시스템의 핵심 단위입니다.
한 번 잘 만들어 놓으면, 페이지를 만들거나 수정할 때 일관된 품질을 유지하면서도 빠르게 작업할 수 있습니다.

• 📦 재사용 가능성 증가
• 🧩 일관성 유지
• 🧭 협업 효율성 향상
• 🚀 빠른 개발과 디자인 반복

---

주요 구성 요소

1. Buttons (버튼)

• 다양한 크기: 기본, 작은, 큰
• 다양한 스타일: 기본 버튼, 아이콘 포함 버튼, Outline 버튼 등
• 상태 정의: hover, active, disabled, loading 등
• 디자인 규칙: Foundation에서 정의한 색상과 타이포그래피 사용

🔧 Figma 실전 팁

• Variants 기능을 활용해 버튼 타입(기본/아웃라인 등)과 상태(Hover/Disabled 등)를 조합
• Properties 기능으로 아이콘 on/off 스위치 설정
• Text는 Auto layout으로 여백 자동 처리, 일관된 간격 유지

 

2. Form Elements (폼 요소)

• Input: 일반 텍스트, 비밀번호 필드 등
• Checkbox & Radio: 선택형 입력 컴포넌트
• Select Box: 드롭다운 UI
• Textarea: 여러 줄 입력

각 요소는 폰트 크기, 간격, 색상 등을 Foundation 규칙에 따라 구성합니다.

🔧 Figma 실전 팁

• 상태별 구성 (기본, Focus, Error 등)을 Variants로 관리
• Boolean Property로 Label 표시 여부 설정Icon 포함
• input은 Auto layout으로 아이콘 위치 제어

 

3. Cards, Modals, Alerts (카드, 모달, 알림)

• Card: 콘텐츠 그룹화
• Modal: 사용자와의 상호작용 창
• Alert: 피드백 제공용 알림 UI

공통점: 여백, 색상, 버튼 스타일 등은 모두 Foundation 기준을 따라야 합니다.

🔧 Figma 실전 팁

• 레이아웃은 Auto layout으로 내부 콘텐츠 유연하게 정렬
• 모달은 Frame으로 고정 크기 정의 + 오버레이 구성
• 버튼 포함시 Component Instance 사용해 공통 스타일 유지

 

4. Navigation Components (네비게이션)

• Header / Footer / Sidebar 구성
• Menu, Tab, Breadcrumbs 등 다양한 탐색 요소 포함

🔧 Figma 실전 팁

• 탭(Tab)은 Variants로 선택된 상태 관리
• 네비 바 구조는 Auto layout + Constraints 활용해 반응형처럼 구현
• 로고와 메뉴가 함께 있는 경우 Horizontal layout로 배치

 

5. Tables, Lists, Grids (데이터 컴포넌트)

• Table: 정형 데이터
• List: 아이템 나열
• Grid: 레이아웃 기반 배치

🔧 Figma 실전 팁

• Component로 행(Row)을 만들고 반복 배치
• 리스트 아이템에는 Padding, Spacing 일관되게 설정
• Table Header도 별도 컴포넌트화하여 재사용

 

6. Typography Components (텍스트 컴포넌트)

• Heading / Body / Caption 등 텍스트 유형 정의
• Foundation의 타이포그래피 기준 적용

🔧 Figma 실전 팁

• Heading, Subtitle, Body 등은 Text Style로 분류 관리
• 컴포넌트로 만들기보다는 Style Token으로 통일성 확보
• 중요 텍스트는 Semantic naming 사용 (예: Title/Large, Body/Small)

---

 

Components 다음 단계

다음은 Patterns 단계입니다. 여러 컴포넌트를 조합해서 실제 UI 흐름을 만드는 작업입니다.
예: 로그인 폼, 상품 카드 목록, 대시보드 섹션 구성 등

그리고 모든 과정을 체계적으로 문서화하는 Documentation 단계도 이어집니다.
→ 팀원들이 디자인 시스템을 올바르게 이해하고 사용할 수 있도록 가이드합니다.