원본 Gist
SF Pro Text를 Figma에서 올바르게 사용하는 방법
Apple의 시스템 폰트인 SF Pro Text를 Figma에서 올바르게 사용하기 위한 가이드입니다. Apple의 Human Interface Guidelines (HIG)를 준수하여 정확한 타이포그래피를 구현하는 데 중점을 둡니다.
SF Pro Text란?
SF Pro Text는 19pt 이하의 작은 텍스트 크기에 최적화된 Apple의 공식 시스템 폰트입니다. iOS, macOS 등 Apple 플랫폼 전반에서 높은 가독성과 디자인 일관성을 제공하는 것을 목표로 합니다.
설치 방법
- 폰트 다운로드: Apple 개발자 사이트에서 SF Pro 폰트 패키지를 다운로드합니다. (Apple Developer 계정 필요)
- 시스템 설치: 다운로드한 폰트를 컴퓨터에 설치합니다.
- Figma 적용:
- 데스크톱 앱: 앱을 재시작하면 로컬에 설치된 폰트가 자동으로 인식됩니다.
- 웹 브라우저: Figma의 Font Helper를 설치해야 로컬 폰트를 사용할 수 있습니다.
스타일 및 이름 규칙
Figma에서 SF Pro Text는 다음과 같은 다양한 두께와 스타일로 제공됩니다.
- Regular
- Medium
- Semibold
- Bold
- 각 두께의 Italic 스타일 (예:
SF Pro Text Semibold Italic)
중요: 플러그인 호환성 및 정확한 디자인 적용을 위해 "Semi Bold"가 아닌 "Semibold"와 같이 폰트 파일에 명시된 정확한 스타일 이름을 사용하는 것이 매우 중요합니다.
주요 사용 지침
- 크기 기준: UI 내의 모든 텍스트 중 19pt 이하인 경우에 사용합니다. 20pt 이상의 큰 제목이나 텍스트에는 SF Pro Display 폰트를 사용해야 합니다.
- Dynamic Type: Apple의 Dynamic Type 크기에 맞춰 미리 제작된 Figma 커뮤니티 파일을 활용하면 편리합니다.
- 줄 간격 (Line Height): 가독성을 위해 폰트 크기의 120%–145% 사이로 설정하는 것을 권장합니다.
- 글자 간격 (Letter Spacing): Apple의 가이드라인에 따라 텍스트 크기별로 글자 간격을 미세 조정해야 합니다. 관련 플러그인이나 UI 키트가 도움이 될 수 있습니다.
모범 사례
- 디자인 유연성을 위해 모든 두께와 이탤릭 스타일을 설치하세요.
- 폰트나 두께를 변경할 때 정확한 스타일 이름이 적용되었는지 다시 확인하세요.
- Figma 커뮤니티의 관련 파일이나 Apple 공식 UI 키트를 적극 활용하여 일관성을 유지하세요.