@ymnch.wt/design-system
v0.1.0
Published
A design system with Figma Code Connect integration, inspired by shadcn/ui
Downloads
49
Maintainers
ymnch.wtReadme
Design System with Figma Code Connect
shadcn/uiにインスパイアされた、Figma Code Connect統合を備えたReactデザインシステムです。
特徴
- 🎨 Figma Code Connect統合 - FigmaデザインとReactコンポーネントを直接接続
- 🎯 shadcn/ui風のコンポーネント - モダンで美しいUIコンポーネント
- 🔧 TypeScript完全対応 - 型安全なコンポーネント
- 🎨 Tailwind CSS - ユーティリティファーストのスタイリング
- 📦 ツリーシェイキング対応 - 最適化されたバンドルサイズ
- ♿ アクセシビリティ - Radix UIプリミティブを使用
インストール
npm install @your-org/design-system使用方法
基本的な使い方
import { Button, Card, CardHeader, CardTitle, CardContent, Input, Badge } from '@your-org/design-system';
function App() {
return (
<Card>
<CardHeader>
<CardTitle>ようこそ</CardTitle>
</CardHeader>
<CardContent>
<Input placeholder="メールアドレスを入力" />
<Button variant="default" size="default">
送信
</Button>
<Badge variant="secondary">新機能</Badge>
</CardContent>
</Card>
);
}コンポーネント
Button
様々なバリアントとサイズを持つボタンコンポーネント。
<Button variant="default">デフォルト</Button>
<Button variant="destructive">削除</Button>
<Button variant="outline">アウトライン</Button>
<Button variant="secondary">セカンダリ</Button>
<Button variant="ghost">ゴースト</Button>
<Button variant="link">リンク</Button>
<Button size="default">デフォルト</Button>
<Button size="sm">小</Button>
<Button size="lg">大</Button>
<Button size="icon">🔍</Button>Card
コンテンツをグループ化するためのカードコンポーネント。
<Card>
<CardHeader>
<CardTitle>カードタイトル</CardTitle>
<CardDescription>カードの説明文</CardDescription>
</CardHeader>
<CardContent>
カードのコンテンツ
</CardContent>
<CardFooter>
カードのフッター
</CardFooter>
</Card>Input
テキスト入力用のインプットコンポーネント。
<Input type="text" placeholder="テキストを入力" />
<Input type="email" placeholder="メールアドレス" />
<Input type="password" placeholder="パスワード" />
<Input disabled placeholder="無効化された入力" />Badge
ラベルやステータス表示用のバッジコンポーネント。
<Badge variant="default">デフォルト</Badge>
<Badge variant="secondary">セカンダリ</Badge>
<Badge variant="destructive">エラー</Badge>
<Badge variant="outline">アウトライン</Badge>Figma Code Connectのセットアップ
1. Figma Code Connectのインストール
npm install -D @figma/code-connect2. Figmaファイルとの接続
各コンポーネントの.figma.tsxファイルを編集して、FigmaファイルのURLとノードIDを設定します：
// src/components/button.figma.tsx
figma.connect(
Button,
'https://www.figma.com/design/YOUR_FILE_KEY?node-id=YOUR_NODE_ID',
{
// ... props mapping
}
);3. Code Connectの公開
# Figmaにログイン
npx figma-connect login
# Code Connectを公開
npm run figma:publishFigma Code Connectの使い方
ステップ1: Figmaでコンポーネントを作成
- Figmaでデザインシステムのコンポーネントを作成
- コンポーネントにプロパティ（Variant, Boolean, Text等）を設定
- コンポーネントのノードIDをコピー
ステップ2: Code Connect定義を更新
figma.connect(
Button,
'https://www.figma.com/design/YOUR_FILE_KEY?node-id=123:456',
{
props: {
variant: figma.enum('Variant', {
'Primary': 'default',
'Danger': 'destructive',
'Outline': 'outline',
}),
size: figma.enum('Size', {
'Medium': 'default',
'Small': 'sm',
'Large': 'lg',
}),
disabled: figma.boolean('Disabled'),
children: figma.string('Label'),
},
example: (props) => (
<Button
variant={props.variant}
size={props.size}
disabled={props.disabled}
>
{props.children}
</Button>
),
}
);ステップ3: 公開
npm run figma:publishこれで、Figmaのデザインファイルでコンポーネントを選択すると、対応するコードスニペットが表示されるようになります！
開発
# 依存関係のインストール
npm install
# 開発モード（ウォッチモード）
npm run dev
# ビルド
npm run build
# 型チェック
npm run type-check
# リント
npm run lintプロジェクト構造
.
├── src/
│ ├── components/
│ │ ├── button.tsx # Buttonコンポーネント
│ │ ├── button.figma.tsx # ButtonのCode Connect定義
│ │ ├── card.tsx # Cardコンポーネント
│ │ ├── card.figma.tsx # CardのCode Connect定義
│ │ ├── input.tsx # Inputコンポーネント
│ │ ├── input.figma.tsx # InputのCode Connect定義
│ │ ├── badge.tsx # Badgeコンポーネント
│ │ └── badge.figma.tsx # BadgeのCode Connect定義
│ ├── lib/
│ │ └── utils.ts # ユーティリティ関数
│ └── index.ts # エントリーポイント
├── figma.config.json # Figma Code Connect設定
├── package.json
├── tsconfig.json
└── tsup.config.tsTailwind CSSの設定
このデザインシステムを使用するプロジェクトでは、以下のTailwind CSS設定が必要です：
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
},
},
};CSS変数
グローバルCSSファイルに以下の変数を追加してください：
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
}ライセンス
MIT
貢献
プルリクエストを歓迎します！大きな変更の場合は、まずissueを開いて変更内容を議論してください。