Adobe Firefly Update Adds Component-Aware Image Layers for UI Mockups

Design · 5 min read

Adobe expanded Firefly's capabilities with a new component-aware image layer export that identifies buttons, inputs, icons and tokenizes colors. When designers generate a screen, the output can include named layers and semantic metadata that import cleanly into XD and Figma.

The system uses an internal vision-language model to segment UI regions and attach probable component types and CSS-like properties. Designers can tweak prompts and see the layer structure update, making AI-generated mockups less like static art and more like design system components.

Adobe emphasized that generated metadata is not a guaranteed production contract; developers and designers must still review and refine layers, but the new export aims to reduce manual tracing work. The update rolls out to Creative Cloud enterprise customers this quarter.