# Figma Image Mapping — Sleep + Recovery

> Map of every Sleep + Recovery asset → Figma component reference.

## Figma master file (when created)

`https://figma.com/file/[TBD]/Sleep+Recovery-SETU-2026`

## Component library

| Component | Figma slug | Source asset |
|---|---|---|
| Canonical pack | `pack/canonical-sachet` | `_team-canonical-sleep-recovery-magnesium/v1/02-sachet-solo.png` |
| Canonical box | `pack/canonical-box` | `_team-canonical-sleep-recovery-magnesium/v1/01-pdp-hero-packshot.jpg` |
| Hero packshot | `hero/product-hero` | `pdp/1x1/product-hero.jpg` |
| Pack on bedside | `lifestyle/bedside` | `pdp/1x1/lifestyle-morning.jpg` |
| Pack pour into glass | `motion/pour` | `pdp/1x1/taste-experience.jpg` |
| Ingredient flatlay | `ingredient/flatlay` | `pdp/1x1/ingredient-breakdown.jpg` |
| Mechanism diagram | `diagram/4-pathway` | `pdp/1x1/secret-mechanism.jpg` |
| Trust badge set | `trust/6-badges` | `pdp/1x1/trust-credibility.jpg` |
| Founder portrait | `people/founder` | `pdp/1x1/ai-spokesperson.jpg` |
| Customer (Priya) | `people/ugc-priya` | `ad-creative/v1-canonicals/lane-3-ugc/3.1-priya-bangalore_1x1.jpg` |

## Variants

Each component has variants for:
- Ratio: 1:1, 4:5, 9:16, 16:9
- Use: Web, Email, Social, Amazon
- State: Default, Hover (for web only)

## How to use in Figma

1. Drag component instance into frame
2. Modify text overrides (headline, caption)
3. Adjust position + scale within frame
4. Pack design ITSELF is locked (cannot edit)
5. Export at @1x, @2x, @3x for web

## Update workflow

When a new SETU canonical asset lands:
1. Upload to `_team-canonical-sleep-recovery-magnesium/v[N]/`
2. Update this mapping doc
3. Replace Figma component master
4. All instances auto-update

## Brand component library

Inherits from SETU master Figma file:
- Type styles (NeueMontreal weights)
- Color tokens (purple gradient)
- Button states
- Form elements
- Cart components