# Design System Configuration

> This directory maps your Figma design system to code implementation.

---

## Purpose

When using the workflow skill's Figma capabilities to extract designs, the AI needs to know:

1. **How Figma tokens map to code** (colors, spacing, typography)
2. **What component patterns exist** (and how to match them)
3. **Design system constraints** (never invent, always map)

---

## Setup

### 1. Run /design-setup

The `/design-setup` command will:

- Connect to your Figma file via the Figma skill
- Extract design tokens
- Generate initial mappings
- Create component pattern documentation

### 2. Populate Token Mapping

Edit `token-mapping.md` to define how Figma tokens translate to your code:

```markdown
## Colors

| Figma Token | CSS Variable        | Tailwind Class |
| ----------- | ------------------- | -------------- |
| Primary/500 | --color-primary-500 | bg-primary-500 |
| Neutral/100 | --color-neutral-100 | bg-neutral-100 |
```

### 3. Document Component Patterns

Edit `component-patterns.md` to map Figma components to code:

````markdown
## Button

**Figma Component:** `Components/Button/Primary`

**Code Pattern:**

```tsx
<Button variant="primary" size="md">
  {children}
</Button>
```
````

**Variants:**

- Primary → variant="primary"
- Secondary → variant="secondary"
- Ghost → variant="ghost"

```

---

## File Structure

```

flydocs/design-system/
├── README.md # This file
├── token-mapping.md # Figma token → code mapping
├── component-patterns.md # Figma component → code mapping
└── tokens/ # Optional: extracted token JSON
├── colors.json
├── spacing.json
└── typography.json

````

---

## Integration with Figma Workflow

The `flydocs-workflow` skill's Figma capabilities reference this directory:

1. **Before extraction** - Loads token-mapping.md for translation rules
2. **During extraction** - Matches Figma elements to documented patterns
3. **After extraction** - Validates no tokens were invented

### Strict Enforcement

The skill enforces:
- **NO inventing tokens** - Every value must map to documented token
- **NO guessing components** - Every component must match documented pattern
- **Ask if uncertain** - Prompt user when mapping is unclear

---

## Maintenance

### When Design System Changes

1. Update Figma file
2. Re-run `/design-setup` to detect changes
3. Update token-mapping.md with new/changed tokens
4. Update component-patterns.md with new components

### Version Tracking

Add version notes to track design system evolution:

```markdown
## Changelog

### v2.0 (2024-01)
- Added new color palette (Primary → Brand)
- Updated button variants

### v1.0 (2023-06)
- Initial design system
````

---

## Templates

See `.flydocs/templates/design-system/` for:

- `token-mapping.md` - Template for token documentation
- `component-patterns.md` - Template for component documentation