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

# Chrome Extension

> Parse live web apps to give Figr deep understanding of your product's structure, components, and patterns.

## [​](#getting-started)Getting Started

### Install the Extension

1. Visit the [Chrome Web Store](https://chromewebstore.google.com/detail/figr-capture/bejnddahceggaeogmedenhaccoiikjmj) and search "Figr AI"
2. Click **Add to Chrome**
3. Pin the extension to your toolbar for quick access

## [​](#capture-modes)Capture Modes

### Entire Page Capture

<iframe src="https://www.youtube.com/embed/-RgWMfLZIMI" title="YouTube video player" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />

1. Navigate to any page in your product
2. Click the Figr extension icon
3. Select "Capture This Page"
4. Copy the captures
5. Paste the capture directly into Figr to start using

<Tip>
  **Capture works on staging, production, or localhost. Use whatever environment has the most realistic data.**
</Tip>

### Capture selections

<iframe src="https://www.youtube.com/embed/POQmqspcgIs" title="YouTube video player" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />

1. Navigate to any page in your product
2. Click the Figr extension icon
3. Select "Make selection"
4. Select the area you want to capture
5. Capture as many areas as required

### Capture Across Multiple Websites

Build context (sort of a moodboard) from multiple sources in a single session. Useful for competitor analysis, gathering inspiration, or combining patterns from best-in-class products. Multi-site workflow:

1. Open your Figr project
2. Navigate to first website → Capture
3. Open new tab, navigate to second website → Capture
4. Repeat for additional sites
5. All captures feed into the same project context

***

## Using Captures in Figr

Once captured, your product context flows into every conversation.

<AccordionGroup>
  <Accordion title="Reference in Prompts">
    Example prompts that leverage captures:

    * "Design a settings page that matches the navigation pattern from my dashboard capture"
    * "Create a form using the same validation approach I showed you in the checkout flow"
    * "Build a table component following the patterns from my existing data views"
  </Accordion>

  <Accordion title="Build on Existing">
    Figr uses captures to extend your product, not create something generic.

    | **Design prompt**           | **Without capture**           | **With capture**                                                                                                          |
    | --------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
    | "Add a notification center" | Generic notification dropdown | Notification center that matches your nav style, uses your button variants, follows your spacing system, and fits your IA |
  </Accordion>

  <Accordion title="Market & competitive research">
    | **Competitor benchmarking**                                                                                                  | **Pattern library building**                                                                                                    | **Feature research**                                                                                                              |
    | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
    | Capture checkout flows from Stripe, Shopify, and Square. Ask Figr to design yours incorporating the best patterns from each. | Capture dashboard designs from Linear, Notion, and Figma. Build a reference set Figr can draw from for your own dashboard work. | Capture how 5 different products handle user onboarding. Ask Figr to analyze patterns and recommend an approach for your product. |
  </Accordion>
</AccordionGroup>

***

## Why Chrome Extension Works

Most design AI asks you to describe your product. **Figr sees your actual product.**

The Chrome extension captures the real HTML structure, component hierarchy, and visual layout of any web app. Not screenshots. Not descriptions. The actual thing.

| **Traditional Input**                       | **Figr Chrome Extension**                  |
| ------------------------------------------- | ------------------------------------------ |
| Screenshot uploads lose interaction context | Captures live HTML structure and hierarchy |
| Text descriptions miss visual patterns      | Understands component relationships        |
| Manual specification takes hours            | Reads styling patterns and tokens          |
| Context gets lost in translation            | Sees what you actually built               |

***