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

# What Is Figr

<iframe src="https://www.youtube.com/embed/byk5EnwAgSg" title="Complete product walkthrough" frameBorder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen />

Figr is an AI product design agent. It reads the context that already defines your product, your screens, recordings, docs, links, and design system, and uses it to design new flows and screens that fit what you have already built. Most AI tools jump straight from a prompt to a screen. Figr works the way a senior product team does. It starts from context, reasons through the UX, produces the product artifacts behind a good design, and only then generates a high-fidelity, Figma-ready result.

<Note>
  Figr is built for working inside existing products, not only for zero-to-one mockups. The more product context you give it, the more your output looks like your product instead of a generic template.
</Note>

## What you can do with Figr

<CardGroup cols={2}>
  <Card title="Add product context" icon="layer-group" href="/getting-started/setup/add-product-context">
    Bring in screens, recordings, docs, and links so Figr understands your product.
  </Card>

  <Card title="Design product-aware UI" icon="pen-ruler" href="/getting-started/welcome/product-aware-designing">
    Generate flows and screens grounded in your design system and real context.
  </Card>

  <Card title="Work on an infinite canvas" icon="grip" href="/canvas/canvas-overview">
    Keep inputs, reviews, flows, PRDs, and prototypes together in one space.
  </Card>

  <Card title="Hand off to Figma and code" icon="arrow-up-right-from-square" href="/export/figma">
    Export to Figma (auto layout, tokens, components), publish and get code
  </Card>
</CardGroup>

## Where to start

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/getting-started/setup/creating-your-account">
    The fastest path from signup to your first generated prototype.
  </Card>

  <Card title="Understand the workflow" icon="diagram-project" href="/getting-started/tutorial/understanding-workflow">
    See the full path from context to a refined, exported design.
  </Card>
</CardGroup>
