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

<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.