원본 Gist
Apple HIG: Figma에서 레이아웃 및 간격 구현
이 가이드에서는 Apple의 인간 인터페이스 가이드라인(HIG)에 따라 Figma에서 레이아웃 및 간격을 구현하는 방법을 설명합니다. 핵심 원칙, 레이아웃 시스템, Figma 관련 도구 및 모범 사례를 다룹니다.
Figma 구현의 핵심 원칙
명확성 및 계층 구조 설정
- Figma 라이브러리 생성: 구성 요소 계층(기본, 보조, 삼차)을 위해 라이브러리를 만듭니다.
- 자동 레이아웃 가중치 속성 사용: 비례적 크기 조정을 통해 시각적 계층을 설정합니다.
- Figma의 레이아웃 그리드 적용: 8pt 증가의 그리드를 사용하여 일관된 음의 공간을 만듭니다.
- Z-패턴 프레임 설정: 자연스러운 읽기 흐름을 위해 Figma의 정렬 도구를 사용합니다.
- 인터랙티브 구성 요소 구성: 명확한 상태 계층(기본, 호버, 누름)으로 구성 요소를 설정합니다.
적응형 레이아웃 구축
- 장치 사전 설정 생성: 모든 Apple 장치에 대해 정확한 치수의 사전 설정을 만듭니다.
- 반응형 변형 구성: 장치 클래스, 방향 및 플랫폼별 레이아웃에 대한 변형을 구성합니다.
- 자동 레이아웃 제약 조건 설정: 크기 조정 동작에 반응하는 제약 조건을 설정합니다.
- 스마트 애니메이트 사용: 레이아웃 상태 간의 전환을 시각화합니다.
일관성 유지
- Figma 변수 생성: 시스템 정의 간격 토큰, 플랫폼별 치수 등에 대한 변수를 만듭니다.
- 구성 요소 속성 구축: 일관된 간격 구성을 위해 속성을 구축합니다.
- 스타일 가이드 페이지 설정: 간격 예제 및 사용 규칙이 포함된 페이지를 설정합니다.
- 구성 요소 교체 활용: 플랫폼별 인터페이스 요소를 위해 교체를 활용합니다.
Figma의 레이아웃 시스템
8포인트 그리드 구현
- 레이아웃 그리드 설정 구성: 8px 크기의 사각형 그리드를 설정합니다.
- 기본 구성 요소 간격 생성: 8, 16, 24, 32, 40, 48, 56, 64pt의 간격 구성 요소를 정의합니다.
- 자동 레이아웃 사전 설정 설정: 표준 패딩(16px) 및 간격(8px)을 설정합니다.
정렬 프레임워크 설정
- 텍스트 스타일 구성: 적절한 정렬 속성으로 텍스트 스타일을 구성합니다.
- 광학 정렬 구성 요소 생성: 광학적으로 중앙에 맞춰진 아이콘을 만듭니다.
안전 영역 및 레이아웃 여백
- 장치 프레임 구성 요소 생성: 안전 영역이 표시된 구성 요소를 만듭니다.
- 레이아웃 여백 프레임 설정: 휴대폰용 16pt, 태블릿용 20pt 여백 프레임을 설정합니다.
- 안전 영역 시각화 도구 설계: 탭 영역을 보여주는 인터랙티브 구성 요소를 설계합니다.
공간 레이아웃 (visionOS)
- 3D 프레임 근사치 생성: 여러 프레임과 효과를 사용하여 3D를 근사합니다.
- 깊이 평면 구성 요소 설계: 다양한 깊이 수준에 대한 구성 요소를 설계합니다.
- 공간 테스트를 위한 인터랙티브 프로토타입 설정: 깊이 평면 간의 전환을 설정합니다.
Figma 관련 간격 도구
자동 레이아웃 구성
- 기본 프레임 구성 요소 생성: 표준 자동 레이아웃 설정으로 구성 요소를 만듭니다.
- Space-Between 속성 사용: 콘텐츠를 균등하게 배포합니다.
- Fill-Container 적용: 적응형 너비 요소를 위해 적용합니다.
- Hug-Content 설정: 텍스트 및 입력 필드용 구성 요소를 설정합니다.
인터랙티브 간격 구성 요소
- 간격 토큰을 구성 요소로 구축: 각 간격 값의 시각적 표현을 만듭니다.
- 데모 구성 요소 생성: 올바른/잘못된 간격을 보여주는 구성 요소를 만듭니다.
- 인터랙티브 리사이저 설계: 장치 간 레이아웃 동작을 테스트합니다.
여백 및 패딩 사전 설정
- 컨테이너 구성 요소 구성: 표준 화면 가장자리 여백으로 구성 요소를 구성합니다.
- 요소 간격 사전 설정 설정: 버튼 행, 양식 레이아웃 등에 대한 사전 설정을 만듭니다.
간격 라이브러리 및 변수
- 간격을 위한 Figma 변수 생성:
spacing.xxs(4pt)부터spacing.xxl(48pt)까지 변수를 만듭니다. - 다양한 장치 클래스에 대한 변수 모드 설정.
- 일관성을 위해 구성 요소 속성에 변수 적용.
Apple HIG를 위한 구성 요소 라이브러리
목록 및 표 구성 요소
- 기본 목록 구성 요소 생성: 표준 셀(44pt), 부제 셀(60pt) 등을 만듭니다.
- 목록 구성 요소 속성 구성: 구분선 가시성, 스타일 등을 구성합니다.
- 셀 간격 사전 설정 설정: 선행/후행 콘텐츠 인셋(16pt) 등을 설정합니다.
양식 및 입력 필드
- 양식 구성 요소 시스템 설계: 텍스트 필드(44pt 높이), 필드 레이블 등을 설계합니다.
- 양식 레이아웃 프레임 생성: 필드 간 간격(16pt), 섹션 간격(32pt) 등을 생성합니다.
- 입력 구성 요소 상태 구성: 기본, 포커스, 오류, 비활성화 상태를 구성합니다.
모달 및 시트 라이브러리
- 모달 구성 요소 시스템 구축: 시트 컨테이너, 경고 제목 등을 구축합니다.
- 시트 변형 생성: 전체 화면, 절반 높이 등의 시트 변형을 만듭니다.
- 인터랙티브 전환 설정: 모달 표시 애니메이션, 해제 동작 등을 설정합니다.
탐색 구성 요소
- 탭 바 시스템 설계: 컨테이너(49pt 높이), 탭 항목 등을 설계합니다.
- 탐색 바 라이브러리 생성: 컨테이너(44pt 높이), 제목 등을 생성합니다.
- 사이드바 탐색 구축: 확장/축소된 컨테이너, 목록 행 등을 구축합니다.
Figma 구현 모범 사례
동적 유형 설정
- 텍스트 스타일 시스템 생성: 모든 11가지 동적 유형 크기에 대한 변형을 만듭니다.
- 레이아웃 종속성 구성: 자동 레이아웃 간격을 텍스트 스타일에 연결합니다.
- 접근성 텍스트 크기 조정을 위한 테스트 템플릿 구축.
다중 장치 디자인 시스템
- 장치 사전 설정 프레임 생성: 모든 현재 iPhone, iPad 모델 및 Vision Pro 인터페이스용.
- 적응형 구성 요소 설정: 소형/일반 너비에 대한 변형 속성을 설정합니다.
- 레이아웃 전환 지점 구성: 구성 요소 속성에서 중단점 동작을 정의합니다.
라이브러리 구성
- 디자인 시스템 파일 구조화: 핵심 간격 구성 요소, 타이포그래피, UI 구성 요소 등으로.
- 문서 유지: Apple의 HIG 문서에 연결하고 사용 예제를 포함합니다.
협업 및 핸드오프
- 개발자 친화적인 구성 요소 구성: 구성 요소에 간격 주석을 포함합니다.
- 검사 문서 생성: 패딩 및 여백 측정값을 표시합니다.
- 인터랙티브 사양 설정: 프로토타입에서 치수를 표시/숨깁니다.
플랫폼별 디자인 시스템
iOS 구성 요소 라이브러리
- iOS 관련 템플릿 생성: 하단 탭 바, iOS 표준 상태 표시줄 등을 포함합니다.
- iOS 간격 표준 구성: 양식 시트 패딩(16pt), 목록 행 높이(44pt) 등을 구성합니다.
iPadOS 적응
- iPadOS 구성 요소 변형 구축: 사이드바 탐색, 다중 열 레이아웃 등을 구축합니다.
- 더 큰 화면을 위한 디자인: 콘텐츠 밀도를 높이고 더 큰 디스플레이 영역에 맞게 간격을 조정합니다.
visionOS 인터페이스 요소
- 공간 인터페이스 구성 요소 생성: 깊이를 인식하는 프레임, 유리 재질 등을 생성합니다.
- 3D 사용자 인터페이스 메타포 구축: 계층화된 정보 아키텍처, 깊이 단서 등을 구축합니다.
Figma 관련 프로덕션 워크플로
디자인 사양 생성
- 개발자 핸드오프를 위한 검사 설정 구성.
- 주석 구성 요소 생성: 정확한 간격을 보여주는 치수 마커.
내보내기 및 자산 제작
- 내보내기 설정 구성: @1x, @2x, @3x 리소스 및 사용자 정의 SVG 내보내기.
- 구성 요소별 내보내기 사전 설정 설정.
버전 관리 및 업데이트
- Figma 파일 변형에 대한 분기 전략 수립.
- iOS/iPadOS 버전을 기반으로 HIG 구현 문서화.
디자인 QA 프로세스
- 테스트 템플릿 생성: 레이아웃 무결성, 동적 유형 크기 테스트 등.
- 비교 화면 구축: 디자인 준수 여부를 보여주는 화면.