maddiedreese_figma/references/export-formats.md

# Export Formats and Specifications

Complete guide to Figma export options, formats, and optimization strategies for different use cases.

## Supported Export Formats

### Raster Formats

#### PNG (Portable Network Graphics)
**Best for:** UI elements, icons with transparency, screenshots

**Characteristics:**
- Lossless compression
- Supports transparency
- Larger file sizes than JPG
- Perfect for designs with sharp edges

**Use cases:**
- App icons and UI elements
- Logos with transparency
- Screenshots and mockups
- Print materials requiring transparency

**Export settings:**
- Scale: 1x, 2x, 3x, 4x
- Recommended: 2x for web, 3x for mobile apps
- Transparent backgrounds supported

#### JPG (Joint Photographic Experts Group)
**Best for:** Photographs, complex images, web optimization

**Characteristics:**
- Lossy compression
- Smaller file sizes
- No transparency support
- Good for photographic content

**Use cases:**
- Hero images and photography
- Marketing materials
- Email templates
- Web banners where file size matters

**Export settings:**
- Quality levels available in some tools
- Automatic white background fill
- Scale options: 1x, 2x, 4x

#### WEBP
**Best for:** Web optimization, modern browsers

**Characteristics:**
- Superior compression to PNG/JPG
- Supports transparency and animation
- Smaller file sizes
- Not supported in all browsers

**Use cases:**
- Web assets for modern browsers
- Progressive web apps
- Performance-critical applications

### Vector Formats

#### SVG (Scalable Vector Graphics)
**Best for:** Icons, simple illustrations, scalable graphics

**Characteristics:**
- Infinitely scalable
- Small file sizes for simple graphics
- Editable code
- Supports interactive elements

**Use cases:**
- Icon libraries
- Simple illustrations
- Logos for web use
- Scalable graphics

**Export options:**
- `svg_include_id`: Include node IDs for manipulation
- `svg_simplify_stroke`: Optimize stroke paths
- Text handling: Convert to paths vs keep as text

#### PDF (Portable Document Format)
**Best for:** Print materials, presentations, documentation

**Characteristics:**
- Vector-based when possible
- High quality for print
- Preserves text and formatting
- Universal compatibility

**Use cases:**
- Print marketing materials
- Presentations
- Documentation handoff
- High-quality mockups

**Export settings:**
- Vector elements preserved when possible
- Raster elements included at appropriate resolution
- Text can remain selectable

## Export Scales and Resolutions

### Device Pixel Ratios

#### 1x (Standard Resolution)
- **Use for:** Web designs, standard monitors
- **Pixel density:** 96 DPI
- **File size:** Smallest
- **Quality:** Standard

#### 2x (High-DPI)
- **Use for:** Retina displays, high-DPI web
- **Pixel density:** 192 DPI
- **File size:** 4x larger than 1x
- **Quality:** Sharp on high-DPI screens

#### 3x (Mobile High-DPI)
- **Use for:** iPhone Plus, Android high-end devices
- **Pixel density:** 288 DPI
- **File size:** 9x larger than 1x
- **Quality:** Extremely sharp mobile displays

#### 4x (Maximum Resolution)
- **Use for:** Future-proofing, print materials
- **Pixel density:** 384 DPI
- **File size:** 16x larger than 1x
- **Quality:** Maximum detail

### Platform-Specific Recommendations

#### iOS Apps
- **1x:** iPhone 3GS and older (rarely needed)
- **2x:** iPhone 4-8, iPad non-Retina
- **3x:** iPhone 6 Plus and newer large iPhones
- **Required:** All three scales for App Store submission

#### Android Apps
- **ldpi (0.75x):** Low-density screens (rarely used)
- **mdpi (1x):** Medium-density baseline
- **hdpi (1.5x):** High-density screens
- **xhdpi (2x):** Extra high-density
- **xxhdpi (3x):** Extra extra high-density
- **xxxhdpi (4x):** Highest density screens

#### Web Development
- **1x:** Base resolution for all browsers
- **2x:** For `@2x` media queries and Retina displays
- **Consider WEBP:** For modern browsers with fallback

## Asset Organization Strategies

### Folder Structure

#### By Platform
```
assets/
├── web/
│   ├── 1x/
│   ├── 2x/
│   └── icons/
├── ios/
│   ├── 1x/
│   ├── 2x/
│   └── 3x/
└── android/
    ├── ldpi/
    ├── mdpi/
    ├── hdpi/
    ├── xhdpi/
    ├── xxhdpi/
    └── xxxhdpi/
```

#### By Component Type
```
assets/
├── icons/
│   ├── navigation/
│   ├── actions/
│   └── status/
├── images/
│   ├── heroes/
│   ├── thumbnails/
│   └── placeholders/
└── logos/
    ├── full-color/
    ├── monochrome/
    └── reversed/
```

### Naming Conventions

#### Descriptive Naming
```
✅ Good:
- icon-search-24px.svg
- button-primary-large@2x.png
- hero-homepage-1200w.jpg

❌ Bad:
- icon1.svg
- button.png
- image.jpg
```

#### Platform Conventions

**iOS:**
```
icon-name.png      (1x)
icon-name@2x.png   (2x)  
icon-name@3x.png   (3x)
```

**Android:**
```
ic_name.png        (mdpi)
ic_name_hdpi.png   (hdpi)
ic_name_xhdpi.png  (xhdpi)
ic_name_xxhdpi.png (xxhdpi)
```

**Web:**
```
icon-name.svg      (vector)
icon-name.png      (1x fallback)
icon-name@2x.png   (2x for Retina)
```

## Optimization Techniques

### File Size Optimization

#### PNG Optimization
- **Reduce colors:** Use 8-bit when possible instead of 24-bit
- **Remove metadata:** Strip EXIF data and comments
- **Optimize palettes:** Use indexed color for simple graphics
- **Tools:** TinyPNG, ImageOptim, OptiPNG

#### JPG Optimization
- **Quality settings:** 80-90% for most use cases
- **Progressive JPEG:** Better perceived loading
- **Appropriate dimensions:** Don't export larger than needed
- **Tools:** JPEGmini, ImageOptim, MozJPEG

#### SVG Optimization
- **Simplify paths:** Remove unnecessary points
- **Group similar elements:** Reduce code duplication
- **Remove unused definitions:** Clean up gradients, styles
- **Tools:** SVGO, SVGOMG, Figma's built-in optimization

### Performance Considerations

#### Image Dimensions
- **Web images:** No larger than container size
- **2x images:** Exactly 2x the display size
- **Responsive images:** Multiple sizes for different breakpoints
- **Lazy loading:** Consider loading strategies

#### Format Selection Decision Tree
```
Is it a photograph or complex image?
├── Yes → JPG (or WEBP for modern browsers)
└── No → Does it need transparency?
    ├── Yes → PNG (or SVG if simple)
    └── No → JPG for web, PNG for UI elements
```

## Design Handoff Specifications

### Developer Handoff Assets

#### Complete Asset Package
1. **All required scales:** Platform-specific requirements
2. **Multiple formats:** SVG + PNG fallbacks for icons
3. **Organized structure:** Clear folder organization
4. **Naming documentation:** Explain naming conventions
5. **Usage guidelines:** When to use each asset

#### Asset Specifications Document
```
Asset Name: primary-button-large
Formats Available: PNG (1x, 2x, 3x), SVG
Dimensions: 
- 1x: 120x44px
- 2x: 240x88px  
- 3x: 360x132px
Usage: Primary call-to-action buttons
States: Default, Hover, Active, Disabled
```

### Design System Documentation

#### Component Assets
- **Multiple states:** Default, hover, active, disabled, loading
- **Size variations:** Small, medium, large
- **Theme variations:** Light mode, dark mode
- **Context usage:** When and where to use each variation

#### Icon Libraries
- **Consistent sizing:** 16px, 24px, 32px standard sizes
- **Stroke weights:** Consistent line thickness across set
- **Style coherence:** Same visual style for entire set
- **Semantic grouping:** Organize by function or category

## Batch Export Strategies

### Figma Export Tips

#### Selection-Based Export
1. Select multiple frames/components
2. Use export panel for batch settings
3. Apply same settings to all selected items
4. Export to organized folder structure

#### Component-Based Workflow
1. Create export-ready components
2. Use consistent naming for automatic organization
3. Set up export settings as part of component definition
4. Use plugins for advanced batch operations

### Automation Opportunities

#### Script-Based Export
- **Figma API:** Programmatic export control
- **Custom tools:** Build specific export workflows
- **Batch processing:** Handle hundreds of assets efficiently
- **Quality assurance:** Automated optimization and validation

#### CI/CD Integration
- **Automated exports:** Trigger on design updates
- **Asset deployment:** Push directly to CDN or asset pipeline
- **Version control:** Track asset changes alongside code
- **Optimization pipeline:** Automatic image optimization

## Special Use Cases

### App Store Assets

#### iOS App Store
- **App icons:** 1024x1024px for store, various sizes for app
- **Screenshots:** Device-specific dimensions
- **Requirements:** No transparency, specific format requirements
- **Validation:** App Store Connect validation rules

#### Google Play Store
- **Feature graphic:** 1024x500px
- **Screenshots:** Various device categories
- **App icons:** 512x512px high-res icon
- **Requirements:** Specific aspect ratios and content guidelines

### Print Materials

#### Print Specifications
- **Resolution:** 300 DPI minimum for professional printing
- **Color mode:** CMYK for print, RGB for digital
- **Bleed areas:** Extra space beyond trim line
- **Safe areas:** Keep important content away from edges

#### Export Settings
- **PDF format:** Preferred for print handoff
- **High resolution:** Use 4x scale or higher
- **Color profiles:** Include ICC profiles when possible
- **Vector preservation:** Maintain vector elements where possible

### Email Templates

#### Email Constraints
- **Image blocking:** Many clients block images by default
- **File size limits:** Keep images under 100KB when possible
- **Fallback text:** ALT text for accessibility
- **Dimensions:** Consider mobile email clients

#### Optimization Strategy
- **JPG for photos:** Smaller file sizes
- **PNG for UI elements:** Crisp edges and transparency
- **Inline critical images:** Small logos and icons
- **CDN hosting:** Fast loading from reliable servers

## Quality Assurance

### Export Validation

#### Visual Inspection
- **Compare to original:** Side-by-side comparison
- **Different scales:** Verify all export scales look correct
- **Multiple devices:** Test on target devices/browsers
- **Print proofs:** Physical proofs for print materials

#### Technical Validation
- **File sizes:** Reasonable for intended use
- **Dimensions:** Correct pixel dimensions
- **Format compatibility:** Works in target environments
- **Color accuracy:** Colors match design intent

### Testing Workflows

#### Cross-Platform Testing
- **Multiple browsers:** Chrome, Firefox, Safari, Edge
- **Different devices:** iOS, Android, various screen sizes
- **Operating systems:** macOS, Windows, Linux
- **Assistive technology:** Screen readers, high contrast modes

#### Performance Testing
- **Load times:** Measure actual loading performance
- **Bandwidth testing:** Test on slow connections
- **Caching behavior:** Verify proper caching headers
- **CDN performance:** Test global delivery speeds