3. 값과 문구의 출처
생김새는 Figma에서 읽고 값은 저장소에서 가져옵니다. 간격, 색, 모서리 반경, 글꼴은 프로젝트 토큰으로 옮기고, 문구는 고정 문구와 서버 데이터로 나눠 출처를 정합니다.
3.1 Figma 수치와 변수는 프로젝트 토큰으로 옮깁니다
디자인 파일의 변수 이름이 코드에 새지 않고 테마와 토큰 변경이 화면에 그대로 반영됩니다.
Figma 변수 이름은 디자인 파일의 이름이지 프로젝트의 토큰이 아닙니다. 그대로 옮기면 선언되지 않은 변수라 대체값만 화면에 남고 테마를 바꿔도 따라가지 않으므로, 값과 용도가 같은 프로젝트 토큰으로 옮깁니다.
| Figma에서 받은 것 | 처리 |
|---|---|
| 변수 이름과 값 | 값과 용도가 같은 프로젝트 토큰을 씁니다 |
| 변수 없이 온 수치 | 가장 가까운 프로젝트 토큰으로 맞춥니다. 13px 간격은 12px 토큰으로 읽습니다 |
| 맞는 토큰이 없는 값 | 값을 그대로 쓰고 보고의 차이 목록에 적습니다 |
| 토큰은 있지만 값이 조금 다름 | 토큰을 쓰고, 값 차이는 검증에서 DRIFT로 적습니다 |
글꼴 이름. font-['Pretendard:SemiBold'] | 프로젝트 전역 글꼴을 따르고 굵기와 크기만 토큰으로 옮깁니다 |
| 줄 높이, 자간 | 글꼴 크기와 짝을 이루는 타이포그래피 토큰으로 옮깁니다. 픽셀 값만 따로 옮기지 않습니다 |
| 라이트, 다크 값이 갈린 변수 | get_variable_defs는 현재 모드 값 하나만 줍니다. 모드별 값은 프로젝트 토큰 정의를 따릅니다 |
새 토큰을 만들지는 CSS 규칙 5.2,
대체값을 붙일지는 CSS 규칙 5.1가 정합니다.
대응표는 get_variable_defs 응답 하나로 만들고, 같은 값을 얻으려고 get_design_context를 부르지 않습니다.
Figma 변수 이름과 대체값을 그대로 옮깁니다.
.pg_products__row {
padding: 16px var(--spacing-12, 12px);
border-radius: var(--borderradius-10, 10px);
color: var(--content\/text\/black, #212529);
}값과 용도가 같은 프로젝트 토큰으로 옮깁니다.
.pg_products__row {
padding: var(--app-space-section) var(--app-space-inline);
border-radius: var(--app-radius-panel);
color: var(--app-color-text-primary);
}대응표를 만들어 차이를 함께 적습니다.
Figma 변수 값 프로젝트 토큰 차이
Spacing 16 16 --app-space-section -
Spacing 12 12 --app-space-inline -
BorderRadius 10 10 --app-radius-panel -
Content/Text/Black #212529 --app-color-text-primary -
Content/Border/Normal #dee2e6 --app-color-border 토큰 값 #d9d9d9함께 보기
3.2 고정 문구와 서버 데이터를 나눠 글자의 출처를 정합니다
Figma 샘플 값을 하드코딩하지 않고, 고정 문구를 응답 필드에서 찾지도 않습니다.
Figma 화면의 글자에는 고정 문구와 샘플 데이터가 섞여 있습니다. 샘플을 하드코딩하면 모든 사용자에게 같은 값이 보이고, 고정 문구를 데이터로 오해하면 없는 응답 필드를 찾게 됩니다.
| 글자 | 출처 |
|---|---|
| 컬럼 이름, 버튼 이름, 탭 이름, 라벨, placeholder, 빈 상태 문구 | 고정 문구입니다. 프로젝트가 문구를 두는 자리에 스크린샷 글자 그대로 적습니다 |
| 행 값, 개수, 금액, 날짜, 사용자 이름 | 서버 데이터입니다. 응답 필드에서 읽습니다 |
단위나 접두어가 붙은 값. 128건, ₩12,000 | 단위는 고정 문구, 숫자는 서버 데이터로 나눕니다 |
| 어느 쪽인지 모르는 글자 | 먼저 분류해 보고에 적고, 맞는 응답 필드가 없으면 질문합니다 |
프로젝트에 문구 리소스가 있으면 고정 문구는 리소스에 둡니다. 글자 자체는 규칙 1.4에 따라 스크린샷에서 읽습니다.
샘플 행과 개수를 화면에 하드코딩합니다.
<Fragment>
<UiTable rows={[{id: 1, name: "기본 티셔츠", price: 12000}]} />
<p className={clsx("pg_products__count")}>총 128건</p>
</Fragment>행과 개수는 응답에서, 단위는 고정 문구로 둡니다.
<Fragment>
<UiTable rows={responseProductListSuspense.data.items} />
<p className={clsx("pg_products__count")}>총 {responseProductListSuspense.data.total}건</p>
</Fragment>