How to generate stunning UI designs with Midjourney AI

Editor’s note: This article was updated on 11 November 2024 to discuss Midjourney’s advancements in 2024, provide a step-by-step workflow for creating UIs and UI components with Midjourney, update prompt examples and use cases, and add tips for working with Midjourney, along with a new downloadable resource containing sample prompts and more.

Why use Midjourney to generate UI designs?

Midjourney is one of the top image generation models on the market. Besides creating images and illustrations for websites, blog post images, and other marketing materials, you can also use Midjourney to produce user interface images. Similar tools include Stable Diffusion, DALL-E, Leonardo, and Flux AI.

With Midjourney, you can only generate pixel images, not vector images, so editing them in Figma takes time. However, the tool is still an effective resource for generating inspiration ideas for UI design with minimal effort, enabling you to ideate and iterate more rapidly than traditional methods like sketching and wireframing. Using Midjourney to generate UI ideas vastly simplifies the process of exploring creatively and executing efficiently.

In 2024, Midjourney added some remarkable new features that help to generate more accurate and precise images. These features go beyond just the quality of generated images, which has also improved since models 6 and 6.1 were released:

• Simple web interface — replaces the old, complex Discord chat system
• Ability to edit images uploaded from the user’s computer
• Advanced editing capabilities, including retexturing, expanding, cropping, and inpainting
• Improved AI prompt understanding
• Photorealism
• Better text-in-image generation
• Option to include image, style, and character references, enabling users to achieve consistent styles across multiple generations

In this post, I will touch on the basics of Midjourney and how every UX and product designer can get inspiration for creating user interfaces using this platform. You can also download this free cheat sheet of Midjourney UI design prompts and tips as a helpful resource.

Are you ready? Let’s start.

What is Midjourney?

Midjourney is a product that generates images based on requests. You write a prompt that tells the AI what you want. Then, the artificial intelligence translates it into a picture, illustration, icon, or logo. Midjourney’s AI can generate almost any visual representation you need.

In addition to generating images, Midjourney has a website where you can manage your account, view your result history, and search for images that community members have generated to gain inspiration.

How does Midjourney work?

As with many online tools, you need to create a Midjourney account with your Google or Discord credentials. Upon registering, you will receive 25 free images, and to generate more, you must be a paid subscriber.

To create an image, you need to write a prompt, send it, and the machine will give you four results you can play with. The basic actions to play with an image are Zoom in, Pan, and Upscale.

If you are unsatisfied with the results, click on the Prompt button, and the prompt will copy to the input so you can generate another set of four images.

An advanced way to iterate the image is to click on the Editor button so you can make more detailed changes like inpainting, which entails filling in missing parts of an image with new content.

You can find all the available action variations on the Midjourney website, but you can achieve great results with basic commands:

Step-by-step guide: How to generate UI designs with Midjourney

Here’s a simple process for using Midjourney to move from idea to final design. I’ll explain it for website design, but it works for any UI design or visual element. Treat this as a guide and tweak it to fit your needs.

More of a visual learner? Watch our TikTok video below:

@log.rocket Besides creating images and illustrations for websites, blog post images, and other marketing materials, Midjourney can also produce user interface images. Midjourney can only generate pixel images, not vector images. This means that editing them in Figma takes time. However, the tool is still an effective resource for generating inspiration ideas for UI design with minimal effort. #midjourney #uidesign #uidesigntips #uidesigntrends #aidesigntools #uidesigntools ♬ Relax – Neto0_0

Write a brief for your task

Before leveraging Midjourney for UI design, we must clearly understand what we want to achieve with the tool by writing a brief to guide us in the creative process. A clear scope of the task helps guide your design process and focus you on the final result you want to achieve. For example:

“A website for a local Neapolitan pizza restaurant, with red, white, and green colors. The design should be minimal, with photos.”

You can use the ideas in the brief to write prompts to achieve the visual design of the website or application you are building.

Submit a prompt to Midjourney

Based on your brief, write a detailed prompt. Add as many specifics as possible, such as the number of sections, colors, and design style.

Play with the parameters to refine the output. For instance, increase the variety value to get different outputs per generation. For a full-page design, use a vertical aspect ratio (e.g., 1:2), while for a header, opt for a wider ratio (e.g., 9:16):

Prompt example:

“A modern Neapolitan pizzeria website featuring design with real photos with red, white and green colors. Clean navigation, hero section with stylized pizzas and sections for menu, location map and contact info. Italian-inspired design elements include brick ovens and traditional motifs”
Parameters: Variety: 15, ar 1:2, Version 6.1

Result:

The true potential of Midjourney for UI design lies in its ability to generate numerous ideas for you in just one click. Unlike browsing websites for inspiration, you can input a prompt and receive results that align with your design brief. Previously, we relied on screenshots from various websites to gain inspiration.

You can generate multiple images and group them to create an inspiration board for your product’s visual design. Additionally, you can generate pages for both mobile and desktop devices, providing a more authentic feel. However, Midjourney will not be able to create the logic of the digital product, such as the flow of architectural information, just the visual design.

Refine the prompt

Adjust the prompt to get varied results. For example, change the style of the output. You can also add a reference image to align the generated visuals with your desired style.

Here’s a refined version of the prompt from before:

“A modern Neapolitan pizzeria website featuring flat design illustrations with red, white, and green colors. Clean navigation, hero section with stylized pizzas, and sections for menu, location map, and contact info. Italian-inspired design elements include brick ovens and traditional motifs.”
Parameters: Variety: 15, ar 1:2, Version 6.1

The updated result looks like so:

What’s more, if you focus on one part of the website, like an icon for your app or an image for your website, you can do so with Midjourney. For example, if you require a specific hero image for your homepage, you can generate multiple images and choose the most suitable one for the main page.

Prompt example:

“A hero section for a Neapolitan pizzeria featuring a full-width image of a rustic pizza with red, white and green accent colors. The section includes a bold headline and a clean navigation bar with traditional Italian design motifs.”
Parameters: Variety: 15, ar 3:2, Version 6.1

Result:

Save the results

Save all images that you like. You can download them immediately or simply like them with the heart icon to easily revisit them later:

It is essential to note that Midjourney sometimes generates UI interfaces that are impossible to create or images that are not close to reality. For this reason, it is essential to learn from real apps and websites to understand where the limits are. Otherwise, you may create something that does not look real or cannot be developed.

Create in your design tool

Once you have enough inspiration, move these visuals into Figma (or any design tool). Create your designs based on this inspiration. Then, as usual, refine and present your work to the team.

Use cases: What can you design with Midjourney?

With Midjourney, you can generate a wide range of visual assets: full UI designs for websites or applications, icons, hero section images, and branding elements like logos. Unlike traditional tools, you simply describe what you want, and Midjourney generates the image for you. Additionally, there are tools within Midjourney that make editing easier.

Here are some examples, along with prompts, to help you better understand its capabilities.

Using Midjourney for icon design

Example prompt:

“Icon of a coffee machine, Skeuomorphism”
Parameters: Version 6.1, stylize 200

Result:

If you like the visual design and want to create a new icon, such as one for a kettle, you can use the generated image as a style reference. This allows you to generate a new icon with the same style. Simply click on the Style button at the bottom of the screen, add a prompt, and generate:

You can use this technique for any UI design asset. Here’s an example result:

Using Midjourney for dashboard UI design

Example prompt:

“A modern and minimalistic dashboard layout for a project management platform targeted at tech-savvy professionals and teams. The design features an intuitive navigation sidebar, a top bar with user profile and notifications, and key sections including an interactive calendar, task overview, progress charts, and team collaboration tools. Use a color scheme of cool blues, grays, and subtle accents of green to evoke trust, efficiency, and focus. The overall aesthetic should be clean, professional, and highly functional, with smooth transitions and hover effects. Exclude distracting elements like decorative images; instead, focus on simple icons, data visualizations, and clean typography.”
Parameters: Variety: 5, ar 3:2, Stylize: 300 Version: 6.1

Result:

To make changes to the image, click the Editor button at the bottom of the screen. Then, remove the part you want to change with the Erase tool, write a prompt explaining what you want to do, and click Submit:

Here’s the updated result:

Using Midjourney for mobile app UI design

Example prompt:

“A clean mobile delivery app interface with quick-access buttons for restaurant search, order tracking, and history. Features include a live map, favorites section, and profile area, using vibrant orange and green accents on a neutral background for a sleek, functional design.”
Parameters: Variety: 5, ar 9:16, Stylize: 700 Version: 6.1

Result:

You can use the tips above to continue iterating on this idea, edit specific aspects of the UI design, or create other UI design ideas in the same style for other screens within the app.

Using Midjourney for hero image design

Prompt example:

“A professional hero section illustration for a law firm, featuring the full team”
Parameters: Variety: 5, ar 16:9, Stylize: 200 Version: 6.1

Result:

As before, you can update, refine, or further iterate on this example UI design using Midjourney until you land on an idea you like.

How to write an excellent Midjourney prompt

Midjourney is a tool that helps you get ideas for design, not create the final design. You should remember this when using it. While Midjourney won’t give you a complete design, it will give you inspiration that you can use to make your own designs in Figma or another design tool.

Refining your prompts in Midjourney will help you get as close as possible to a final UI design idea that you can easily execute. Let’s go through some tips for writing an excellent Midjourney prompt.

1. Start by searching, not writing

First, try to navigate in the search feature in Midjourney, using keywords to look for inspiration for your desired design. Starting with search will save you time and help you refine the keywords to use in your eventual prompt.

With so many images available in the search results, it’s even possible you’ll find what you are searching for right away, allowing you to use an existing image as a reference or basis for your prompt later:

2. Iterate with a good prompt

If you find an image you like using Midjourney’s search feature, you can click into the image to see the prompt used to create it. Instead of copying the image and iterating on it, copy the prompt and start to iterate from there.

For example, if you find a design of a website in dark mode but want this design in white mode, change the prompt and execute it to get the results you desire:

3. Write with templates

Templates make writing easier by giving you a structure to follow. You can create your own templates that fit your needs, or use websites that help you write prompts.

Here is a template I often use for UI design, so you can use it too:

A [design style] website layout for a [purpose/audience]. The design features [key elements and layout details], including [specific sections or features]. Use a color scheme of [colors] to express [emotions/brand identity]. The overall aesthetic should be [adjectives describing the look and feel]. [Include or exclude] [specific imagery or elements].

In addition, these websites can help you to write prompts:

• IMI Prompt
• Midjourney Prompt Helper
• Prompto Mania Prompt Generator

4. Use as much detail as possible

If you want to start from scratch, or if you tried the above tactics and didn’t get the desired results, make sure you provide as many details as possible in your prompt. For example, if you need a full website landing page, describe every section, the color scheme, and the design style. Doing so will create the design element in your requested specific design style.

Additionally, set the aspect ratio to vertical for a complete page view. You can also write fewer details, but in some cases, you will not get a good result.

5. Leverage the Midjourney parameters

Midjourney offers various parameters. By changing them, you can customize AI results, so it’s a smart idea to know and experiment with them. Here are some common examples. To study them more extensively, please visit the Midjourney page on parameters. Here are the parameters I use the most:

• Aspect ratio — This parameter changes the image’s aspect ratio. You can choose from portrait to landscape
• Stylize — This parameter adjusts how strongly the Midjourney aesthetic is applied. The range value is between 0 and 1000, and as the value is higher, it creates more artistic images
• Weirdness — By choosing a value between 0 and 3000, you will get weird aesthetics with an experimental feel
• Variety — This parameter determines how varied the images are. The range is between 0-100. The higher the value, the more unusual and unexpected the results and compositions will be
• No — By specifying No, you tell Midjourney what not to include. For example, if you do not want cakes in the image, add “–no cakes” to the prompt

Here is an example of the prompt as follows: “Website UI flat design for a local coffee shop, with a warm color palette -no cakes.

More tips for writing Midjourney prompts

Beyond the tips above, here’s some general advice as you start writing prompts in Midjourney:

• It’s essential to iterate — It seems easy to get good results, but it is only sometimes that way. You must often play with the prompt to get the desired results. Iterate with the prompt. Changing, adding, or removing words and adjusting parameters will give you different results that can make the process more interesting and valuable
• Don’t spend too long searching for the perfect prompt — People believe they must write the perfect prompt to get the desired output. However, even a great prompt can not guarantee perfect results for your needs. I like to generate some images and iterate with the prompt to get an idea of the design so that I can start working. Then, I use the images and work on it in Figma, making changes myself. I am not dependent on the machine for the entire process. Instead, I work with AI to make the process faster and more productive
• Different Midjourney versions can produce different results for the same prompt — In most cases, the newest Midjourney version can give you better results, but you can use different Midjourney versions to get different results. You don’t necessarily need the perfect image when finding inspiration for your website; you need some inspiration. You will create the final design with a design tool like Figma

Let’s expand on that last point a little. To play with the Midjourney versions, add the prompt –v and the number of the version — for example, –v 4. Here is an example of the prompt “Website UI flat design with illustrations, for a local coffee shop, with a warm color palette” with the version parameter set to version 4:

Downloadable cheat sheet: Midjourney UI design prompts (NEW)

We’ve talked through a lot of steps, tips, and prompts so far. If you’re feeling overwhelmed, or if you want a helpful cheat sheet covering everything we’ve discussed at a high level, I’m here to help!

Download your free cheat sheet of Midjourney UI design prompts here.

Comparing Midjourney to other AI tools for UI design

Many AI tools are available today, and it can be confusing to understand their differences. Let’s focus on four key tools: Midjourney, Figma AI, Adobe Firefly, and DALL-E. I’ll explain the main differences first, followed by a detailed table below.

Midjourney, Adobe Firefly, and DALL-E are excellent for creating logos, images, and icons. While they deliver good results, you’ll need to make tweaks to achieve your desired outcome. If you want to work with vector files, you’ll need an additional tool like vectorizer.ai to refine or adjust the designs.

Figma AI can also create visual assets but is best for crafting detailed user interface (UI) designs. It allows easy editing of design components directly in the software and lets you use prompts for quick changes.

Be aware that these tools change constantly, and many capabilities are added to them sometimes every week.

These are the key differences. Check the table below for more details:

Feature	Midjourney	Figma AI	Adobe Firefly	DALL-E
Visual fidelity	Depending on the asset, visual assets are more accurate than UI design	Good for visual assets, great for UI design	Depending on the asset, visual assets are more accurate than UI design	Depending on the asset, visual assets are more accurate than UI design
UI design	Great for UI design inspiration	Creates accurate UI designs	Great for UI design inspiration	Great for UI design inspiration
Visual asset capabilities (icons, logos)	Creates creative visual assets in various styles	Medium visual asset design capabilities	Creates creative visual assets in various styles	Good visual asset design capabilities
Ease of use	Intuitive but requires prompt crafting	Simple to use with seamless integration into Figma	Simple interface with easy prompt writing due to inputs in the interface	Intuitive, but requires prompt crafting
Iteration speed	Fast	Fast for images, slower for UI due to more visual assets	Fast	Fast
Collaboration	Limited	Full collaboration.	Limited	Basic collaboration by sharing the results
Editing capabilities	Good editing with new generated images or uploaded images	Great editing possibilities after generation for UI design. More basic for images	A good editing tool with a wide range of options in the Adobe ecosystem	Minimal and basic editing tools
Free plan details	First 25 images free, then plans from $8/month (billed annually)	Available on Figma’s Free plan	25 free generative credits every month	Two free images per day

FAQs: Common questions about Midjourney UI generation

As a popular tool, there are plenty of frequently asked questions about how to apply Midjourney effectively for UI generation. Here are some answers to questions I’ve had or been asked:

• Can Midjourney generate UI components for real-world projects?
  No, Midjourney can’t generate UI components. It can only generate images of components, which you can use as inspiration for your project. If you want to build the actual components, you’ll need to create them in Figma or another design tool.
• What are the limitations of Midjourney in UI design?
  Midjourney is great for generating inspiration for UI components, but it doesn’t create them real components or images with high fidelity. It can be helpful if you want to make visual assets like icons or logos, but you’ll almost always need to tweak them afterward to fit your exact needs. From one prompt, in most cases, you will not get a final solution.
• How do I use Midjourney’s new image editor for UI designs?
  You can upload the images to the tool via the “Edit” section and then start to iterate on them. Be aware that this function works better for images or visual assets than for full UI.
• What is the main benefit of using Midjourney for making UI designs?
  The primary benefit of using Midjourney for UI is that you can rapidly generate design ideas that are less finished than tools like Figma. These “UI mistakes” = can lead to creative thinking, inspiring new designs.
• What are the limits of using Midjourney for UI design?
  The tool is not accurate. While it generates designs, these designs are not precise according to design guidelines. For example, buttons may not be in the correct place, which limits their utility for polished UI designs.
• Does Midjourney support responsive or adaptive design?
  No, Midjourney only generates an image in one size. It does not create responsive layouts.
• Can I export Midjourney designs to tools like Figma or Sketch?
  No, you cannot export the designs generated by Midjourney directly to tools like Figma or Sketch. Instead, you need to copy the image generated by Midjourney and manually recreate it in Figma.
• How can I make Midjourney create UI elements that match my brand style?
  You can add details to your prompt about your brand style, such as colors or design styles. Although it won’t give you an exact match for your brand, it will generate an image that represents the general feeling of your brand identity.
• Is Midjourney good for making prototypes, or just for concept designs?
  Midjourney is suitable only for conceptual designs. You cannot use it to create interactive prototypes.
• What skills or knowledge do I need to use Midjourney well?
  To use Midjourney effectively, you need a good imagination and some basic prompt engineering skills. This article includes a template that can help you create effective prompts and achieve better results.
• How can I add Midjourney to my current design process?
  The best way to use Midjourney in your design process is when you need quick ideas for visual assets. For example, if you need an icon, you can ask the tool to make one in the style you want. Once you get a good result, you can continue refining it with a design tool like Figma.
• Can Midjourney copy or adjust existing UI styles?
  Yes, you can ask it to generate UI in a specific style, such as flat design. However, note that the quality may vary, and it might not meet the same standard for every design style.

If you have other questions, feel free to comment below!

How to use Midjourney ethically

Firstly, I am not an expert in legal copyright issues, so the information provided should NOT be taken as legal advice. Because the technology is new and has a few years of experience, there are many areas for improvement regarding content use. Using the results cautiously is a smart idea until everything becomes clear.

For example, if you create an icon for your website, you can use the ideas the tool generates and create your icon; do not copy and paste it. Instead, you can use an element in the icon and iterate from there. Another thing people do today is add text below images created with AI tools to clarify to readers that the image is not real.

Because there are no clear rules, using common sense when working with this tool is smart. You can be on the safe side or consult an expert if there is any doubt.

Conclusion

In this article, we explored how to use Midjourney to assist with UI design. First, I explained what Midjourney is, how it’s been updated and improved in 2024, what a prompt is, how the tool works, and how it can help us brainstorm ideas more effectively.

Next, we walked through a step-by-step guide to help you understand how to generate UI design elements with Midjourney, from setting the scope to creating final results in Figma or another design tool.

After that, we looked at the types of assets you can design using the tool, such as dashboards, icons, and hero images for websites. Remember, Midjourney only gives you a draft, which you will need to improve or execute with another design tool.

We also covered how to write an effective prompt with tips and ideas to help you research and iterate until you reach the ideal outcome. It’s important to note that you shouldn’t stress about finding the perfect prompt because the tool will never give you a final solution. It’s all about experimenting and refining the results.

Finally, we discussed how to use Midjourney ethically, compared the different tools available today, and addressed additional questions you might have.

Now it’s your turn to get creative and experiment with the tool! Don’t forget to download this helpful cheat sheet of prompts and tips as you get started.