원본 Gist

• Apple's Human Interface Guidelines (HIG) - color (figma design) (opens in a new tab)

Figma에서 Apple Human Interface Guidelines 색상 구현하기

Figma 디자인 워크플로우 내에서 Apple의 HIG 색상 지침을 구현하기 위한 포괄적이고 실행 가능한 가이드입니다.

1. Figma 색상 시스템 설정

Apple 시스템 색상 라이브러리 생성

• 색상 스타일 구성: Figma 라이브러리를 "Apple HIG Colors"로 명명하고 System/Blue/100% 및 System/Blue/Dark Mode와 같이 계층적으로 이름을 지정합니다.
• 시맨틱 색상 변수: 라이트 및 다크 모드 변형이 포함된 모든 시맨틱 색상(label, secondaryLabel, systemBackground 등)에 대해 Figma에서 색상 변수를 설정합니다.
• 변수 컬렉션: Figma의 변수 컬렉션을 사용하여 디자인 검토 중에 한 번의 전환으로 라이트 및 다크 모드 팔레트 간에 전환합니다.
• 플러그인 통합: Figma에 "Apple Design Resources" 플러그인을 설치하여 공식 Apple 색상 값에 액세스하고 디자인의 정확성을 보장합니다.

환경 구성

• 외형 모드 프레임워크: 모드별 스타일 참조가 있는 공유 컴포넌트로 연결된 라이트 및 다크 모드 디자인을 위한 전용 프레임을 만듭니다.
• 디자인 시스템 문서화: 적절한 구현 예를 보여주는 전용 문서 페이지를 사용하여 Figma에서 직접 색상 사용 지침을 문서화합니다.
• 명암비 확인: Figma의 내장 명암비 검사기 또는 "Stark"와 같은 플러그인을 사용하여 디자인 과정에서 접근성 준수를 확인합니다.

2. 실용적인 Figma 구현

컴포넌트 수준 색상 적용

• 인터랙티브 컴포넌트: Figma의 변형 속성을 사용하여 각 상태에 적절한 색상 변화가 있는 상태 변형(기본, 누름, 포커스, 비활성화)을 만듭니다.
• 오토 레이아웃 색상 지정: 컴포넌트 크기 조정 시 유연성을 유지하기 위해 모양 대신 오토 레이아웃 컨테이너에 배경색을 적용합니다.
• 텍스트 스타일 통합: 일관성을 보장하기 위해 이미 시맨틱 색상 속성이 적용된 텍스트 스타일(Label/Regular, SecondaryLabel/Regular)을 만듭니다.
• 인터랙티브 프로토타입: Figma의 인터랙티브 컴포넌트와 스마트 애니메이트를 사용하여 프로토타입에서 상태 간 색상 전환을 시연합니다.

Figma의 동적 효과

• 생동감 시뮬레이션: 메뉴 및 오버레이에 대해 Apple의 머티리얼 시스템을 시뮬레이션하기 위해 감소된 불투명도 배경과 블러 효과가 있는 레이어 효과를 만듭니다.
• 고도 시스템: 다크 모드에서 미묘한 배경색 변화(높은 고도에 더 밝은 표면)를 사용하여 일관된 고도 시스템을 설정합니다.

3. 특정 UI 요소 색상 가이드라인

내비게이션 요소

• 탭 바: 선택/비선택 상태에 대한 변형이 있는 탭 바 컴포넌트를 만듭니다. 활성 탭에는 파란색(라이트 모드 #007AFF, 다크 모드 #0A84FF), 비활성 탭에는 30% 불투명도의 #8E8E93을 사용합니다.
• 내비게이션 바: 미묘한 배경 블러 효과(background-blur: 30px)와 약간의 반투명도(라이트 모드 92-96%, 다크 모드 86-90%)로 스타일을 지정합니다.

인터랙티브 컨트롤

• 버튼:
  • 기본: 라이트 모드 #007AFF, 다크 모드 #0A84FF
  • 보조: 라이트 모드 18% 불투명도 배경의 #8E8E93, 다크 모드 흰색 텍스트
  • 파괴적: 라이트 모드 #FF3B30, 다크 모드 #FF453A
  • 비활성화: 양쪽 모드에서 38% 불투명도의 #8E8E93
• 폼 필드:
  • 기본: 라이트 모드 #F2F2F7, 다크 모드 #1C1C1E
  • 활성: 배경에 10% 불투명도의 파란색 색조와 1px 파란색 테두리 추가
  • 오류: #FF3B30 색상의 테두리와 동일한 색상의 오류 텍스트
  • 플레이스홀더 텍스트: 양쪽 모드에서 60% 불투명도의 #8E8E93

콘텐츠 및 데이터 시각화

• 목록 및 테이블: 그룹 배경, 구분선, 선택된 셀에 대해 라이트/다크 모드별 특정 회색 및 파란색 값을 사용합니다.
• 차트 및 그래프: 기본 데이터에는 파란색, 보조 데이터에는 녹색, 보라색, 주황색을 사용하며 인접 요소 간에 최소 3:1의 명암비를 유지합니다.

4. 워크플로우 및 협업

• 효율성 팁: CMD+/ 단축키를 사용하고, 기능별로 스타일을 그룹화하며, 컴포넌트에 기본 색상을 설정하여 작업 속도를 높입니다.
• 고급 기술: 상호작용과 모드 전환에 모두 반응하는 동적 색상 변형을 만들고, 테마 전환 프로토타입을 구축합니다.
• 문서화: 팀 참조를 위해 올바른 색상 사용 패턴을 보여주는 인터랙티브 가이드라인을 만들고, 개발자 핸드오프를 위해 명시적인 CSS/Swift 색상 참조 값을 포함합니다.