The Illustration Problem in Product Design
Every modern digital product needs illustrations. Onboarding flows, empty states, error pages, feature announcements, marketing pages, help documentation — these all benefit from custom illustrations that reinforce the product’s visual identity. But creating a consistent illustration system is one of the most time-consuming tasks in product design.
A typical SaaS product might need 30-80 unique illustrations across its interface and marketing materials. Each illustration must:
- Match the brand’s visual language — consistent with the product’s color palette, tone, and personality
- Maintain internal consistency — similar line weights, proportions, shading, and level of detail across all illustrations
- Scale cleanly — work at hero sizes on landing pages and as small thumbnails in the product UI
- Be editable — design teams need to modify colors, swap elements, and create variations without regenerating from scratch
- Export in multiple formats — SVG for web, PNG for email, PDF for print materials
For years, design teams have addressed this need through three approaches: hiring illustrators ($5,000-$20,000+ for a complete system), using pre-made illustration libraries (limited customization, generic feel), or attempting to use AI image generators like Midjourney. The third option has been the most frustrating.
Why Midjourney Fails for Illustration Systems
Midjourney is an extraordinary tool. Its artistic quality is unmatched in the AI generation space, and its v7 release has pushed the boundaries of what AI can create. But for UI/UX teams building illustration systems, Midjourney has four fundamental problems.
Problem 1: Raster-Only Output
Midjourney generates raster images (PNG/JPEG). For an illustration that appears once on a marketing page, this can be acceptable at high resolution. For an illustration system used across a product interface, it is not.
Raster illustrations cannot be:
- Resized without quality loss — a hero image becomes pixelated when used as a thumbnail
- Recolored programmatically — changing the brand’s primary color requires regenerating every illustration
- Animated cleanly — SVG illustrations can be animated with CSS/JS; raster illustrations cannot
- Optimized for web performance — SVG files are typically 5-50KB; equivalent-quality PNGs are 100KB-2MB
- Made accessible — SVG elements can have semantic labels; raster images are opaque to screen readers
Problem 2: Style Inconsistency
Midjourney’s Style Reference feature (—sref) provides some consistency control, but it is approximate rather than precise. Two illustrations generated with the same style reference will share a general aesthetic but will differ in:
- Exact line weight (varying by 20-40% between generations)
- Color application (some areas will be lighter or darker)
- Level of detail (one illustration might have more visual complexity than another)
- Proportional relationships (character head-to-body ratios will vary)
- Shading approach (flat in one, gradient in another)
For a product design system, where pixel-level consistency matters, these variations require manual harmonization — often taking longer than generating the illustrations in the first place.
Problem 3: No Understanding of UI Context
Midjourney generates art. It does not understand that an illustration will sit next to a 16px body text paragraph, inside a card with 24px padding, on a page with a white background. It has no concept of:
- Optical weight relative to surrounding UI elements
- White space requirements for product interfaces
- Information density appropriate for functional contexts
- Responsive behavior — how the illustration should adapt at different viewport sizes
Recraft’s generation engine, by contrast, is trained with an understanding of how generated assets will be used in design contexts, producing output that is contextually appropriate for product interfaces.
Problem 4: Workflow Friction
The Midjourney-to-Figma workflow for illustration work looks like this:
- Generate illustration in Midjourney (Discord or web)
- Download the raster file
- Open Adobe Illustrator
- Run Image Trace to convert to vector
- Spend 15-30 minutes cleaning up the trace result
- Export as SVG
- Import into Figma
- Resize and adjust within the design
- Repeat for every illustration in the system
For a 40-illustration system, this workflow adds 10-20 hours of conversion and cleanup work to the project timeline. That’s time spent on mechanical production work rather than design thinking.
How Recraft v3 Solves These Problems
Native Vector Output
Recraft generates clean SVG files as a primary output. These files:
- Open directly in Figma, Sketch, and any vector editor
- Scale to any size without quality loss
- Contain editable shapes, paths, and color fills
- Weigh 5-50KB per illustration (vs. 200KB-2MB for equivalent raster)
- Support CSS/JS animation for web use
The Recraft-to-Figma workflow:
- Generate illustration in Recraft
- Download SVG
- Import into Figma
- Done
Time saved per illustration: 15-30 minutes. For a 40-illustration system, that’s 10-20 hours of eliminated conversion work.
Style Lock for System-Wide Consistency
Recraft’s Style Lock feature is specifically designed for systematic work. When configured, it constrains all generations to:
- Exact line weight — every illustration uses the same stroke width
- Consistent color application — colors are applied according to the locked palette and application rules
- Uniform level of detail — all illustrations share the same complexity level
- Consistent proportions — characters, objects, and scenes maintain the same proportional relationships
- Matching rendering approach — flat, outlined, gradient, or dimensional — consistently applied
The result is a set of illustrations that look like they were drawn by the same illustrator, because they were generated by the same style configuration.
UI-Context Awareness
Recraft’s generation model has been trained with an understanding of design context. When generating illustrations for UI use, it naturally produces output with:
- Appropriate visual weight for interface contexts
- Clean negative space that works alongside text and UI elements
- Consistent centering and framing suitable for cards, modals, and content sections
- Appropriate complexity levels that don’t overwhelm functional interfaces
Team Collaboration
Recraft’s team features align with how product design teams actually work:
- Shared Style Lock configurations — the entire team generates from the same style definition
- Project-based organization — illustrations organized by product area or feature
- Version history — track evolution of the illustration system over time
- Role-based access — lead designers control style definitions; team members generate within those constraints
Real-World Case: Building a 50-Illustration Product System
To illustrate the practical difference, consider a product design team building a 50-illustration system for a B2B SaaS product.
Midjourney Workflow
| Step | Time | Notes |
|---|---|---|
| Prompt development and style reference setup | 4 hours | Testing —sref parameters, finding consistent prompts |
| Generate 50 illustrations (with re-rolls and variations) | 8 hours | Many re-rolls needed for consistency |
| Download and organize files | 1 hour | File management |
| Image Trace conversion (50 files × 15 min) | 12.5 hours | Mechanical production work |
| Manual cleanup and harmonization | 15 hours | Making inconsistent outputs match |
| Import to Figma and integrate | 3 hours | Sizing, positioning, testing |
| Total: ~43.5 hours |
Recraft Workflow
| Step | Time | Notes |
|---|---|---|
| Style Lock configuration and testing | 2 hours | Define style parameters, test with sample generations |
| Generate 50 illustrations | 4 hours | Faster due to Style Lock reducing re-generation |
| Download SVG files | 0.5 hours | Batch download |
| Import to Figma and integrate | 2 hours | Direct SVG import, minimal adjustment |
| Minor refinements in Figma | 2 hours | Small adjustments to individual illustrations |
| Total: ~10.5 hours |
Time savings: approximately 33 hours, or roughly a full work week. For a design team billing at $150/hour, that represents $4,950 in saved labor costs on a single illustration system project.
What Midjourney Still Does Better
This is not a blanket endorsement of Recraft over Midjourney. Midjourney retains clear advantages in several areas:
- Photorealistic imagery — Midjourney’s photorealistic output is significantly superior to Recraft’s
- Artistic expression — for creative exploration without production constraints, Midjourney offers more range
- Complex scene generation — multi-character, detailed environment scenes are more refined in Midjourney
- Community and ecosystem — Midjourney’s community provides extensive prompt libraries, style references, and shared knowledge
- Concept art and mood boards — for early-stage creative direction, Midjourney excels
The distinction is clear: Midjourney is the better creative tool; Recraft is the better production tool. For UI/UX teams whose primary need is production-ready illustration systems, Recraft’s advantages are decisive.
Integration with Design Systems
Recraft’s vector output integrates naturally with design system workflows:
Figma Component Integration
Generated SVG illustrations can be imported into Figma and converted into components with variants:
- Light mode and dark mode color variants
- Size variants (small, medium, large)
- State variants (default, hover, active)
Because the SVGs have clean, editable color fills, these variants can be created through Figma’s standard component features without regenerating the illustrations.
Design Token Compatibility
Recraft’s color palette enforcement can be configured to use your product’s design token values. This ensures that generated illustrations automatically use the correct brand colors, and when tokens are updated (e.g., refreshing the primary brand color), illustrations can be recolored by simply updating the token values in the SVG files.
Handoff to Development
SVG illustrations from Recraft integrate cleanly into front-end development:
- Direct embedding in HTML/JSX
- Icon font generation from SVG sources
- CSS animation applied to individual SVG elements
- Dynamic coloring via CSS custom properties
- Lazy loading for performance optimization
Conclusion
The shift from Midjourney to Recraft among UI/UX teams is not driven by artistic quality — Midjourney remains the more artistically impressive tool. It is driven by practical production needs: native vector output, systematic style consistency, workflow efficiency, and design system integration.
For design teams that need 10-100+ illustrations that share a consistent visual language, export cleanly as SVG, and integrate directly into product interfaces, Recraft v3 is the more efficient, more reliable, and more scalable choice. The 30+ hours saved on a typical illustration system project translates directly into faster product development and reduced design costs.
Midjourney remains in the toolkit for creative exploration, concept art, and photorealistic content. But for the core production work of building illustration systems, Recraft has earned its place as the preferred tool for product design teams in 2026.