Fig Kit

@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

基本用法

1. 导入主题CSS 在您的应用程序入口点：

import '@figkit/themes/tokens.css';

1. 设定品牌和主题 在根元素上：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    document.documentElement.setAttribute('data-brand', 'default');
    document.documentElement.setAttribute('data-theme', 'light');
  }, []);

  return ;
}

1. 使用组件:

import { Button, Checkbox, Tabs } from '@figkit/ui';
import '@figkit/ui/index.css';

function MyComponent() {
  return (
    

      Click me
      
      
    

  );
}

📚 文档

• 文档网站 -包含指南、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

🔄 令牌工作流

1. 从Figma中提取代币:

   pnpm mcp:pull:tokens

1. 构建主题:

   pnpm build:tokens

1. 检查是否有更改:

   pnpm mcp:diff

🚢 出版

看 发布.md 详细的出版说明。

快速发布

# Create changeset
pnpm changeset

# Version bump
pnpm release:version

# Publish
pnpm release:publish

🧪 测试

• 单元测试：Vitest与React测试库
• 无障碍是-axe for a11y 测试
• 视觉回归：剧作家视觉测试

📄 许可证

ISC

🤝 贡献

1. 为您的更改创建更改集： pnpm changeset
2. 进行更改
3. 运行测试： pnpm test
4. 构建： pnpm build
5. 提交PR

📖 其他资源

• 快速入门指南
• 安装说明
• 代币系统文档
• Figma组件拉导