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 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.
Design promptWithout captureWith capture
”Add a notification center”Generic notification dropdownNotification center that matches your nav style, uses your button variants, follows your spacing system, and fits your IA
Competitor benchmarkingPattern library buildingFeature 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.

​
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 InputFigr Chrome Extension
Screenshot uploads lose interaction contextCaptures live HTML structure and hierarchy
Text descriptions miss visual patternsUnderstands component relationships
Manual specification takes hoursReads styling patterns and tokens
Context gets lost in translationSees what you actually built