@flexmatch-dev/react-ui

React UI component library by FlexMatch

Installation

npm install @flexmatch-dev/react-ui

Usage

import { Button } from '@flexmatch-dev/react-ui';
import '@flexmatch-dev/react-ui/dist/index.css';

function App() {
  return <Button>Click me</Button>;
}

Development

Build

npm run build

Development Mode

npm run dev

Figma 리소스 빌드

Figma에서 내보낸 CSS 파일을 기반으로 Color와 Typography 변수 및 유틸리티 클래스를 자동 생성합니다.

Figma CSS 파일 위치

• res/figma.css - Figma에서 내보낸 원본 CSS 파일

이 파일은 Anima Figma 플러그인을 통해 생성한 CSS입니다. 현재는 Export해서 가져올 자동화된 방법이 없으므로, Anima 플러그인에서 생성한 CSS 코드를 수동으로 res/figma.css 파일에 복사해야 합니다.

생성되는 파일

빌드 시 다음 파일들이 src/css/_generated/ 디렉토리에 생성됩니다:

• color-variable.css - Color CSS 변수
• color-style.css - Color 유틸리티 클래스 (.bg-*, .font-*, .border-*)
• typo-variable.css - Typography CSS 변수
• typo-style.css - Typography 유틸리티 클래스 (.text-*)
• index.css - 모든 파일을 import하는 인덱스 파일

빌드 스크립트

# CSS만 빌드
npm run build:css

# 또는 직접 실행
node scripts/parse-figma.js

License

ISC