Skip to main content

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.

​
High-Resolution Image Export

Generate pixel-perfect assets for any platform or use case. Figr’s advanced export engine ensures your designs look crisp on every device and at every scale.

​
Export Formats and Quality

Pixel-based image exports:
Grid showing different export formats with quality comparisons
Format specifications:
PNG (Portable Network Graphics):
- Best for: UI elements, icons, screenshots
- Transparency: Full alpha channel support
- Quality: Lossless compression
- Use cases: App store screenshots, UI documentation

JPG/JPEG (Joint Photographic Experts Group):
- Best for: Photography, complex images
- Compression: Adjustable quality (60-95%)
- File size: Smaller than PNG for photos
- Use cases: Marketing materials, presentations

WebP (Web Picture format):
- Best for: Web optimization
- Features: Better compression than PNG/JPG
- Browser support: Modern browsers
- Use cases: Website assets, web applications

AVIF (AV1 Image File Format):
- Best for: Next-generation web
- Compression: Superior to WebP
- Support: Latest browsers
- Use cases: Progressive web enhancement

​
Resolution and Scaling

1

DPI and Pixel Density

Understanding resolution requirements:
Common DPI standards:

Web/Screen (72-96 DPI):
- Standard monitors: 96 DPI
- Retina displays: 192-288 DPI
- Mobile devices: 300-500+ DPI
- Export: @1x, @2x, @3x variants

Print (300 DPI):
- High-quality printing
- Professional publications
- Marketing materials
- Large format displays

Presentation (150 DPI):
- PowerPoint/Keynote slides
- Digital presentations
- Conference displays
- Document illustrations
2

Multi-Scale Export

Generate multiple resolutions simultaneously:
Interface showing batch export of multiple image sizes and formats
Batch export features:
Simultaneous generation:
- All required sizes at once
- Multiple format variants
- Platform-specific naming
- Organized folder structure

Quality consistency:
- Proportional scaling algorithms
- Edge sharpening optimization
- Color profile preservation
- Compression standardization

Automation benefits:
- Time-saving workflow
- Human error reduction
- Consistent output quality
- Streamlined asset delivery
3

Smart Optimization

AI-powered quality enhancement:
Intelligent processing:

UI elements:
- Sharp pixel alignment
- Icon grid snapping
- Text rendering optimization
- Interface element clarity

Photographic content:
- Noise reduction algorithms
- Detail preservation
- Color accuracy maintenance
- Compression artifact minimization

Illustrations:
- Vector path optimization
- Color gradient smoothness
- Shape edge refinement
- Artistic detail preservation

File size reduction:

Lossless optimization:
- Metadata removal
- Color palette optimization
- Redundant data elimination
- Encoding efficiency improvements

Lossy optimization (when appropriate):
- Perceptual quality maintenance
- Selective compression areas
- Detail importance weighting
- Quality/size balance optimization

​
Specialized Export Modes

Optimized for development workflow:

Code Integration

Developer-friendly exports:
  • CSS background-image ready
  • Sprite sheet generation
  • Icon font creation
  • Data URI encoding

Asset Organization

Structured file delivery:
  • Consistent naming conventions
  • Logical folder hierarchies
  • Platform-specific organization
  • Version control friendly
Development export structure:
/assets
├── /icons
│   ├── icon-name@1x.png
│   ├── icon-name@2x.png
│   └── icon-name@3x.png
├── /images
│   ├── hero-image.webp
│   ├── hero-image.jpg (fallback)
│   └── hero-image@2x.jpg
└── /graphics
    ├── logo.svg
    └── background-pattern.png

​
Advanced Export Features

1

Batch Processing

Efficient bulk export workflows:
Batch export interface showing multiple designs being processed simultaneously
Batch capabilities:
Multi-design export:
- Select multiple artboards
- Apply consistent settings
- Generate variants simultaneously
- Maintain quality standards

Template-based export:
- Save export configurations
- Apply templates to new designs
- Standardize team workflows
- Ensure consistency across projects

Automated scheduling:
- Set up recurring exports
- Version control integration
- Notification systems
- Quality assurance checks
2

Quality Control

Automated quality assurance:
Automatic quality checks:
- Resolution verification
- Color accuracy validation
- Edge sharpness assessment
- Compression artifact detection

Comparison tools:
- Before/after quality comparison
- Zoom inspection capabilities
- Pixel-level accuracy checking
- Color difference analysis
3

Delivery Integration

Streamlined asset delivery:
Cloud storage integration:
- Dropbox, Google Drive, OneDrive
- Automatic folder organization
- Team access management
- Version history preservation

Development tool integration:
- Git repository uploads
- CDN direct uploads
- CI/CD pipeline integration
- Asset management systems

Collaboration features:
- Stakeholder notification
- Download link generation
- Access permission management
- Usage tracking and analytics

​
Best Practices

Quality Optimization

Maximize visual quality:✅ Use vector formats when possible ✅ Export at appropriate resolutions ✅ Optimize compression settings ✅ Maintain color accuracy ✅ Test across target devices

Workflow Efficiency

Streamline export processes:✅ Set up export templates ✅ Use batch processing features ✅ Organize assets systematically ✅ Automate repetitive tasks ✅ Integrate with existing tools

​
Troubleshooting Export Issues

Issue: Exported images appear blurry or pixelated
Solutions:
- Increase export resolution
- Use vector formats when possible
- Check source design quality
- Verify scaling algorithms

Issue: Exported files are too large
Solutions:
- Adjust compression settings
- Use appropriate formats (WebP, AVIF)
- Optimize image content
- Consider progressive loading

Issue: Colors don't match original design
Solutions:
- Check color profile settings
- Verify monitor calibration
- Use consistent color spaces
- Test on target devices

Ship-Ready Designs

Learn how to prepare complete, production-ready design packages for development teams.Ship-Ready Designs →