sar/.claude/skills/wds-6-asset-generation/data/figma-integration-summary.md

# Figma Integration - Summary

**Last Updated:** January 9, 2026  
**Version:** WDS v6  
**Status:** Active Development

---

## Overview

This integration enables bidirectional workflow between code and Figma for design system development and visual refinement.

### Bidirectional Workflow

```
Code ⇄ Figma
```

**Two Main Workflows:**

1. **Code to Figma (C2F):** Send code implementations to Figma for visual documentation and refinement
2. **Figma to Code (F2C):** Import design specifications from Figma to generate or update code

**Key Innovation:** Specification-driven approach ensures design-code parity through shared OBJECT IDs, enabling traceability and consistency across both directions.

---

## Workshop Structure

### Code to Figma (C2F) Workshop
**Location:** `code-to-figma/`

**Purpose:** Send code implementations to Figma for design review, documentation, and visual iteration

**Workflow Steps:**
1. Connection Check - Verify html.to.design MCP server
2. Identify Type - Determine export scenario (prototype page, design system component, or frontend view)
3. Prepare Specifications - Find or create OBJECT IDs for proper Figma layer naming
4. Generate & Validate - Create Figma-compatible HTML with validation
5. Send to Figma - Execute export and verify success

**Key Features:**
- Specification-driven OBJECT ID naming
- Three export scenarios with specific ID patterns
- Automated validation before export
- Reverse engineering for missing specifications

---

### Figma to Code (F2C) Workshop
**Location:** `figma-to-code/`

**Status:** Coming Soon

**Purpose:** Import design specifications from Figma to generate or update code implementations

**Planned Workflow:**
1. Connection Check - Verify Figma Desktop MCP server
2. Select Figma Node - Identify what to import
3. Extract Design Specs - Get colors, spacing, typography, layout
4. Generate/Update Code - Create or update components
5. Verify Implementation - Compare code output to Figma design

---

## Reference Documentation

**Location:** `reference/`

Supporting documentation for Figma integration workflows:

1. **`figma-designer-guide.md`** - Guide for designers creating components in Figma
2. **`mcp-server-integration.md`** - MCP server setup and configuration
3. **`tools-reference.md`** - Reference for Figma MCP tools and parameters
4. **`when-to-extract-decision-guide.md`** - Decision tree for when to use Figma integration
5. **`figma-mcp-integration.md`** - Technical documentation about MCP integration
6. **`prototype-to-figma-workflow.md`** - Iterative refinement workflow documentation

---

## Folder Structure

```
wds-6-asset-generation/
├── code-to-figma/              # C2F Workshop
│   ├── workflow.md
│   └── steps/
│       ├── step-01-connection-check.md
│       ├── step-02-identify-export-type.md
│       ├── step-03-prepare-specifications.md
│       ├── step-04-generate-validate.md
│       ├── step-05-execute-export.md
│       └── [substeps folders]
│
├── figma-to-code/              # F2C Workshop (coming soon)
│   └── README.md
│
├── reference/                  # Reference documentation
│   ├── figma-designer-guide.md
│   ├── mcp-server-integration.md
│   ├── tools-reference.md
│   ├── when-to-extract-decision-guide.md
│   ├── figma-mcp-integration.md
│   └── prototype-to-figma-workflow.md
│
└── INTEGRATION-SUMMARY.md      # This file
```

---

## Core Concepts

### The Missing Dimension

**Before:** WDS created specifications and functional prototypes, but visual design creation was manual

**After:** WDS now supports iterative visual refinement through Figma extraction

### Design System Evolution

**Key Principle:** Design system grows organically as prototypes are built

**Process:**
1. Create prototype with existing design system (may look basic)
2. Extract to Figma when gaps identified
3. Refine visuals and create missing components
4. Update design system with new tokens/components
5. Re-render prototype with enhanced design system
6. Iterate until polished

### When to Extract

**Extract when:**
- Design system is incomplete
- Prototype needs visual polish
- New components required
- Stakeholder presentation needed

**Don't extract when:**
- Design system covers all needs
- Prototype looks sufficient
- Rapid iteration more important
- Early exploration phase

---

## Tool Integration

### html.to.design

**Role:** Convert HTML prototypes to Figma for visual refinement

**Process:**
1. Upload HTML prototype
2. Configure conversion options
3. Import to Figma
4. Refine design
5. Extract design system updates

**Benefits:**
- Preserves layout structure
- Converts CSS to Figma styles
- Maintains element hierarchy
- Enables visual refinement

### Area Tag System

**Role:** Precise region mapping for image-based prototypes

**Usage:**
- Map clickable regions on images
- Include Object IDs for traceability
- Extract coordinates via dev mode
- Document region mappings

**Integration:**
- Works with dev-mode.js component
- Supports image-based prototypes
- Enables precise click mapping

### Dev Mode Component

**Role:** Extract Object IDs and area coordinates from prototypes

**Features:**
- Shift + Click to copy Object IDs
- Visual highlights
- Area tag detection
- Coordinate extraction

**Benefit:** Maintains traceability through Figma extraction

---

## Workflow Integration

### Phase 4: UX Design

**Updated Step 4D (Prototype):**
- Create functional prototype
- Test functionality
- **NEW:** Assess visual quality
- **NEW:** Option to extract to Figma
- Continue to PRD update

### Phase 7: Design System

**New Workflow Branch:**
- Existing: Component specification → Design system
- Existing: Figma manual creation → Design system
- **NEW:** Prototype extraction → Figma → Design system

### Iteration Loop

**Complete Cycle:**
```
1. Sketch (concept)
2. Specification (detailed)
3. Prototype (functional)
4. Figma extraction (if needed)
5. Visual refinement
6. Design system update
7. Re-render prototype
8. Assess → Iterate or Complete
```

---

## Benefits

### For Designers

**Flexibility:**
- Start with functional prototypes
- Refine visuals when needed
- Iterate incrementally
- Build design system organically

**Efficiency:**
- Don't need complete design system upfront
- Extract only when necessary
- Reuse refined components
- Reduce rework

### For Teams

**Collaboration:**
- Shared design language
- Clear handoff process
- Bidirectional sync
- Maintained traceability

**Quality:**
- Polished final products
- Consistent design system
- Professional visuals
- Stakeholder-ready

### For Projects

**Speed:**
- Faster initial prototypes
- Iterative refinement
- Parallel work streams
- Reduced bottlenecks

**Flexibility:**
- Adapt to changing requirements
- Grow design system as needed
- Balance speed and polish
- Ship working products

---

## Public Release Readiness

### Documentation Status

✅ **Complete:**
- Prototype-to-Figma workflow
- Decision guide
- Tools reference
- Phase 4D integration
- Phase 7 README update

✅ **Tested:**
- Workflow logic validated
- Integration points confirmed
- Decision framework practical
- Tool capabilities verified

✅ **Ready for:**
- Public documentation
- User testing
- Team adoption
- Production use

### What's Not Included

**Out of Scope:**
- MagicPatterns integration (not needed with html.to.design)
- Automated extraction (manual process documented)
- Real-time sync (manual iteration cycle)

**Future Enhancements:**
- Automated design token extraction
- Figma plugin for WDS
- Real-time bidirectional sync
- AI-powered component matching

---

## Migration Notes

### For Existing WDS Users

**No Breaking Changes:**
- Existing workflows continue to work
- New workflow is optional
- Backward compatible
- Incremental adoption

**How to Adopt:**
1. Read prototype-to-Figma workflow
2. Try with one prototype
3. Refine in Figma
4. Update design system
5. Re-render and compare
6. Expand to more pages

### For New WDS Users

**Recommended Approach:**
1. Start with first page
2. Create basic prototype
3. Extract to Figma
4. Build design system foundation
5. Use for subsequent pages
6. Extract only when gaps found

---

## Success Metrics

### Quality Indicators

✅ Prototypes look polished  
✅ Design system is comprehensive  
✅ Figma and code are in sync  
✅ Object IDs maintained throughout  
✅ Iterations are productive  
✅ Team aligned on visual direction

### Efficiency Indicators

✅ Fewer refinement cycles needed  
✅ Design system grows organically  
✅ Reusable components identified  
✅ Faster subsequent prototypes  
✅ Reduced rework

---

## Next Steps

### For Documentation

1. ✅ Core workflow documentation complete
2. ✅ Decision guides created
3. ✅ Tools reference documented
4. ✅ Integration points updated
5. 🔄 Session logs cleanup (in progress)
6. ⏳ User testing and feedback
7. ⏳ Video tutorials (future)
8. ⏳ Example projects (future)

### For Implementation

1. ✅ Workflow files created
2. ✅ Phase 4D updated
3. ✅ Phase 7 updated
4. ⏳ Test with real projects
5. ⏳ Gather user feedback
6. ⏳ Refine based on usage
7. ⏳ Create example case studies

---

## Key Takeaways

### The Complete WDS Flow

**Concept-First Approach:**
1. Sketch and specification are source of truth
2. Generate functional prototypes from specs
3. Apply design system (may be incomplete initially)
4. Extract to Figma when visual refinement needed
5. Refine design and extend design system
6. Re-render with enhanced design system
7. Iterate until polished

### Design System Philosophy

**Just-In-Time Design Definitions:**
- Don't need complete design system upfront
- Build definitions as needed
- Extract from working prototypes
- Grow organically with product
- Reduce upfront investment

### Iterative Refinement

**Balanced Approach:**
- Functional first, polish later
- Extract strategically, not automatically
- Iterate incrementally
- Ship working products
- Balance speed and quality

---

## Contact and Support

**Documentation Location:**
- `workflows/wds-6-asset-generation/wds-6-asset-generation/`

**Related Documentation:**
- Phase 4: UX Design workflows
- Phase 7: Design System workflows
- Interactive Prototypes guides
- Figma Integration guides

**Questions or Issues:**
- Review decision guide for common scenarios
- Check tools reference for troubleshooting
- Follow workflow documentation step-by-step
- Test with simple prototype first

---

**This integration completes the WDS design workflow, enabling teams to create polished, production-ready designs through iterative refinement of functional prototypes.**

---

## Version History

**v1.0 - January 8, 2026**
- Initial release
- Prototype-to-Figma workflow
- Decision guide
- Tools reference
- Phase 4D and Phase 7 integration

**Future Versions:**
- User feedback integration
- Enhanced automation
- Additional tool integrations
- Example case studies