Intermediate8 min

From Image to Design: Layout and Brand

A great image is not a design. A design has hierarchy, type, and a job to do. This lesson takes your generated images into real layouts using Canva, Figma with AI plugins, and Adobe Firefly, and keeps them on brand.

Step 1: Generate to fit the layout, not the other way around

Decide the final format first, a 1080x1920 story, a wide web hero, an A4 poster, then generate at that aspect ratio with empty space where text will go. Prompting for negative space (a clean sky, an empty wall) gives your headline somewhere to live.

Step 2: Build the layout

Drop the image into Canva or Figma. Add a clear hierarchy: one headline, one supporting line, one call to action. Use no more than two typefaces. Let the image breathe; resist filling every pixel.

Figma — poster layout
Frame: 1080 x 1350 (portrait post)
Layer 1: generated image (full bleed)
Layer 2: bottom gradient overlay (black, 0 -> 60%)
Layer 3: Headline / Subhead / [ Button ]
Image fills the frame, a dark gradient at the bottom keeps text readable, headline and CTA sit in the negative space.

Step 3: Lock the brand

Consistency is brand. Save your palette, fonts, and logo as a reusable kit (Canva Brand Kit, Figma styles, or a Firefly custom model trained on your assets). Every new asset should pull from the same kit so the whole feed looks intentional.

Contrast beats decoration
If text is hard to read over the image, add a gradient scrim or a solid panel behind it. Readability always wins over a prettier but illegible overlay.

Result

You can take a raw generated image and turn it into a finished, on brand social post or poster with clear hierarchy and legible text, ready to publish.

Hands-on tasks