Figma-to-Vue Workflow

We have Figma designs and a Figma MCP server available, but no established workflow for turning Figma components into functional Vue components in the design system. This is an experiment to validate the end-to-end pipeline.

Establish a repeatable workflow for extracting Figma designs into Vue SFCs that integrate with the q-nuxt-layer design system. Validate Code Connect mappings as a force multiplier for future extractions.

• Use the Figma MCP get_design_context tool on real Figma components
• Adapt React+Tailwind output to Vue SFC + layer conventions
• Test Code Connect mappings to link Figma components to existing layer components
• Document what works, what needs manual cleanup, and what to automate

• Called get_design_context on Figma node 6419:28548 (PolicyListingItem, app.qpoint.io---4.1.filter)
• Converted React+Tailwind reference output to Vue SFC using layer conventions
• Created q-nuxt-layer/components/security/PolicyCard.vue → auto-imported as <SecurityPolicyCard>
  • 4 sizes (big/med/small/micro), 2 states (cool/hot)
  • Uses DataMetricValue + DataMetricSpark for stats and sparklines
  • Inline SVG ribbon, border color driven by state prop
• Created design/app/pages/components/_demos/SecurityPolicyCard.vue with full adminProps
• Added security group to design/app/data/component-registry.ts
• Created design/app/data/policy-cards.json — 9 policies sourced from bob-wire wireframes (policy-compliance-v1, policies-v1, policies-v2)

Workflow validated. The Figma MCP → Vue SFC pipeline works well for domain-specific components. Key learnings:

• Figma output quality: React+Tailwind reference is useful but noisy — hundreds of data-node-id attributes, image assets for sparklines/ribbons, and inline style overrides require manual cleanup
• What transfers cleanly: layout structure, size variants, conditional rendering logic, color values
• What needs replacing: any image assets (sparklines, decorative elements) must be swapped for real components
• Data-machine fit: DataMetricValue + DataMetricSpark are a natural fit for stat columns — no custom number formatting needed
• Naming: domain-specific components don't belong in ux/ — a security/ subdirectory auto-prefixes correctly as Security*
• Code Connect opportunity: PolicyListingItem → SecurityPolicyCard mapping not yet registered — follow-on task for c13

• Building net-new components not already designed in Figma
• Publishing to the layer tarball (that's a follow-on cycle)