Foundation
색, 글자, 간격, 모션, 아이콘처럼 모든 화면이 공유하는 값이에요. light와 dark를 함께 정의해요.
Figma에서 코드까지,
같은 규칙으로 만드는 화면
Sonic UI는 사이드 프로젝트를 위한 디자인 시스템이에요. Figma 원본, DESIGN.md 규칙, React 컴포넌트를 함께 배포해서 AI도 같은 규칙으로 화면을 만들어요.
bash
npm i @xonic0506/sonic-ui
둘러보기
규칙의 기초부터 실제 화면에 적용한 사례까지 네 갈래로 정리했어요.
Components
Button, Input, Dialog처럼 화면을 이루는 부품 30여 개의 구조, 상태, 사용법이에요.
Guidelines
레이아웃, 문구, 데이터 화면의 네 가지 상태처럼 컴포넌트를 조합할 때 지킬 규칙이에요.
Case Studies
API 키 관리 화면처럼 규칙을 실제 화면에 적용한 예시와 그때 내린 결정이에요.