> ## Documentation Index
> Fetch the complete documentation index at: https://docs.chatandbuild.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Figma Integration

> Convert Figma designs to code with AI-powered design-to-code generation

## Overview

ChatAndBuild's Figma integration bridges the gap between design and development by automatically converting Figma designs into functional code. Import designs, generate components, and maintain design-to-code consistency with AI assistance.

## Features

<CardGroup cols={2}>
  <Card title="Design Import" icon="figma">
    Import Figma frames, components, and entire design files directly into ChatAndBuild.
  </Card>

  <Card title="Code Generation" icon="code">
    Generate React, Vue, or HTML components from Figma designs with pixel-perfect accuracy.
  </Card>

  <Card title="Asset Export" icon="image">
    Automatically export and optimize images, icons, and other assets from your designs.
  </Card>

  <Card title="Design System Sync" icon="palette">
    Maintain consistency between Figma design systems and code component libraries.
  </Card>
</CardGroup>

## Setting Up Figma Integration

### Connect Your Figma Account

<Steps>
  <Step title="Navigate to Integrations">
    Go to Settings > Connect Apps > Figma Connection and click "Connect".
  </Step>

  <Step title="Authorize Access">
    Sign in to Figma and authorize ChatAndBuild to access your files.
  </Step>
</Steps>

## Design Import Workflow

**Import specific design frames**:

<img src="https://mintcdn.com/chatandbuild-cfa8e63c/yMdc_EpmBKX61say/docs/images/Screenshot2025-08-26at12.16.29AM.png?fit=max&auto=format&n=yMdc_EpmBKX61say&q=85&s=0c56401f02e91e888d4729d37a4d0667" alt="Screenshot2025 08 26at12 16 29AM Pn" title="Screenshot2025 08 26at12 16 29AM Pn" style={{ width:"82%" }} width="1142" height="570" data-path="docs/images/Screenshot2025-08-26at12.16.29AM.png" />

1. **Select Framework**:  React of HTML
2. **Select UI Library**: None or Shadcn
3. **Language**: TypeScript or JavaScript
4. **Styling**: CSS or Tailwind

<Note>
  Looking for database integration? Check out our [Supabase Integration](/docs/integrations/supabase) guide, or return to [GitHub Integration](/docs/integrations/github) for version control.
</Note>