Figma Library
디자인 파일과 라이브러리 구조입니다. 사이트의 각 컴포넌트 페이지와 Figma 섹션이 1:1 로 대응합니다. 파일 열기 ↗
| 페이지 | 내용 | 가이드 대응 |
|---|---|---|
| Home | 커버, Overview(파일 구성·작업 규칙), About, UX Principles | Home |
| Foundations | Overview · Base material(Colors · Elevation · Grid · Icons · Typography). Radius · Motion · Accessibility · 토큰 원본은 Resources › Design Token | Foundations |
| Components | 30개 컴포넌트 (Selection Controls · Table 그룹 포함). 각 섹션에 사이트 코드와 같은 스펙의 Variant · Size · State 프레임과 HTML 코드 참조 | Components |
| Patterns | Common UI · Service Pattern · Security Console. 각 패턴의 대표 예시 프레임 | Patterns |
| Resources | Figma Library · Token Download · Changelog · Contribution | Resources |
| _Archive · …(v0.1) | 이전 뼈대 페이지 보관 (참고용, 사용 안 함) | — |
Variables · Styles
- Primitive: color/{neutral·accent·red·orange·green·cyan}/{step}, color/brand/{step}, space/{n}, radius/{name}, size/{card-padding…}
- Semantic(Light/Dark): bg/ text/ border/ primary(=Accent)/ status/ severity/ — CSS 변수 이름과 1:1
- Text Styles 14단계 Pretendard(=
.t-*클래스) · Effect Styles Shadow Normal xs~xl · Spread sm/md(=--shadow-*, 1~3 은 별칭)
작업 규칙
- 색은 Semantic 변수만, 글자는 Text Style만, 그림자는 Effect Style만.
- Variant 속성명은 소문자(variant / size / state). 사이트 Props 표의 클래스 이름과 같게.
- 컴포넌트 Description에 용도·사용 규칙과 사이트 페이지 링크 기입.