source-command-handoff-figma

To convert user stories into Figma handoff designs, provide a Gravity user story and HTML prototype to generate an organized Figma flow with mapped screens, components, and developer-ready annotations. The Skill builds complete product flows by analyzing user stories, prototypes, and screen states before creating structured layouts.

Mapping Ant Design components to a Gravity product flow involves aligning interfaces with existing design system components and layout templates. The Skill maps interfaces to Gravity and Ant Design components, creating custom atomic components when needed to ensure complete design system alignment throughout the Figma handoff.

An HTML prototype is optional for generating a Figma flow from a Gravity user story. You can run the handoff command by providing the Figma destination file, user stories, and language, while including prototype details if available to build more accurate screen states and layouts.

Yes, you can add realistic mock data and overlays to Figma layouts during Gravity design handoff. The Skill generates an organized Figma flow that incorporates realistic mock data, annotations, and overlays to ensure developers receive comprehensive, structured design communication.

Final validation for Figma handoff designs mapped from Gravity flows applies consistent design system rules, translation rules, and validation checks. This process ensures the generated Figma layouts, components, and developer notes accurately reflect the original product flow requirements and screen mappings.

When creating custom atomic components for Gravity design system alignment, the Skill requires consistent use of existing layout templates and mapped Ant Design components. Custom atomic components are only created when needed, ensuring the final Figma handoff maintains strict adherence to established design system rules and validation checks.