Figma Bridge

Designpowers produces excellent specifications — briefs, principles, layout decisions, token systems, copy. But designers think visually, and a spec is not a thing you can look at and feel. This skill closes the loop: it turns the team's decisions into a visual artefact the designer can see and manipulate, and it pulls existing visual work back into the workflow.

It bridges both directions:

• Code/spec → design ("make it real"): push design-lead's visual decisions, the design system, or the built code into real Figma frames
• Design → code/spec ("read this in"): pull an existing Figma file in as the artefact for design-review, or as the source for token-architecture / design-system-alignment

When Figma isn't available, it degrades gracefully to a clickable HTML prototype — no designer is left without something to look at.

When to Use

• At the screenshot checkpoint (after design-builder) — give the designer a manipulable artefact, not just a screenshot of code
• At handoff — sync the final design into Figma so engineering and design share one source
• In design-review — when the artefact to review is a Figma file or link, pull it in here
• As a design-system source — when the user has a Figma library, extract its tokens/components to seed token-architecture and design-system-alignment
• On request — "show me", "put this in Figma", "can I see it", "make it real"