cassel/calctext
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
calctext/_bmad/wds/workflows/6-asset-generation/data/figma-integration-guide.md
C. Cassel bfe0e01254 initial commit
2026-03-16 19:54:53 -04:00

1.1 KiB
Raw Permalink Blame History

Figma to Code Workshop

Status: Coming Soon

Purpose: Extract design specifications from Figma and implement them in code

Tool: Figma Desktop MCP Server
Direction: Figma → Code

Overview

This workshop will guide AI agents through importing design specifications from Figma to generate or update code implementations.

When to Use Figma to Code

Import from Figma when:

  • ✅ Designer has updated visual specifications in Figma
  • ✅ New design system components need implementation
  • ✅ Design tokens (colors, spacing, typography) need extraction
  • ✅ Component states have been refined visually
  • ✅ Design-code sync is needed after visual iteration

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

This workshop will be developed to complement the Code to Figma workflow.