<!-- skill: Figma UI | version: 1.0.0 | description: Auto-layout, components, prototyping and dev handoff in Figma | category: Video & Design -->
## Instructions
- Use frames with Auto-layout for every card, navbar, and section, never absolute positioning for responsive blocks.
- Set constraints (Left/Right, Top/Bottom, Scale) on all nested elements so resize behavior is predictable.
- Build components with variants for state (Default/Hover/Disabled) and boolean properties for icons and badges.
- Name layers semantically: `btn/primary/default`, `card/pricing/featured` — no `Rectangle 47` or `Group 12`.
- Define Color, Text, Effect, and Layout Grid styles first, then link all components to styles, never raw hex.
- Use Variables for spacing (4/8/12/16/24/32), radius (4/8/16/full), and semantic colors (bg/surface/border/action).
- Design at 1440px desktop and 390px mobile frames side-by-side, test Auto-layout wrapping at 768px.
- Prototype with Smart Animate for page transitions, Instant for toggles, and Overflow scroll for modals and drawers.
- Keep type scales to 4-6 sizes max, line-height 1.2 for headings and 1.5 for body, letter-spacing -2% on display.
- Prepare dev handoff: mark Ready for Dev, add descriptions, export settings, and link flows in a dedicated Cover page.
- Run Find/Replace and Plugins > Similayer to dedupe styles before handoff, keep file under 50 pages.
- Never detach instances to tweak; fix the main component or add a variant instead.
## Examples
- Navbar: Frame 1440x72 Auto-layout horizontal, logo left, links center, CTA right, constraints Left+Right.
- Pricing card: Vertical Auto-layout 16px gap, variant `featured=true` adds border-accent + shadow-lg + badge.
- Mobile nav prototype: Tap hamburger > Smart Animate 300ms Ease-Out to drawer overlay with background dim.
## Workflows
### 1. Component-first UI build
1. Create Styles + Variables (color, type, spacing, radius, shadows).
2. Build atoms (button, input, badge) as components with variants.
3. Compose molecules (navbar, card, form row) using Auto-layout.
4. Assemble pages from molecules, duplicate for breakpoints.
5. Prototype key flows, add dev notes, mark Ready for Dev.
### 2. Dev handoff prep
1. Rename layers, resolve red missing-font warnings.
2. Set export presets: PNG 2x for raster, SVG for icons, PDF for decks.
3. Add Inspect notes: spacing tokens, interaction specs, edge cases.
4. Share View-only Inspect link + version note in commit message.
## Templates
```text
Figma file structure:
Cover / 00-Foundations (styles/variables) / 01-Components / 02-Patterns / 03-Pages-Desktop / 04-Pages-Mobile / 05-Prototype / 99-Archive
Component checklist:
[ ] Auto-layout applied [ ] Constraints set [ ] Variants named [ ] Props typed [ ] Description filled [ ] Export preset set
Handoff spec:
Frame: Checkout-1440 | Flow: Guest checkout | Annotations: error states, empty cart, loading | Exports: logo.svg, hero.png 2x
```
## Tools
- Figma Auto-layout, Constraints, Variants, Variables, Styles, Inspect, Dev Mode.
- Plugins: Autoflow, Similayer, Stark (contrast), Content Reel, Figma Tokens, Unsplash.
- Companions: FigJam for IA, Maze for testing, Zeplin/Storybook for implementation parity.
## Advanced
- Use slot components and nested instances to swap icons without breaking overrides.
- Tokenize with Variables + Modes (Light/Dark, Brand A/B) and export via Tokens Studio JSON.
- Optimize large files: flatten images, use components over copies, split into libraries by domain.
- Document interaction specs: duration 200-300ms, easing Ease-Out, Smart Animate for position/size only.
## Documentation
- Figma Help: Auto-layout, Variants, Variables, Prototyping, Dev Mode Inspect.
- Material 3 Guidelines + Apple HIG for spacing, touch targets (min 44px), and type ramps.
- Internal: link library file URL, version changelog, and Ready-for-Dev criteria in team wiki.
### QA checklist
- [ ] All frames use Auto-layout, no stray absolute groups in responsive zones.
- [ ] Styles linked (0 detached), variables for spacing/radius/color applied.
- [ ] Prototype flows connected, overflow scrolling set, no dead-end frames.
- [ ] Export presets set (SVG icons, PNG 2x images), Inspect notes complete.
- [ ] Contrast AA on text/buttons, focus states designed, touch targets 44px+.
- [ ] File cover updated with version, changelog entry, reviewer tagged.
### Handoff snippet
```text
Dev handoff: link Inspect URL + flow video (30s) + tokens JSON export.
Tokens: color.action #4F46E5, spacing.4=16px, radius.md=8px, shadow.card y4 blur16 16%.
Edge cases: empty cart, 404, loading skeleton 800ms shimmer, error toast 4s.
```
- Pair with typography-type for scale tokens and print-preflight for CMYK exports.
- Complements canva-brand libraries: import brand hex as Figma styles, keep naming parity.