피그마 기초

6월 과제를 기준으로 보면, 지금 정리해야 하는 건 사실상 **“스타일 가이드 제작”**이야.
디자인 + 코딩 둘 다 연결되는 기본 규칙을 만드는 작업이라고 보면 됨.

보통 아래처럼 정리하면 가장 깔끔함.

스타일 가이드 구성
1. 타이포 스타일 (Typography)

글자 스타일 규칙 정리.

포함하면 좋은 것:

폰트 종류
폰트 굵기
글자 크기
줄간격(Line-height)
자간(Letter-spacing)

예시:

종류 폰트 크기 굵기
H1 Pretendard 48px Bold
H2 Pretendard 36px SemiBold
Body Pretendard 16px Regular
Caption Pretendard 12px Regular

코딩에서는 이런 식으로 연결됨:

h1{
font-size:48px;
font-weight:700;
}
2. 컬러 스타일 (Color Style)

사이트에서 사용하는 색상 규칙.

보통:

Primary
Secondary
Background
Text
Gray 계열
Point Color

정리함.

예시:

이름 색상
Primary #6C63FF
Secondary #FFB800
Black #111111
Gray #888888
Background #F5F5F5

디자인에서는 색상칩으로 보여주고
코딩에서는 CSS 변수로 사용 가능.

:root{
--primary:#6C63FF;
}
3. 버튼 스타일 (Button Style)

버튼 디자인 규칙.

보통 확인하는 것:

크기
radius
padding
hover
active
disabled

예시:

타입 설명
Primary Button 메인 버튼
Secondary Button 보조 버튼
Outline Button 테두리 버튼
Disabled Button 비활성 버튼

코딩 연결:

.btn-primary{
background:#6C63FF;
color:white;
border-radius:12px;
}
4. 라인 스타일 (Line Style)

구분선, 테두리 스타일.

보통:

border 두께
색상
dashed 여부
divider 스타일

예시:

이름 스타일
Default 1px solid #E5E5E5
Bold 2px solid #111
Dashed 1px dashed #999