DoF Design System - Storybook

A comprehensive design system for Data & AI products, auto-generated from Figma and documented with Storybook.

🎯 Overview

This project automatically extracts design tokens and components from the DoF UI Library in Figma and generates a complete Storybook documentation site with production-ready React components.

Inspired by IBM Carbon Design System, this design system provides:

• 🎨 Design Tokens - Colors, typography, spacing extracted from Figma
• 🧩 Component Library - Reusable React components
• 📊 Data Visualization - Charts and data display components
• 💬 Conversational UI - Chat and interaction components
• ♿ Accessibility - WCAG 2.1 AA compliant
• 📚 Documentation - Comprehensive Storybook docs

📁 Project Structure

dof-storybook/
├── .storybook/          # Storybook configuration
├── docs/                # Documentation pages (MDX)
├── scripts/             # Build and extraction scripts
│   ├── extract-figma-tokens.js
│   └── extract-figma-components.js
├── src/
│   ├── components/      # React components
│   │   ├── basic/       # Basic components (Button, Input, etc.)
│   │   ├── data-viz/    # Data visualization components
│   │   └── conversational/  # Chat and conversational UI
│   ├── tokens/          # Design tokens (auto-generated)
│   │   ├── tokens.json
│   │   ├── tokens.css
│   │   └── tokens.js
│   ├── assets/          # Icons, images
│   └── utils/           # Utility functions
└── package.json

🚀 Quick Start

Prerequisites

• Node.js >= 18.0.0
• npm or yarn
• Figma access token

Installation

1. Clone the repository:

cd /Users/alberto.delapuente/projects/dof-storybook

2. Install dependencies:

npm install

3. Configure Figma credentials:

# .env is already configured with:
FIGMA_TOKEN=your_token_here
FIGMA_FILE_KEY=WrkiQCkVu5aikjyMs9Ufaq

4. Extract design tokens from Figma:

npm run extract-tokens

5. Start Storybook:

npm run storybook

Visit http://localhost:6006 to view the Storybook!

📊 Figma Structure

The DoF UI Library in Figma is organized into:

• Logo - Brand identity
• Colors - Color palette and themes
• Typography - Font scales and text styles
• Layout - Grid system and spacing
• Iconography - Icon library
• Components: Basic - Buttons, inputs, cards, etc.
• Components: Data Visualisation - Charts, graphs, tables
• Components: Conversational - Chat bubbles, messages, etc.

🛠️ Available Scripts

| Script | Description | |--------|-------------| | npm run storybook | Start Storybook dev server on port 6006 | | npm run build-storybook | Build static Storybook for deployment | | npm run extract-tokens | Extract design tokens from Figma | | npm run extract-components | Extract component specs from Figma |

🎨 Design Tokens

Design tokens are automatically extracted from Figma and available in multiple formats:

• JSON - src/tokens/tokens.json - Raw token data
• CSS - src/tokens/tokens.css - CSS custom properties
• JavaScript - src/tokens/tokens.js - JS/TS exports

Usage Example

/* Using CSS variables */
.button {
  background-color: var(--color-primary);
  font-size: var(--font-size-body);
  padding: var(--spacing-04);
}

// Using JS tokens
import { colors, typography, spacing } from './tokens/tokens.js';

const styles = {
  backgroundColor: colors.primary.value,
  fontSize: typography.body.fontSize,
  padding: spacing['spacing-04'].value
};

🧩 Component Development

Creating a New Component

1. Create component directory:

mkdir -p src/components/basic/MyComponent

2. Create component files:

MyComponent/
├── MyComponent.jsx       # Component implementation
├── MyComponent.css       # Styles
├── MyComponent.stories.jsx  # Storybook stories
├── MyComponent.test.jsx  # Tests
└── index.js              # Exports

3. Follow Carbon Design System patterns for consistency

Component Documentation

Each component should include:

• Props table - All available props with types and defaults
• Usage examples - Common use cases
• Accessibility notes - ARIA attributes, keyboard navigation
• Design guidelines - When and how to use the component
• Figma link - Link to component in Figma library

📖 Documentation

Documentation is written in MDX and organized by:

• Foundations - Design principles, tokens, guidelines
• Components - Individual component docs
• Patterns - Common patterns and best practices
• Resources - Links, tools, changelog

♿ Accessibility

All components follow:

• WCAG 2.1 AA compliance
• Keyboard navigation support
• Screen reader compatibility
• Color contrast requirements (4.5:1 minimum)
• Focus indicators
• Semantic HTML

Use the @storybook/addon-a11y to test accessibility in Storybook.

🚢 Deployment

Build the static Storybook:

npm run build-storybook

Output will be in storybook-static/ directory, ready for deployment to:

• GitHub Pages
• Netlify
• Vercel
• Any static hosting service

🔗 Links

• Figma Library
• IBM Carbon Design System (Inspiration)
• Storybook Documentation

📝 License

MIT

👥 Contributors

• Alberto de la Puente - Initial work

Built with ❤️ using Storybook, React, and the Figma API