How to Prompt Midjourney v6 for Scalable UI Component Kits in Figma Weave

Using generative AI for UI design usually ends in frustration. You ask Midjourney for a web dashboard, and it spits out a gorgeous, highly styled interface with dramatic diagonal angles, deep ambient drop shadows, and text that looks like a cat ran across a keyboard. It looks great in a portfolio pitch slide, but it is completely useless when you try to slice it into actual functional components for design tooling.

To build real prototypes, we need modular asset sheets: clean, front-facing, orthographic layouts of specific interface elements (buttons, inputs, status badges, and cards) that are consistently styled. Once generated, we can pull them directly into Figma Weave to rapidly trace, vectorise, and structure our designs.

Here is how to construct prompts that make Midjourney output clean, production-ready UI component sheets, and how to bridge them cleanly into your Figma workflow.

The Anatomy of an Orthographic UI Prompt

By default, Midjourney v6 wants to make things look like high-fidelity product photography. It leans toward depth, lighting reflections, and dimensional angles. To force it to draw flat, vector-like UI elements, we have to strip away perspective, ambient gradients, and heavy drop shadows.

Here is the foundational prompt structure we will use:

> `[Component Type] sheet, flat vector style, [Style/Theme], orthographic projection, front-facing view, modular layout grid, clean borders, minimal design, [Color Palette] background --style raw --no shadows, depth, perspective, 3D render`

Let's break down why this specific combination of words keeps our design system in sync:

1. "Sheet" or "Modular Layout Grid": This forces Midjourney to arrange several items side-by-side in a tidy grid, rather than generating a single giant illustration.
2. "Orthographic projection, front-facing view": This kills all perspective warping. Everything remains flat, parallel, and perfectly aligned.
3. `--style raw`: This parameter tells the model to follow our strict literal prompts rather than applying Midjourney's default aesthetic preferences.
4. `--no shadows, depth, perspective, 3D render`: This negative prompt is critical. It strips out the heavy aesthetic gradients that prevent crisp vector conversion.

To see visual examples of how these parameter configurations change output rendering styles, check out the official Midjourney asset galleries. They demonstrate how different negative weights affect flatness.

Step 1: Generating Web App UI Elements

Let's generate a complete set of buttons and input states. Open your Discord interface or the Midjourney web client and enter the following prompt:

`text flat vector ui buttons asset sheet, active states, hover states, disabled states, clean thin borders, minimal aesthetic, light mode, pastel blue and slate color palette, orthographic projection, front view, asset sheet layout on white background --style raw --no shadows, 3d, dark mode, ambient occlusion, perspective `

Analyzing the Output

You will notice that this prompt generates a clean, structured set of buttons aligned neatly in a matrix. Instead of a messy full-page layout, you get clearly bordered components that are easy to isolate.

If you want to design a matching set of data charts and graph components, modify the component type in your next prompt generation run:

`text flat vector ui dashboard widgets, charts and analytical graphs asset sheet, minimal clean lines, flat design, orthographic projection, front view, light grey background, teal and purple accent colors --style raw --no shadows, 3d, gradient background `

Step 2: Importing and Processing inside Figma Weave

Once you have generated your asset sheets, it is time to bring them into your active canvas. The magic of modern workflows is using collaborative tools to map raster AI art into structured vector layouts.

1. Import the Asset Sheet: Save your high-resolution Midjourney output and drop it onto your canvas. You can explore how complex multi-layer designs are handled natively by reviewing the tools and documentation on /platforms/figma-weave.
2. Apply Masking and Grid Guides: Create local bounding boxes (frames) around each button, input box, and graph inside your sheet. Because we used orthographic prompts, you should be able to snap an ordinary grid guide right along the rows and columns.
3. Vectorise Key Paths: Use auto-trace tools or Figma Weave’s native object extraction capabilities to isolate individual interactive elements. Since our prompt explicitly requested --no shadows and clean thin borders, the edge detection will work flawlessly without leaving messy vector artifact clusters.

If you find yourself running into performance issues or parsing errors during import, take a look at our quick-reference troubleshooting guides: /platforms/figma-weave/articles.

Step 3: Troubleshooting Midjourney Drift

Even with a tight prompt formula, Midjourney can occasionally throw a curveball. Here is how to keep your generations ticking along smoothly:

• The Model Insists on Isometric Views: If Midjourney still generates slanted screens, increase the weight of your flat prompts by adding flat 2d graphics at the very front of the prompt and lowering your aspect ratio to a standard square format (--ar 1:1).
• Colors are Bleeding: If your white backgrounds look muddy, add --no photo background, gradients. This forces a high-contrast white background, making lasso and masking operations a absolute breeze.
• Elements are Cluttered: If the buttons are overlapping, add the phrase isolated assets with wide spacing to ensure you have plenty of padding when slicing the canvas.

For more advanced advice on keeping your image generation models consistent across UI iterations, check out our deep-dive platform support guides at /platforms/midjourney/articles.

By leveraging these flat, structured generation prompt patterns, you can skip the tedious manual drafting phases and jump straight to refining high-converting, polished design systems inside Figma.