디자인 시스템

Previousflutter Rendering Mechanism NextFigma Token to Code Generation

Last updated 7 hours ago

디자인 시스템

SSOT (Single Source of Truth)

이미 있는 컴포넌트를 새로 구현하지 않게끔 하기

장점

Text style : box shadow, text height, line spacing등과 같은 요소의 누락을 막아줌

1. Figma에서 디자인 토큰 추출하기

Figma의 Tokens Studio 플러그인을 사용하면 디자인 토큰을 쉽게 추출할 수 있습니다.

✅ Tokens Studio 설치 및 설정

Figma에서 Tokens Studio 플러그인을 설치합니다 ()

컬러, 타이포그래피, 여백 등의 디자인 토큰을 설정합니다.

import Local Styles or Design Token
현재 파일은 비어 있으며, 다음 단계에서 토큰을 추가할 것입니다.

Tokenization 된 Json 확인

💡 예제 JSON:

{
  "Semantic": {
    "Static": {
      "white": "#ffffff",
      "grey_background": "#e7e9ef",
      "grey_disabled": "#b6bcc8",
      "black": "#16171b"
    },
    "Accent": {
      "primary": "#122699",
      "primary_light": "#dfe0ff",
      "primary_disabled": "#dbdef0"
    },
    "Status": {
      "error": "#dc0c0c",
      "caution": "#f1a107",
      "success": "#11a277",
      "progress": "#287eff",
      "fail": "#636874",
    }
  },
  "Colors": {
    "grey": {
      "10": "#16171b",
      "20": "#1e2025",
      "30": "#444855"
    }
  }
}