Figma Design System

A React design system generated from Figma via MCP (Model Context Protocol), following atomic design principles.

Structure

src/
├── tokens/           # Design tokens (colors, typography, spacing)
├── atoms/            # Basic building blocks
├── molecules/        # Composed of atoms
├── organisms/        # Composed of molecules and atoms
└── __manifests__/    # Component registry and dependencies

Development

# Install dependencies
npm install

# Start development
npm run dev

# Build
npm run build

# Storybook
npm run storybook

# Tests
npm run test

Atomic Design

• Variables → Design tokens (colors, typography, spacing)
• Atoms → Basic components (buttons, icons, inputs)
• Molecules → Composed components (form fields, cards)
• Organisms → Complex components (headers, modals, forms)

Components

Atoms

• PlaceholderIcon (placeholder for all icons)

Molecules

• (Coming soon)

Organisms

• (Coming soon)