Adobe Firefly 3 adds real-time UI code export to React Native and SwiftUI

Design · 6 min read

Firefly 3's new 'Design-to-Code' export interprets artboards and auto-generates responsive components with accessible HTML semantics, platform-specific constraints, and style tokens. Designers can toggle between React Native and SwiftUI outputs, previewing live device previews inside Adobe's environment. Adobe emphasized the feature's goal of reducing handoff friction and speeding up iteration loops.

Under the hood, Adobe combined vision-language models with heuristics that map visual constructs to platform primitives, such as mapping a button pattern to a platform-specific native button with correct touch targets and accessibility labels. Generated code includes comments, design tokens, and a changelog that references the originating artboard and components.

Engineers expect to use the output as a high-quality scaffold rather than drop-in production code. Adobe said the feature is configurable: teams can set rules for naming conventions, token usage, and which patterns to convert automatically versus flag for manual review. For agencies managing many client handoffs, the automation promises measurable time savings while still requiring engineering oversight.