디자인 시스템 구축: Figma에서 코드까지

디자인 시스템이란?

디자인 시스템은 재사용 가능한 컴포넌트, 패턴, 가이드라인의 집합입니다.

핵심 구성 요소

1. 디자인 토큰

색상, 타이포그래피, 간격을 변수로 정의합니다.

:root {
  --color-primary: #0066ff;
  --color-text-primary: #1a1a1a;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --radius-sm: 6px;
}

2. 컴포넌트 라이브러리

interface ButtonProps {
  variant: "primary" | "secondary" | "ghost";
  size: "sm" | "md" | "lg";
  children: React.ReactNode;
}

export function Button({ variant, size, children }: ButtonProps) {
  return (
    <button className={cn(baseStyles, variantStyles[variant], sizeStyles[size])}>
      {children}
    </button>
  );
}

3. Figma 연동

Figma의 Dev Mode를 활용하면 디자인 토큰을 코드로 자동 추출할 수 있습니다.

운영 팁

• 컴포넌트 문서화는 Storybook 활용
• 버전 관리는 npm 패키지 배포
• 변경 사항은 Changelog 유지