디자인 토큰 변환기
디자인 토큰을 JSON, CSS 변수, SCSS 형식으로 변환합니다.
이 도구 소개
디자인 토큰은 현대 디자인 시스템의 구성 요소로, 색상, 간격, 타이포그래피, 그림자 및 기타 시각적 속성에 대한 표준화된 값입니다. 이러한 결정을 단일 형식으로 중앙화하면 팀은 시각적 일관성을 유지하고 버그를 줄이며 디자인과 개발 워크플로우를 가속화할 수 있습니다. 단일 제품에 작업하든 여러 플랫폼을 관리하든 디자인 토큰은 코드베이스 전체에서 색상이나 측정값을 수동으로 추적할 필요성을 제거합니다.
이 변환기는 가장 일반적인 디자인 토큰 형식 간의 전환을 쉽게 만듭니다: JSON(토큰을 단순 키-값 구조로 저장), CSS 변수(브라우저에서 :root 선택자를 통해 네이티브로 렌더링), SCSS 변수(빌드 단계가 필요하지만 Sass 전처리기와 원활하게 통합). 토큰을 임의의 형식으로 붙여넣고 대상 형식을 선택하기만 하면 도구가 입력을 자동으로 감지하고 프로젝트에 복사하여 붙여넣을 수 있는 깔끔한 결과물을 생성합니다.
디자인 토큰을 사용하는 팀은 일반적으로 JSON을 소스 형식으로 시작한 후 플랫폼별 결과물을 생성합니다: 브라우저 네이티브 지원이 필요한 웹 애플리케이션용 CSS, Sass로 구축된 프로젝트용 SCSS, 토큰을 프로그래매틱하게 소비하는 도구용 JSON. 이 도구는 양방향 변환을 지원하므로 기존 CSS나 SCSS에서 토큰을 추출하여 디자인 시스템을 감사하거나 리팩터링해야 할 때마다 JSON으로 변환할 수 있습니다.
자주 묻는 질문
코드 구현
# Convert JSON design tokens to CSS variables
def tokens_to_css_vars(tokens: dict) -> str:
lines = [f" --{k}: {v};" for k, v in tokens.items()]
return ":root {\n" + "\n".join(lines) + "\n}"
# Convert JSON design tokens to SCSS variables
def tokens_to_scss(tokens: dict) -> str:
return "\n".join(f"${k}: {v};" for k, v in tokens.items())
tokens = {
"color-primary": "#6366f1",
"spacing-4": "16px",
"border-radius": "8px"
}
print(tokens_to_css_vars(tokens))
print(tokens_to_scss(tokens))Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.