# When to Extract Prototypes to Figma - Decision Guide

**Purpose:** Help designers decide when to extract HTML prototypes to Figma for visual refinement.

**Quick Answer:** Extract when the design system is incomplete and the prototype needs visual polish.

---

## Decision Tree

```
Prototype Created
      ↓
Does it look polished?
      ↓
    ┌─────┴─────┐
   YES          NO
    ↓            ↓
Complete    Is design system incomplete?
              ↓
            ┌─────┴─────┐
           YES          NO
            ↓            ↓
      Extract to    Quick CSS fixes
         Figma      sufficient
            ↓
      Refine design
            ↓
      Update design system
            ↓
      Re-render prototype
            ↓
      Iterate or Complete
```

---

## Quick Assessment Checklist

### ✅ Extract to Figma if:

- [ ] Prototype not visually appealing or unpolished
- [ ] Design system missing components for this view
- [ ] Need to define new design tokens (colors, spacing, typography)
- [ ] Stakeholder presentation requires high-fidelity
- [ ] Multiple similar components need standardization
- [ ] Visual hierarchy unclear
- [ ] Spacing/alignment inconsistent

### ❌ Don't Extract if:

- [ ] Prototype already looks good
- [ ] Design system covers all needs
- [ ] Still validating functionality
- [ ] Rapid iteration more important than polish
- [ ] Early exploration phase
- [ ] Internal testing only

---

## Scenarios

### Scenario 1: First Page in Project

**Situation:** Creating first prototype, design system is empty

**Decision:** ✅ **Extract to Figma**

**Reason:** Need to establish design foundation
- Define color palette
- Set typography scale
- Create spacing system
- Build first components

**Workflow:**
1. Create basic prototype (functional)
2. Extract to Figma
3. Define complete design system
4. Re-render with design system
5. Use for all subsequent pages

---

### Scenario 2: Similar to Existing Pages

**Situation:** Design system already has most components needed

**Decision:** ❌ **Don't Extract**

**Reason:** Design system sufficient
- Reuse existing components
- Apply existing tokens
- Minor variations can be CSS tweaks

**Workflow:**
1. Create prototype with design system
2. Test functionality
3. Make minor CSS adjustments if needed
4. Complete

---

### Scenario 3: New Component Type Needed

**Situation:** Page needs component type not in design system (e.g., data table)

**Decision:** ✅ **Extract to Figma**

**Reason:** Need to design new component properly
- Define component structure
- Create variants and states
- Document design tokens
- Add to design system

**Workflow:**
1. Create basic prototype
2. Extract to Figma
3. Design new component thoroughly
4. Add to design system
5. Re-render prototype
6. Component now available for future use

---

### Scenario 4: Stakeholder Presentation

**Situation:** Working prototype exists but looks basic, client review tomorrow

**Decision:** ✅ **Extract to Figma**

**Reason:** Need polished visuals for presentation
- Apply professional styling
- Refine visual hierarchy
- Add polish (shadows, effects)
- Create presentation-ready mockups

**Workflow:**
1. Extract current prototype
2. Polish in Figma quickly
3. Present Figma mockups
4. After approval, update design system
5. Re-render for development

---

### Scenario 5: Rapid Prototyping Phase

**Situation:** Testing multiple concepts quickly, designs will change

**Decision:** ❌ **Don't Extract**

**Reason:** Too early for polish
- Focus on functionality
- Validate concepts first
- Avoid polishing throwaway work

**Workflow:**
1. Create basic prototypes
2. Test with users
3. Iterate on functionality
4. Once concept validated, then extract for polish

---

## Design System Maturity Levels

### Level 1: Empty (0-5 components)

**Typical Decision:** Extract to Figma
**Reason:** Need to build foundation
**Focus:** Establish design tokens and core components

### Level 2: Growing (6-15 components)

**Typical Decision:** Extract when gaps found
**Reason:** Fill missing pieces
**Focus:** Expand component library strategically

### Level 3: Mature (16+ components)

**Typical Decision:** Rarely extract
**Reason:** Most needs covered
**Focus:** Reuse existing, minor variations only

---

## Cost-Benefit Analysis

### Benefits of Extracting

**Design Quality:**
- Professional visual polish
- Consistent design system
- Reusable components
- Better stakeholder buy-in

**Long-term Efficiency:**
- Design system grows
- Future prototypes faster
- Reduced design debt
- Team alignment

### Costs of Extracting

**Time Investment:**
- Extraction process: 15-30 min
- Figma refinement: 1-3 hours
- Design system update: 30-60 min
- Re-rendering: 15-30 min
- **Total: 2-5 hours per page**

**Workflow Overhead:**
- Context switching
- Tool learning curve
- Sync maintenance
- Version tracking

---

## When Time is Limited

### High Priority: Extract

**These pages justify the time investment:**
- Landing pages (first impression)
- Onboarding flows (user retention)
- Checkout/payment (conversion critical)
- Dashboard (frequent use)
- Marketing pages (brand representation)

### Lower Priority: Skip

**These pages can stay basic:**
- Admin panels (internal use)
- Error pages (rare views)
- Settings pages (utility focus)
- Debug/test pages (temporary)

---

## Team Collaboration Factors

### Extract When:

**Designer-Developer Collaboration:**
- Designer needs to define visual direction
- Developer needs clear component specs
- Team needs shared design language

**Stakeholder Communication:**
- Client needs to approve visuals
- Marketing needs branded materials
- Sales needs demo materials

### Skip When:

**Solo Development:**
- One person doing design + dev
- Direct implementation faster
- No handoff needed

**Internal Tools:**
- Team understands context
- Functionality over aesthetics
- Rapid iteration valued

---

## Quality Thresholds

### Extract if Prototype Has:

**Visual Issues:**
- Inconsistent spacing
- Poor typography hierarchy
- Clashing colors
- Misaligned elements
- Unclear visual hierarchy

**Missing Design Elements:**
- No hover states
- Missing loading states
- Incomplete error states
- No disabled states
- Basic placeholder styling

**Component Gaps:**
- Custom components needed
- Existing components insufficient
- New patterns required
- Variant expansion needed

### Don't Extract if Prototype Has:

**Sufficient Quality:**
- Consistent spacing
- Clear hierarchy
- Appropriate colors
- Aligned elements
- Professional appearance

**Complete Design System Coverage:**
- All components available
- States defined
- Variants sufficient
- Tokens applied

---

## Iteration Strategy

### First Iteration

**Always extract if:**
- Establishing design foundation
- First page in project
- Setting visual direction

### Subsequent Iterations

**Extract only if:**
- Significant design system gaps
- New component types needed
- Visual quality insufficient

### Final Iteration

**Extract if:**
- Stakeholder presentation
- Production launch
- Marketing materials needed

---

## Practical Examples

### Example 1: E-commerce Product Page

**Phase 1: Sketch (Concept)**
- Designer creates hand-drawn sketch of product page
- Shows product gallery, reviews section, rating display
- Rough layout and component placement

**Phase 2: Specification (Phase 4C)**
- Freya analyzes sketch
- Creates detailed specification:
  - Product gallery: Image carousel with thumbnails
  - Reviews component: User avatar, rating, text, date
  - Rating stars: 5-star display with half-star support
- All Object IDs defined
- Content and interactions specified

**Phase 3: Prototype (Phase 4D)**
- Freya builds functional HTML prototype
- Uses existing design system (buttons, inputs, cards)
- Product gallery, reviews, ratings are basic/functional but unpolished

**Initial Assessment:**
- Prototype works functionally ✅
- Design system has: buttons, inputs, cards
- Missing: product gallery, reviews component, rating stars (visual refinement needed)

**Decision:** ✅ Extract to Figma

**Phase 4: Figma Refinement**

Freya automatically:
1. Analyzes prototype components
2. Identifies missing components (gallery, reviews, ratings)
3. Injects to Figma via MCP server
4. Page: `02-Product-Catalog / 2.3-Product-Detail`

Designer in Figma:
5. Designs product gallery component (image zoom, transitions)
6. Designs reviews component (typography, spacing, layout)
7. Designs rating component (star icons, colors, states)
8. Applies design tokens (colors, spacing, typography)

**Phase 5: Design System Update**

Freya automatically:
9. Reads refined components from Figma
10. Extracts design tokens
11. Updates design system:
    - `D-Design-System/components/product-gallery.md`
    - `D-Design-System/components/review-card.md`
    - `D-Design-System/components/rating-stars.md`

**Phase 6: Re-render**
12. Freya re-renders prototype with enhanced design system
13. Prototype now polished and professional

**Result:** 
- ✅ Polished product page
- ✅ 3 new reusable components in design system
- ✅ Specification updated (if design evolved)
- ✅ All future product pages can use these components

---

### Example 2: Settings Page

**Phase 1: Sketch (Concept)**
- Designer creates simple sketch of settings page
- Shows form fields, toggles, save button
- Standard layout, no custom components

**Phase 2: Specification (Phase 4C)**
- Freya analyzes sketch
- Creates specification:
  - Form fields: Email, password, notifications
  - Toggle switches: Email notifications, push notifications
  - Save button: Standard primary button
- All components exist in design system

**Phase 3: Prototype (Phase 4D)**
- Freya builds HTML prototype
- Uses existing design system components:
  - Form inputs (already designed)
  - Toggle switches (already designed)
  - Buttons (already designed)
- Prototype looks polished immediately

**Initial Assessment:**
- Prototype works functionally ✅
- Prototype looks polished ✅
- Design system has: forms, toggles, buttons
- All components available
- Internal use only

**Decision:** ❌ Don't Extract

**Actions:**
1. Apply existing design system ✅ (already done)
2. Minor CSS tweaks for spacing (if needed)
3. Test functionality ✅
4. Complete ✅

**Result:** 
- ✅ Functional, polished page in 30 minutes
- ✅ No Figma extraction needed
- ✅ Design system reuse successful

---

### Example 3: Landing Page

**Phase 1: Sketch (Concept)**
- Designer creates detailed sketch of landing page
- Hero section with headline, subtext, CTA
- Feature cards with icons and descriptions
- Testimonials with photos and quotes
- Multiple CTA sections throughout

**Phase 2: Specification (Phase 4C)**
- Freya analyzes sketch
- Creates comprehensive specification:
  - Hero section: Large headline, supporting text, primary CTA
  - Feature cards: Icon, title, description, learn more link
  - Testimonials: User photo, quote, name, company
  - CTA sections: Headline, button, background treatment
- All Object IDs defined
- Multi-language content specified

**Phase 3: Prototype (Phase 4D)**
- Freya builds functional HTML prototype
- Uses basic design system components
- Hero, features, testimonials are functional but basic
- Client presentation in one week (high priority!)

**Initial Assessment:**
- Prototype works functionally ✅
- Design system has basic components
- Needs visual refinement: hero section, feature cards, testimonials, CTA sections
- Client presentation next week (high stakes!)

**Decision:** ✅ Extract to Figma

**Phase 4: Figma Refinement**

Freya automatically:
1. Analyzes prototype components
2. Identifies components needing refinement (hero, features, testimonials, CTAs)
3. Injects to Figma via MCP server
4. Page: `01-Marketing / 1.1-Landing-Page`

Designer in Figma:
5. Designs hero component (brand-critical, high impact)
6. Designs feature cards (icons, layout, spacing)
7. Designs testimonial component (photos, typography)
8. Polishes CTA sections (visual hierarchy, contrast)
9. Applies brand colors, typography, spacing tokens

**Phase 5: Design System Update**

Freya automatically:
10. Reads refined components from Figma
11. Extracts design tokens and components
12. Updates design system:
    - `D-Design-System/components/hero-section.md`
    - `D-Design-System/components/feature-card.md`
    - `D-Design-System/components/testimonial.md`
    - `D-Design-System/components/cta-section.md`

**Phase 6: Re-render for Presentation**
13. Freya re-renders prototype with enhanced design system
14. Prototype now presentation-ready

**Result:** 
- ✅ Polished, professional landing page
- ✅ 4 new reusable components for future marketing pages
- ✅ Client presentation ready
- ✅ Design system significantly expanded

---

## Red Flags: When NOT to Extract

### 🚩 Premature Optimization

**Sign:** Polishing before validating concept
**Problem:** Wasting time on designs that may change
**Solution:** Validate functionality first, polish later

### 🚩 Over-Engineering

**Sign:** Creating design system for one-off pages
**Problem:** Overhead exceeds benefit
**Solution:** Keep it simple for unique pages

### 🚩 Analysis Paralysis

**Sign:** Endless refinement cycles
**Problem:** Never shipping
**Solution:** Set "good enough" threshold

### 🚩 Tool Obsession

**Sign:** Using Figma because you can, not because you should
**Problem:** Process over progress
**Solution:** Focus on outcomes, not tools

---

## Decision Matrix

| Factor | Extract | Don't Extract |
|--------|---------|---------------|
| **Design System Maturity** | Empty/Growing | Mature |
| **Visual Quality** | Needs polish | Sufficient |
| **Component Coverage** | Gaps exist | Complete |
| **Stakeholder Needs** | Presentation | Internal |
| **Time Available** | 2-5 hours | < 1 hour |
| **Page Importance** | High priority | Low priority |
| **Iteration Phase** | First/Final | Middle |
| **Team Size** | Collaborative | Solo |

**Score:** 5+ "Extract" factors → Extract to Figma
**Score:** 5+ "Don't Extract" factors → Skip extraction

---

## Questions to Ask

Before deciding, ask yourself:

1. **Does the design system have what I need?**
   - Yes → Don't extract
   - No → Consider extracting

2. **Is this page important enough to polish?**
   - Yes → Extract
   - No → Skip

3. **Do I have 2-5 hours for refinement?**
   - Yes → Can extract
   - No → Skip

4. **Will this create reusable components?**
   - Yes → Extract (investment pays off)
   - No → Skip (one-off work)

5. **Is the concept validated?**
   - Yes → Safe to polish
   - No → Too early

6. **Do stakeholders need polished visuals?**
   - Yes → Extract
   - No → Skip

---

## Best Practices

### DO ✅

1. **Extract strategically**
   - First page in project
   - High-priority pages
   - When design system gaps identified

2. **Batch extractions**
   - Extract multiple pages together
   - Efficient use of time
   - Consistent design decisions

3. **Document decisions**
   - Why extracted
   - What was refined
   - Design system updates

4. **Set time limits**
   - Don't over-polish
   - Good enough is sufficient
   - Ship working products

### DON'T ❌

1. **Don't extract everything**
   - Selective extraction
   - Focus on high-value pages
   - Skip low-priority pages

2. **Don't extract too early**
   - Validate concepts first
   - Ensure functionality works
   - Don't polish throwaway work

3. **Don't extract too late**
   - Don't accumulate design debt
   - Address gaps early
   - Build design system progressively

4. **Don't extract without plan**
   - Know what needs refinement
   - Have clear goals
   - Update design system after

---

## Summary

**Extract to Figma when:**
- Design system is incomplete
- Prototype needs visual polish
- New components required
- Stakeholder presentation needed
- High-priority page
- Time available for refinement

**Skip extraction when:**
- Design system covers all needs
- Prototype looks sufficient
- Rapid iteration more important
- Low-priority page
- Time constrained
- Early exploration phase

**Remember:** The goal is shipping polished, functional products. Extract strategically, not automatically.

---

**Use this guide to make informed decisions about when to invest time in Figma refinement versus moving forward with code-based prototypes.**