🎄디자인 시스템 활용 방법

설정된 디자인 시스템을 tailwindCSS로 활용하는 방법

Color

• Color는 semantic 안에 light와 dark로 나뉨

Color 용례

• figma : semantic/feedback/negative
  • tailwindCSS : light-feedback-negative
  • semantic을 없애고 light- prefix 추가

Alpha

• Alpha 값은 그림자색으로 사용됨

Alpha 용례

• figma : alpha/08
  • tailwindCSS : alpha-8
  • 그림자에 적용할 경우 : shadow-alpha-8

Typography

Typography 용례

• figma : typography/label/bold/sm
  • tailwindCSS : typo-label-bold-sm

Scheme

Gap 용례

• figma : item spacing : gap/2xl
  • tailwindCSS : gap-2xl
• figma : padding : gap/2xs
  • tailwindCSS : p-2xs

Radius 용례

• figma : radius/circle
  • tailwindCSS : rounded-circle

Stroke 용례

• figma : stroke/none
  • tailwindCSS : stroke-none

Opacity 용례

• figma : opacity/08
  • tailwindCSS : opacity-8