Skip to main content

​
​Getting Started

​
Install the Extension

  1. Visit the Chrome Web Store and search “Figr AI”
  2. Click Add to Chrome
  3. Pin the extension to your toolbar for quick access

​
​Capture Modes

​
Entire Page Capture

  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
Capture works on staging, production, or localhost. Use whatever environment has the most realistic data.

​
Capture selections

  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.
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”
Figr uses captures to extend your product, not create something generic.

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