Adobe XD integrates Firefly Codegen for interactive prototypes and generative animation

Tech · 5 min read

Inside XD, designers can now type or record interaction intents—such as "swipe to reveal secondary actions"—and Firefly Codegen produces an interactive prototype plus annotated animation curves and CSS/React snippets. The integration attempts to bridge the gap between concept and engineering by providing deterministic code outputs paired with visual specs.

Adobe emphasized that Firefly Codegen is tuned to respect user-provided design tokens and component libraries. When generating code, the model references the current asset library to avoid inventing new classes or color values. XD also supports a verification pass that flags generated code not matching accessibility contrast or keyboard navigation rules.

Enterprise customers can enable a review workflow where designers sign off on generated interaction code before it's exported to developer repos. Adobe plans further integrations with Substance and After Effects to allow cross-suite motion transfer and consistent material rendering in prototypes.