Skip to main content

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

​
Types of Visual Assets

  • Product Screenshots
  • Design System Assets
  • Reference Materials
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
Examples of effective product screenshots showing navigation, forms, and data layouts
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

​
Upload Methods

1

Drag & Drop Upload

Fastest method for multiple images:
Figr interface showing drag and drop area for uploading 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
2

URL Import

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
3

Browser Extension

Capture screenshots directly:Planned features:
  • Full page screenshots
  • Element-specific captures
  • Automatic annotation with page context
  • Direct upload to your Figr project
4

Mobile App Sync

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

  • Automatic Categorization
  • Manual Organization
  • Search & Discovery
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

​
Image Analysis & Learning

1

Design Pattern Recognition

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
2

Design Token Extraction

Automatic design system detection:
Interface showing how Figr extracts colors, fonts, and spacing from uploaded screenshots
Extracted tokens:
/* 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;
3

Contextual Understanding

Learning from image context:
  • User Behavior Insights
  • Business Context
  • Technical Constraints
From user testing screenshots:
  • Where users look first (attention patterns)
  • Common interaction mistakes
  • Successful task completion flows
  • Device and context usage patterns

​
Best Practices for Screenshot Success

Quality Guidelines

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)

Context Enhancement

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 patternsBad: 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 contextBad: 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 casesBad: Only success scenarios Good: Complete state coverage including errors and empty states

​
Integration with Other Input Methods

1

Screenshots + Screen Sharing

Use screenshots for reference, screen sharing for understanding workflows and interactions
2

Screenshots + CSV Data

Combine interface screenshots with actual data structures for realistic designs
3

Screenshots + Documentation

Pair visual examples with written specifications for complete context

Learn About Data Integration

Discover how to import structured data to make your designs more realistic and contextually accurate.CSV & Excel Import →
⌘I