폰트 스타일
- 폰트 스케일이라고도 함. 스케일=일정한 규칙에 따라 정렬된 하나의 세트.
- 컬러 시스템과 마찬가지로, 디자인 시스템에서 사용할 폰트를 모아둔 목록.
- 구성
패밀리 : 폰트 종류
굵기(무게감) : 글자의 중요성을 알려줌
크기 : 일반적으로 16px에서 시작, 2px씩 줄이거나 늘리다가 20px 이상부터는 4px씩 차이 나게 한다.
행간 : 글자 줄 사이의 간격. 큰 폰트는 120~135%. 본문은 135~170% 사이를 추천.
자간 : 글자 간의 간격.
실습


1. Text 작성하고 이름을 Body/16px라고 작성하고, Text를 16px 크기에 자간을 150%로 변경. 이후 같은 걸 2개 복사한 다음 각각 크기와 이름을 14px와 18px로 변경.


2. Body/16px를 복사해서 Title/16px로 바꾼 다음, Text를 자간을 135%로 변경. 이후 같은 걸 2개 복사한 다음 각각 크기와 이름을 14px와 18px로 변경.


3. 만든 Text들을 전부 선택한 다음, Styler 플러그인의 Generate Styles 기능을 사용하여 글꼴 스타일을 작성.
'UI\UX 공부 > figma강의 정리' 카테고리의 다른 글
| [4강] 01. 컴포넌트 프로퍼티 이해 (0) | 2025.07.14 |
|---|---|
| [3강] 03. 마스터 컴포넌트와 인스턴스,디자인 시스템 . (0) | 2025.07.11 |
| [3강] 01. 파운데이션과 컬러스타일 (0) | 2025.07.10 |
| [2강] 03. 프레임과 컨스트레인트 (0) | 2025.07.09 |
| [2강] 02. 오토레이아웃 (0) | 2025.07.09 |