Figma - 디자인 시스템(Design System) 개인 실습

디자인시스템(가이드라인) 결과물

• Figma를 활용하여 현업 디자이너의 역량을 습득하기 위해 개인 독학으로 디자인 시스템 학습을 통해 UI/UX 디자인의 일관성을 유지하고, 효율적으로 디자인을 개발하는 데 필요한 다양한 요소들을 체계적으로 정리하는 방법을 익히기 위한 목적으로 학습하였습니다.
  (역량 습득 훈련을 위한 목적으로 제작하였습니다.)

1. Button Form (버튼 폼)

색 버튼

제품에서 주로 활용하는 메인 버튼으로 중요한 행동을 결정합니다. 각 상태에 따라 버튼의 시각적 변화가 달라집니다.

• Default: 색 버튼의 기본 상태입니다.
• Active: 사용자가 버튼을 누르고 있는 상태입니다.
• Hover: 마우스를 색 버튼 위에 올려놓았을 때의 상태입니다.
• Disabled: 사용자가 버튼을 누를 수 없는 비활성 상태입니다.

테두리 버튼

보조적인 행동을 위한 버튼으로, 메인 버튼과는 구분되도록 테두리만 표시된 스타일입니다.

• Default: 테두리 버튼의 기본 상태입니다.
• Active: 사용자가 버튼을 누르고 있는 상태입니다.
• Hover: 마우스를 버튼 위에 올려놓았을 때의 상태입니다.
• Disabled: 사용자가 버튼을 누를 수 없는 비활성 상태입니다.

2. Navigation Bar Form (네비게이션 바 폼)

네비게이션 바

주요 페이지 간 이동을 용이하게 해주는 하단 고정형 네비게이션 바입니다. 사용자가 현재 위치를 쉽게 파악할 수 있도록 하고, 자주 사용하는 기능들을 빠르게 접근할 수 있도록 설계되었습니다. 아이콘과 텍스트를 사용해 사용자 경험을 직관적으로 제공합니다.

3. Icon Form (아이콘 폼)

아이콘

모바일 환경에 최적화된 아이콘들을 사용하여 직관적인 이해를 돕고, 각 아이콘마다 페이지의 성격을 시각적으로 나타냅니다. 이를 통해 사용자가 앱 내에서 빠르게 네비게이션할 수 있습니다. 각 아이콘은 주요 기능을 명확하게 표현하도록 디자인되었습니다.

4. Color Form (컬러 폼)

색상

프로젝트에서 사용되는 Primary 색상들입니다. 색상은 UI의 전체적인 분위기를 설정하고, 중요한 요소나 액션을 강조하기 위해 사용됩니다.

• Primary Blue (#007AFF): 주된 색상으로, 주요 액션을 나타낼 때 사용됩니다.
• Secondary Blue (#1F3DFF, #B5D0FF): 보조 색상으로 사용되며, UI의 다양한 요소에 적용됩니다.
• Gray (#CCCCCC): 비활성화된 상태나 보조적인 정보에 사용됩니다.
• Accent Red (#FF3636): 중요한 경고나 알림을 강조할 때 사용됩니다.

5. Typography Form (타이포그래피 폼)

타이포그래피

프로젝트에서 사용되는 타이포그래피입니다. 정보의 중요도에 따라 다양한 스타일을 사용하여 사용자에게 정보의 계층을 전달합니다.

• Pretendard 폰트를 사용하며, Bold, Medium, Regular로 구분되어 정보의 중요도에 따라 다르게 적용됩니다.
• 각 헤더와 본문 폰트 크기는 다음과 같습니다:
  • H1 (32pt): 페이지의 주요 제목을 나타냅니다.
  • H2 (24pt): 섹션의 제목을 나타냅니다.
  • H3 (20pt): 하위 섹션 제목입니다.
  • H4 (18pt): 소제목을 나타냅니다.
  • H5 (16pt): 세부적인 소제목입니다.
  • H6 (14pt): 부가적인 소제목을 나타냅니다.
  • Body Text (16pt): 일반적인 본문 텍스트에 사용됩니다.
  • Caption (12pt): 이미지나 보조적인 설명에 사용됩니다.