# Figma to code, powered by AI.

Connect Figma and camelAI builds living design system documentation, component browsers, and handoff portals your whole team can use — not just designers.

## Design System — Components

### Color Tokens

- **Primary**
  - Dark
  - Light
- **Success**
- **Info**
- **Warning**
- **Error**

### Components

- **Button**  
  6 variants
- **Input**  
  4 variants
- **Card**  
  3 variants

### Type Scale

- Display32/40 · -0.02em
- Heading24/32 · -0.01em
- Body16/24 · 0em
- Caption12/16 · 0.01em

## From canvas to code. Automatically.

Your Figma components become a live documentation website. camelAI reads your design system through Figma's API and builds an app your entire team can reference.

### Figma Canvas

```html
<Button>
  Primary
  Secondary
</Button>
<Avatar>
  JD
  AK
  MR
</Avatar>
<Badge>
  Active
  Pending
</Badge>
<Toggle>
  On
</Toggle>
```

A clickable element that triggers actions. Available in primary, secondary, outline, and ghost variants.

### Every token, documented and shareable.

Colors, typography, spacing — your design tokens rendered as a beautiful, browsable reference. Developers copy values directly. Designers see the system they built, live.

#### Color Tokens

- **Purple / 50**  `#F5EEFF`
- **Purple / 100** `#E8D5FF`
- **Purple / 200** `#D4ABFF`
- **Purple / 300** `#BD80FF`
- **Purple / 400** `#A259FF`
- **Purple / 500** `#8B3FDB`
- **Purple / 600** `#6C2FB5`
- **Purple / 700** `#4F2190`
- **Purple / 800** `#371569`
- **Purple / 900** `#200C42`

#### Type Scale

- Display 32px / 40px
- Heading 1 24px / 32px
- Heading 2 20px / 28px
- Heading 3 16px / 24px
- Body 14px / 20px
- Caption 12px / 16px

#### Spacing Scale

- `2`
- `2px`
- `4`
- `4px`
- `8`
- `8px`
- `12`
- `12px`
- `16`
- `16px`
- `24`
- `24px`
- `32`
- `32px`
- `48`
- `48px`

## A component library your whole team can browse.

Search, filter, and preview every component in your design system. Variant tables, usage examples, and live previews — generated directly from Figma.

## What you can build.

### Living Design System Docs

Auto-generated documentation site from your Figma components. Every component, token, and guideline — always current, always shareable.

### Component Usage Analytics

Track which components are used across your Figma files — adoption rates, outdated instances, and detached components at a glance.

#### Component Usage

- **Instances**: 2,847
- **Adoption**: 94%

### Design Handoff Portal

Specs, annotations, and assets — auto-extracted from Figma. Developers get pixel-perfect details without back-and-forth.

### Brand Asset Library

A searchable, downloadable asset library built from your Figma files. Logos, icons, illustrations — anyone on the team can find what they need.

## Design and development, finally in sync.

### Updates in Figma

The designer updates components, tokens, or screens in Figma — working in the tool they already love.

### Extracts and builds

camelAI connects to the Figma API, reads component data, tokens, and assets, and generates a live documentation app.

### Builds with confidence

Developers reference the live docs site for specs, tokens, and assets. No more guessing or inspecting screenshots.

## What will your team build?

Connect to our Figma design system and build a documentation site. Show every component with live examples, variant tables, and usage guidelines. Auto-update when we push changes in Figma.