@figkit/设计系统
一个包含React组件、设计令牌和Figma集成的综合设计系统monorepo。准备好发布npm并供其他团队使用。
📦 包裹
这个monorepo包含以下npm包：
- @figkit/UI -带有按钮、复选框、标签等的React组件库
- @figkit/主题 -支持多品牌/主题的CSS主题变量
- @figkit/代币 -JSON格式的设计令牌
- @图/图案 -组合UI模式（可选）
🚀 快速开始
安装
安装您需要的软件包：
# UI Components
npm install @figkit/ui
# Themes (required for components)
npm install @figkit/themes
# Design Tokens (optional)
npm install @figkit/tokens基本用法
- 导入主题CSS 在您的应用程序入口点：
import '@figkit/themes/tokens.css';- 设定品牌和主题 在根元素上：
import { useEffect } from 'react';
function App() {
useEffect(() => {
document.documentElement.setAttribute('data-brand', 'default');
document.documentElement.setAttribute('data-theme', 'light');
}, []);
return ;
}- 使用组件:
import { Button, Checkbox, Tabs } from '@figkit/ui';
import '@figkit/ui/index.css';
function MyComponent() {
return (
Click me
);
}📚 文档
🎨 特性
- ✅ 多品牌支持：默认值、FigJam、DevMode、幻灯片
- ✅ 多主题支持：亮模式和暗模式
- ✅ TypeScript：包括完整的类型定义
- ✅ 设计代币：用于一致样式的CSS变量
- ✅ Figma集成：来自Figma的自动令牌同步
- ✅ 故事书：交互式组件文档
- ✅ 测试：单元、可访问性和视觉回归测试
🏗️ 发展
先决条件
- Node.js v18.12+
- pnpm v9+
设置
# Install dependencies
pnpm install
# Pull tokens from Figma (or use mock data)
USE_MOCK=true pnpm mcp:pull:tokens
# Build tokens to CSS
pnpm build:tokens
# Build all packages
pnpm build
# Run Storybook
pnpm -F @figkit/docs storybook可用脚本
# Build
pnpm build # Build all packages
pnpm build:tokens # Build theme CSS from tokens
# Development
pnpm -F @figkit/docs storybook # Run Storybook
pnpm -F @figkit/docs-app dev # Run Documentation site (port 3001)
pnpm -F @figkit/ui dev # Watch mode for UI package
# Testing
pnpm test # Run all tests
pnpm test:a11y # Run accessibility tests
pnpm visual:test # Visual regression tests
# Type checking
pnpm typecheck # Type check all packages
# Token management
pnpm mcp:pull:tokens # Pull tokens from Figma
pnpm mcp:diff # Compare token changes📦 封装结构
packages/
├── ui/ # React component library
├── patterns/ # Composed UI patterns
├── tokens/ # Design tokens (source)
├── themes/ # Compiled CSS themes
├── docs/ # Storybook documentation
└── figma-mcp/ # Figma token sync tooling🔄 令牌工作流
- 从Figma中提取代币:
pnpm mcp:pull:tokens- 构建主题:
pnpm build:tokens- 检查是否有更改:
pnpm mcp:diff🚢 出版
看 发布.md 详细的出版说明。
快速发布
# Create changeset
pnpm changeset
# Version bump
pnpm release:version
# Publish
pnpm release:publish🧪 测试
- 单元测试：Vitest与React测试库
- 无障碍是-axe for a11y 测试
- 视觉回归：剧作家视觉测试
📄 许可证
ISC
🤝 贡献
- 为您的更改创建更改集：
pnpm changeset - 进行更改
- 运行测试：
pnpm test - 构建：
pnpm build - 提交PR