AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

Deep dives · 6 min

Visual AI patterns from Midjourney, Figma, and Runway

Variation grids, inpainting, upscaling, style transfer, and controls beyond the prompt.

Text-to-image is easy to demo and hard to steer. People do not know what to type, cannot predict the result, and struggle to iterate toward what they meant.

Midjourney, Figma AI, and Runway won users partly by solving that control problem. Five patterns show up in those products:

1. Variation grid

One image is a starting point. A grid shows several generations at once so people browse instead of judging a single roll. Each image can spawn more variations.

Interactive Demo: Variation Grid

Pick a direction

Midjourney is built on this: four images, pick one, generate four more. The model assumes iteration, not one-shot perfection.

→ Explore the Variation Grid pattern

2. Inpainting

Sometimes the image is almost right. You need to fix hands, change the background, or add one object.

Inpainting lets people mask a region and regenerate only that area while the rest stays locked. That is "fix this part," not "try the whole thing again."

Interactive Demo: Inpainting

→ Explore the Inpainting pattern

3. Image upscaling

Generations often start small. Upscaling adds detail and resolution. A before/after slider lets people check quality before they commit.

Interactive Demo: Image Upscaling

Image Upscaling
Original (256x256)
→
Upscaled (1024x1024)

Resolution is often the gap between experiment and usable asset. Upscale can close it without regenerating at slower, costlier settings.

→ Explore the Image Upscaling pattern

4. Style transfer

"Make it cinematic" means a hundred different things in words. Style transfer lets people upload a reference image and apply that look to new generations.

Interactive Demo: Style Transfer

Wireframe
Wireframe

They do not need prompt jargon for a color palette and lighting recipe. They show an example.

→ Explore the Style Transfer pattern

5. Controls beyond the prompt

Prompts are blunt. Pro work needs dials: aspect ratio, strength, composition, style intensity. Put those next to the prompt so people can adjust without rewriting everything.

Interactive Demo: Text-to-Image Controls

Ceramic pour-over · Photo
Preview · Photo

Ceramic pour-over set on oak, soft morning light

Casual users can ignore the dials. Power users can lock in settings.

→ Explore the Text-to-Image Controls pattern

A rough ladder of control

These patterns stack as more control:

  1. Prompt only: type words, get an image
  2. Variation grid: browse and pick
  3. Inpainting: fix a region
  4. Style reference: steer with an example image
  5. Parameters: dial composition and strength

Plenty of products stop at level one or two. The ones people keep for real work push toward four and five. Ship the controls, not only the model.

Explore these patterns hands-on