[디자인부트캠프] DAY 18 | 피그마 심화_디자인 시스템

 DAY 18 | 피그마 심화_디자인 시스템

 

 

 

1. 디자인 시스템 정의
   • 디자인 시스템은 일관성을 유지하며, 코드와 디자인의 규칙을 정의합니다.
   • 예시: Google Material Design, Apple Human Interface Guidelines.
2. 디자인 시스템의 필요성
   • 일관성 유지: 여러 디자이너가 참여해도 일관된 스타일을 유지할 수 있습니다.
   • 협업 강화: 개발자 및 기획자와의 소통이 쉬워집니다.
   • 유지보수 효율화: 한번의 수정으로 전체 시스템에 반영 가능해집니다.
3. 디자인 시스템 vs 스타일 가이드
   • 디자인 시스템: 기능적 요소(컴포넌트, 인터랙션) 포함.
   • 스타일 가이드: 색상, 폰트 등의 시각적 요소에 집중.
4. 컬러 시스템 (Color System)
   • 브랜드 컬러, 상태 색상(예: 오류, 성공, 경고 등), 색상 팔레트를 정의합니다.
5. 타이포그래피 시스템 (Typography System)
   • 제목, 부제목, 본문, 캡션 등 텍스트 스타일을 정의하고, 각 텍스트에 대한 크기와 간격 설정.
6. 컴포넌트 라이브러리 (Component Library)
   • 버튼, 입력 필드, 카드 등 재사용 가능한 UI 요소들을 정의합니다.
7. 아이콘 및 이미지 스타일 (Iconography & Imagery Style)
   • 아이콘의 크기, 두께, 스타일을 정의하고, 일관된 이미지 스타일을 설정합니다.

 

google material design

 

• 컴포넌트(Component):
  • UI 디자인에서 자주 사용되는 요소들을 재사용 가능한 형태로 디자인하는 것이 컴포넌트입니다. 예를 들어 버튼, 입력 필드, 카드, 네비게이션 바 등이 이에 해당합니다. 이러한 컴포넌트는 일관성을 유지하는 데 중요한 역할을 합니다.
• 컴포넌트 인스턴스(Instance):
  • 컴포넌트 인스턴스는 기존에 정의된 컴포넌트를 사용하는 실질적인 예시입니다. 컴포넌트를 다양한 버전으로 변형할 수 있으며, 예를 들어 버튼의 기본 상태, 호버 상태, 비활성화 상태 등을 관리할 수 있습니다.
• 아이콘 스타일:
  • 아이콘의 크기는 일정하게(예: 16px, 24px) 설정하고, 아이콘의 두께(Thin, Regular, Bold)도 일관되게 유지해야 합니다. 이때 아이콘은 전체 디자인 시스템과 일관되도록 설정해야 합니다.
• 이미지 스타일 가이드:
  • 이미지 스타일 가이드는 프로필 이미지, 썸네일, 배경 이미지 등을 포함하며, 각 이미지의 크기와 배경 처리, 라운드 처리, 그래픽 효과 등을 일정하게 유지하는 것을 목표로 합니다.

스타일 가이드 예시