> ## 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.
# Screenshots & Images
> Upload screenshots and images to build Figr's visual understanding of your product and design context.
# Screenshots & Images
Visual context is crucial for product-aware design. Screenshots and images help Figr understand your existing product, design patterns, and visual brand language.
**Visual learning:** A few well-chosen screenshots often teach Figr more about your product than pages of written description.
## Types of Visual Assets
**Most valuable for product context:**
**What to capture:**
```
✅ Main dashboard or home screen
✅ Primary user workflows (login → core task → completion)
✅ Navigation patterns and menu structures
✅ Form layouts and input patterns
✅ Data visualization and content layouts
✅ Mobile responsive views
```
**Why these matter:** Figr learns your actual design patterns, not just design system documentation
**Capture different interface states:**
```
✅ Empty states (no data, new user experience)
✅ Loading states (spinners, skeleton screens)
✅ Error states (validation errors, system errors)
✅ Success states (confirmations, completed actions)
✅ High-data states (full tables, long lists)
✅ Different user permission levels
```
**Learning value:** Figr understands your complete interaction design system
**Show complete workflows:**
```
Example: E-commerce Purchase Flow
1. Product browsing page
2. Product detail view
3. Add to cart confirmation
4. Shopping cart review
5. Checkout form
6. Payment processing
7. Order confirmation
```
**Context gained:** How your users actually move through your product
**Visual design system documentation:**
**Upload images of:**
* Button variations and states
* Form component examples
* Navigation pattern screenshots
* Card and layout components
* Typography scale examples
* Icon library grids
**Value:** Figr learns your actual component usage, not just specs
**Upload images of:**
* Color palette examples
* Logo usage guidelines
* Typography in context
* Photography style examples
* Illustration style guides
* Brand application examples
**Value:** Figr understands your visual brand language
**Pro tip:** Screenshots of components in actual use are more valuable than isolated component documentation. They show Figr how components work together.
**Inspiration and competitive context:**
**Screenshots from competitors showing:**
* Features you want to match or exceed
* Interaction patterns that work well
* Design approaches to avoid
* Industry standard patterns
**Usage by Figr:** Understands your competitive context and industry norms
**Visual references for:**
* Layout ideas and patterns
* Visual design directions
* Interaction concepts
* Animation and motion examples
**Usage by Figr:** Expands design vocabulary while staying true to your brand
**Screenshots from research:**
* User testing session recordings
* Heat map visualizations
* Analytics dashboard screenshots
* Survey result visualizations
**Usage by Figr:** Understands actual user behavior and preferences
## Upload Methods
**Fastest method for multiple images:**
**Supported formats:**
```
✅ PNG (best for UI screenshots)
✅ JPG (good for photographs, smaller files)
✅ SVG (perfect for logos and icons)
✅ WebP (modern format, great compression)
✅ GIF (for simple animations)
```
**Tips for best results:**
* Use PNG for crisp UI screenshots
* Compress large images before upload
* Group related screenshots in one upload session
**Pull images directly from web sources:**
```
Supported sources:
✅ Direct image URLs (.png, .jpg, etc.)
✅ Figma shared prototypes
✅ InVision prototype links
✅ Adobe XD share links
✅ Sketch Cloud sharing links
✅ Public design portfolio pages
```
**Perfect for:**
* Importing from existing design tools
* Sharing competitive analysis screenshots
* Pulling from design inspiration sites
**Capture screenshots directly:**
**Coming soon:** Figr browser extension for one-click screenshot capture with automatic context tagging.
**Planned features:**
* Full page screenshots
* Element-specific captures
* Automatic annotation with page context
* Direct upload to your Figr project
**Import from mobile devices:**
```
Methods:
✅ AirDrop (iOS to Mac)
✅ Google Photos sync
✅ Dropbox/Drive integration
✅ Email screenshots to project
✅ QR code upload link
```
**Use cases:**
* Mobile app screenshots
* In-context user testing photos
* Real-world usage documentation
## Image Organization & Tagging
**Figr intelligently organizes uploaded images:**
**Automatic detection:**
```
📱 Mobile interface screenshots
💻 Desktop application views
📊 Data visualization and charts
📝 Form and input interfaces
🎨 Design system components
🏢 Brand and marketing materials
```
**Smart tagging:** Figr adds relevant tags based on visual content analysis
**Related images grouped by:**
* Similar visual elements (color schemes, layouts)
* Sequential workflow steps
* Product area or feature category
* Upload session and date
* Device type and screen size
**Benefit:** Easy to find related examples when designing
**Figr evaluates image usefulness:**
```
🟢 High quality: Clear, relevant, good resolution
🟡 Medium quality: Useful but some limitations
🔴 Low quality: Blurry, irrelevant, or poor resolution
```
**Suggestions:** Figr recommends better alternatives when available
**Custom organization options:**
**Organize by purpose:**
```
#current-product
#competitor-analysis
#design-inspiration
#user-research
#mobile-specific
#desktop-only
#accessibility-example
#error-state
```
**Group by project or feature:**
```
📁 Dashboard Redesign
📁 Mobile App Launch
📁 Checkout Optimization
📁 Design System V2
```
**Batch operations:**
* Tag multiple images at once
* Move groups to different projects
* Bulk export or archive
* Mass annotation updates
**Find images quickly:**
```
Search examples:
"mobile checkout flow"
"error state with red styling"
"dashboard with sidebar navigation"
"form validation examples"
"competitor login page"
```
**Advanced search:**
* Visual similarity search
* Color-based filtering
* Device type filtering
* Date range search
* Project-specific search
## Image Analysis & Learning
**Visual intelligence:** Figr analyzes your images to understand design patterns, extract design tokens, and learn your visual language.
**What Figr extracts from screenshots:**
```
✅ Grid systems and spacing
✅ Navigation placement and structure
✅ Content hierarchy and organization
✅ Responsive breakpoint behaviors
✅ Component arrangement patterns
```
```
✅ Color palette usage and patterns
✅ Typography scales and hierarchies
✅ Border radius and shadow patterns
✅ Icon style and usage conventions
✅ Photography and illustration styles
```
```
✅ Button styles and states
✅ Link styling and hover effects
✅ Form input designs and validation
✅ Loading and progress indicators
✅ Call-to-action prominence patterns
```
**Automatic design system detection:**
**Extracted tokens:**
```css theme={null}
/* Colors found in screenshots */
--primary-blue: #2563eb;
--success-green: #10b981;
--warning-orange: #f59e0b;
/* Typography patterns */
--heading-font: "Inter", sans-serif;
--body-font: "Inter", sans-serif;
--heading-scale: 1.25;
/* Spacing patterns */
--space-unit: 8px;
--component-padding: 16px;
--section-gap: 32px;
```
**Learning from image context:**
**From user testing screenshots:**
* Where users look first (attention patterns)
* Common interaction mistakes
* Successful task completion flows
* Device and context usage patterns
**From product screenshots:**
* Feature prominence and hierarchy
* Content organization principles
* User type differences
* Conversion-focused design elements
**From implementation screenshots:**
* Component reuse patterns
* Performance optimization choices
* Responsive design approaches
* Accessibility implementation examples
## Best Practices for Screenshot Success
**For maximum learning value:**
✅ **High resolution** (at least 1920px wide for desktop)
✅ **Clean screenshots** (close dev tools, hide personal info)
✅ **Representative data** (realistic content, not Lorem ipsum)
✅ **Multiple devices** (desktop, tablet, mobile views)
✅ **Complete flows** (beginning to end of user journeys)
**Add helpful annotations:**
✅ **Describe the purpose** ("Main dashboard for marketing managers")
✅ **Note special conditions** ("Peak usage state", "Error scenario")
✅ **Explain variations** ("Enterprise vs. standard user view")
✅ **Highlight key elements** ("Primary CTA", "Navigation pattern")
✅ **Document constraints** ("Must work on IE11", "508 compliant")
### Common Screenshot Mistakes
**Problem:** Screenshots of empty states or demo data
**Solution:** Use realistic, representative content that shows actual usage patterns
**Bad:** Empty dashboard with placeholder text
**Good:** Dashboard with realistic data showing typical user scenarios
**Problem:** Screenshots from different product versions or contexts
**Solution:** Organize by product version and clearly label context
**Bad:** Mixing old and new interface versions
**Good:** Clear labeling: "Current production", "Beta version", "Proposed redesign"
**Problem:** Only showing happy path screenshots
**Solution:** Include error states, loading states, and edge cases
**Bad:** Only success scenarios
**Good:** Complete state coverage including errors and empty states
## Integration with Other Input Methods
**Combined power:** Screenshots work best when combined with other Figr input methods for complete product context.
Use screenshots for reference, screen sharing for understanding workflows and interactions
Combine interface screenshots with actual data structures for realistic designs
Pair visual examples with written specifications for complete context
***
Discover how to import structured data to make your designs more realistic and contextually accurate.
[CSV & Excel Import →](/designing/input/csv-excel-import)