使用说明
@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 <YourApp />;
}
- 使用组件:
import { Button, Checkbox, Tabs } from '@figkit/ui';
import '@figkit/ui/index.css';
function MyComponent() {
return (
<div>
<Button variant="primary">Click me</Button>
<Checkbox label="Accept terms" />
<Tabs
items={[{ label: 'Tab 1' }, { label: 'Tab 2' }]}
defaultValue={0}
/>
</div>
);
}
📚 文档
- 文档网站 -包含指南、API参考资料和示例的完整文档
- UI组件 -组件API和使用
- 主题 -主题和CSS变量
- 代币 -设计令牌结构
- 出版指南 -如何将包发布到npm
- 为文档做出贡献 -如何添加或编辑文档
🎨 特性
- ✅ 多品牌支持：默认值、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
