Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

@seed-design/design-token

Package Overview
Dependencies
0
Maintainers
1
Versions
6
Issues
File Explorer

Advanced tools

@seed-design/design-token

undefined

    1.0.0-alpha.0latest

Version published
Maintainers
1
Yearly downloads
1,296

Weekly downloads

Readme

Source

@seed-design/design-token

디자인 토큰이 무엇인가요?

Design tokens are indivisible pieces of a design system such as colors, spacing, typography scale.

-- Design Token Working Group 정의

디자인 토큰은 여러 디자인 도구, 개발환경 간에 디자인 시스템의 최소 단위를 공유할 수 있도록 표준을 제공하는 것을 목표로 합니다.

Goals & Non-goals

Goal

  • 상호운용성 제공
  • 라이브러리 배포만으로 전체 애플리케이션에 변경 적용
  • 디자인 도구와 효율적으로 동기화

Non-goals

  • 개발할 때 편하도록 High-level API 제공

Token Structures

디자인 토큰 계층구조

Raw values는 어떤 디스플레이 장치에 그릴 수 있는 실제 단위를 의미합니다. px, dp, rem, vw 와 같이 "크기"를 나타내는 단위, #fff, rgba(123, 123, 123, 1) 처럼 "색상을" 나타내는 단위, "Noto Sans KR" 같은 "폰트"를 나타내는 값 등이 모두 해당됩니다.

사실상 무한한 값들 중에 실제로 사용될 값을 제한하고 고유한 이름을 부여하는 것으로 디자인의 일관성과 재사용성을 얻을 수 있지만, 반대로 디자인의 유연성과 창의성을 크게 제한할 수 있습니다.

당근마켓의 디자인 토큰은 유연성을 위해 크게 2단계로 계층화하여 사용합니다.

Scale Token은 Raw value Scale 하나에 이름을 부여한 것 입니다. Scale 의 이름을 통해 전체 디자인에 사용되는 값을 유한하게 유지합니다. Scale은 미리 정의한 단위를 통해 값의 세부사항(출력장치)을 숨겨 이를 통해 특정 플랫폼에 불가지론적인 디자인을 유지할 수 있게 합니다.

Semantic Token은 Scale Token의 조합(Composition)으로 디자인 의도를 표현한 단위이며, 실제 디자인과 개발과정에서 주요 빌딩블럭으로 사용됩니다. 여러개의 Scale 조합이 하나의 Semantic Token 을 구성할 수도 있고, 여러 Semantic 이 하나의 Scale를 재정의해서 사용될 수도 있습니다.

시스템에 존재하는 Scale 과 Semantic 정의가 전체 디자인의 Theme을 결정하고, 뷰포트나 플랫폼 등 외부 환경에 맞게 Scale에 적절한 값을 주입하는 것으로 스키마 변경없이 유연하게 Theme을 재정의할 수 있습니다.

사용법

yarn add @seed-design/design-token

JavaScript (TypeScript)

import { vars } from '@seed-design/design-token'; vars.semantic.color.primary; vars.scale.color.carrot500; vars.static.color.carrot500;

FAQs

What is @seed-design/design-token?

undefined

Is @seed-design/design-token popular?

The npm package @seed-design/design-token receives a total of 227 weekly downloads. As such, @seed-design/design-token popularity was classified as not popular.

Is @seed-design/design-token well maintained?

We found that @seed-design/design-token demonstrated a healthy version release cadence and project activity. It has 1 open source maintainer collaborating on the project.

Last updated on 20 Apr 2022
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc