Prototype → Figma Skill

Skill by ara.so — Design Skills collection.

Converts working Claude Code prototypes into structured Figma design files by exploding interaction flows into state-by-state frames, mapping components to your Figma design system, and annotating triggers, transitions, and edge cases natively in Figma.

What This Skill Does

When a user builds a prototype in Claude Code, this skill:

1. Analyzes the prototype source — inventories components, maps interaction flows, identifies all UI states
2. Maps to design system — searches linked Figma libraries for matching DS components; flags unmatched elements with "No DS match" badges
3. Creates one frame per interaction state — every meaningful step in a user flow becomes a separate Figma frame
4. Annotates interactions — adds native Figma Dev Mode annotations with filterable categories (Interaction, Navigation, Validation, Error Handling, etc.)
5. Adds flow arrows — visual connectors showing user path through states
6. Creates overview frame — table of contents with legend and open questions for reviewers
7. Optionally links Code Connect — maps Figma components back to codebase

Key Capabilities