Generate a Mockup Image Without Leaving Figma

What This Does

Mockups often need a photo or illustration that matches the product's exact context, and a stock photo search rarely finds one that fits without cropping oddly or looking generic. Figma's image generation tool creates a custom image directly on the canvas from a text description, so you get something purpose-built instead of a compromise from a stock library.

Before You Start

• You have a Figma frame open where the image needs to go
• Your seat is on a paid Figma plan, since image generation is part of Figma's paid-plan AI toolkit alongside Remove Background and Expand Image. Check figma.com/pricing for which tier your team is on
• A clear idea of the subject, style, and mood the image needs to match your product

Steps

1. Find the AI feature

Open Actions in the toolbar (the sparkles icon, or Cmd+K / Ctrl+K) and look for the image generation option there, it sits in the same family as Remove Background, Expand Image, and Erase Object.

2. Tell it what you need

Describe the image: subject, setting, and style. The more specific the brief, the closer the first result lands to something usable. Vague prompts like "a photo of a person" tend to need several regenerations before they're worth keeping.

3. Review and use the result

Drop the generated image directly into your mockup frame and check it against your actual layout, not just in isolation. Look at whether the aspect ratio, lighting, and subject placement work with the text and UI elements around it, and regenerate if the composition fights the layout instead of supporting it.

Real Example

Scenario: A fitness app's workout tracking screen needs a hero image of someone exercising outdoors, and nothing in your stock library matches the app's warm, minimal color palette.

What you type/do: In the image generation prompt, type "A person jogging outdoors at sunrise, warm minimal color palette, clean modern photography style."

What you get: A custom image generated to that exact brief, placed straight into the frame, so you skip the stock-photo search entirely and get something that already matches the product's visual language.

Tips

• Generate a few variations before committing. The first result is rarely the best one, and regenerating costs nothing but a minute.
• Treat generated images as a placeholder for stakeholder reviews unless your team has confirmed AI-generated imagery is fine to ship in the final product. Some clients and brand guidelines still require licensed or original photography for production use.
• Save prompts that worked well. A short prompt library saves time on the next project that needs a similar visual style.

Tool interfaces change. If a button has moved, look for similar AI/magic/smart options in the same menu area.