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:

Interface Screenshots

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

State Variations

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

User Journey Screenshots

Show complete workflows:

Example: E-commerce Purchase Flow
Product browsing page
Product detail view  
Add to cart confirmation
Shopping cart review
Checkout form
Payment processing
Order confirmation

Context gained: How your users actually move through your product

Upload Methods

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

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

Browser Extension

Capture screenshots directly:Planned features:

Full page screenshots
Element-specific captures
Automatic annotation with page context
Direct upload to your Figr project

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:

Content Recognition

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

Context Grouping

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

Quality Assessment

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:

Custom Tags

Organize by purpose:

#current-product
#competitor-analysis  
#design-inspiration
#user-research
#mobile-specific
#desktop-only
#accessibility-example
#error-state

Project Folders

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

Design Pattern Recognition

What Figr extracts from screenshots:

Layout Patterns

✅ Grid systems and spacing
✅ Navigation placement and structure
✅ Content hierarchy and organization
✅ Responsive breakpoint behaviors
✅ Component arrangement patterns

Visual Design Elements

✅ Color palette usage and patterns
✅ Typography scales and hierarchies
✅ Border radius and shadow patterns
✅ Icon style and usage conventions
✅ Photography and illustration styles

Interaction Cues

✅ Button styles and states
✅ Link styling and hover effects
✅ Form input designs and validation
✅ Loading and progress indicators
✅ Call-to-action prominence patterns

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;

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

Too Generic

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

Inconsistent Context

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”

Missing Key States

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

Screenshots + Screen Sharing

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

Screenshots + CSV Data

Combine interface screenshots with actual data structures for realistic designs

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 →

How to Begin?

Canvas

Inputs and Research

Product Intelligence

Export and Share

Security & Legal

Screenshots & Images

Screenshots & Images

Types of Visual Assets

Component Libraries

Brand Guidelines

Upload Methods

Image Organization & Tagging

Custom Tags

Project Folders

Image Analysis & Learning

Best Practices for Screenshot Success

Quality Guidelines

Context Enhancement

Common Screenshot Mistakes

Integration with Other Input Methods

Learn About Data Integration

​Screenshots & Images

​Types of Visual Assets

Component Libraries

Brand Guidelines

​Upload Methods

​Image Organization & Tagging

Custom Tags

Project Folders

​Image Analysis & Learning

​Best Practices for Screenshot Success

Quality Guidelines

Context Enhancement

​Common Screenshot Mistakes

​Integration with Other Input Methods

Learn About Data Integration

Screenshots & Images

Types of Visual Assets

Upload Methods

Image Organization & Tagging

Image Analysis & Learning

Best Practices for Screenshot Success

Common Screenshot Mistakes

Integration with Other Input Methods