피그마 기초

스타일 가이드
컬러, 글자 크기, 두께 등 반복되는 스타일을 만들어 효율적인 작업가능
같은 스타일로 작업하였기 때문에 유지보수에 수월함


스타일 가이드 요소 정리
1. 타이포 스타일 (Typography Style)

텍스트 규칙 정리

어떤 폰트와 크기를 사용할지 정하는 영역이다.

포함되는 내용:

폰트 종류
글자 크기
굵기(Font Weight)
자간(Tracking)
행간(Line Height)

예시:

Heading 1 : 48px / Bold
Body : 16px / Regular
Caption : 12px / Light

주로 사용하는 폰트:

Figma 안에서 Text Style로 등록
2. 컬러 스타일 (Color Style)

브랜드 및 UI 색상 규칙

프로젝트에서 사용하는 색상을 정리하는 영역이다.

포함되는 내용:

Primary Color
Secondary Color
Background Color
Text Color
Warning / Error Color

예시:

Primary : #FF6B00
Background : #111111
Text : #FFFFFF

보통:

Light Mode
Dark Mode

까지 함께 정리한다.

3. 버튼 스타일 (뱃지 포함) - 컴포넌트 등록

버튼과 UI 요소를 재사용 가능하게 만드는 영역

여기서 말하는 “컴포넌트 등록”은
버튼을 하나 만들어두고 여러 화면에서 공통으로 사용하는 방식이다.

예시:

Primary Button
Secondary Button
Icon Button
Badge
Tag

버튼 상태:

Default
Hover
Active
Disabled

뱃지(Badge)는:

NEW
HOT
EVENT

같은 작은 상태 표시 UI를 의미한다.

보통:

Figma의 Component 기능 사용
4. 라인 스타일 (Line Style)

선 디자인 규칙

UI에서 사용하는 테두리와 구분선 스타일을 정리하는 영역이다.

포함 내용:

선 두께
점선 여부
컬러
투명도
Radius(둥근 정도)

예시:

1px Solid #E5E5E5
2px Dashed
Radius 12px

주로 사용되는 곳:

카드 테두리
구분선
입력창 Border
UI 프레임

이 4개는 보통
Figma에서 디자인 시스템 만들 때 가장 기본적으로 구성하는 항목들이야.