ldy26098
/
BMAD-METHOD
mirror of https://github.com/bmad-code-org/BMAD-METHOD.git
1
0
Fork 0
Code Packages Projects Releases Wiki Activity
BMAD-METHOD/devKalla-Fordonscervice/_wds/workflows/5-design-system/figma-integration/INTEGRATION-SUMMARY.md

11 KiB
Raw Blame History

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

figma-integration/
├── 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 5: 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 5 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 5 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/5-design-system/figma-integration/

Related Documentation:

  • Phase 4: UX Design workflows
  • Phase 5: 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 5 integration

Future Versions:

  • User feedback integration
  • Enhanced automation
  • Additional tool integrations
  • Example case studies