New templates and themes in Quick Mockup help you design your ideas faster than ever
For as long as the concept of “UX” has been around, designing effective user experiences has required time-intensive, hands-on work. Fortunately, designers now have a new tool to help you bring your ideas to life in a faster and easier way. Quick Mockup is a plugin for Adobe XD that helps you explore and iterate quickly, allowing you to move seamlessly from lo-fi wireframes to hi-fi designs in just one click.
What is Quick Mockup?
Quick Mockup is free and feature-packed; it provides you with everything you need to build layouts by using a library of predesigned UI elements and templates for web and mobile. Elements come with different styles, states, and sizes and are easily controlled in the plugin. Of course, both elements and templates are customizable directly in Adobe XD, too.
Quick Mockup also introduces a completely new way to design in XD — Themes. Themes are different design styles that come with unique typography, color palettes, and photography. Pick your initial theme (by default, Quick Mockup uses a minimal wireframe theme), build your screens, and at any time, change your work to another Theme to see it in a totally different style. You’ll also see that there are different sets of photos in each theme to help visualize the design and make it feel real.
A game-changer for everyone
Quick Mockup changes the game for designers and non-designers by speeding up the process of transforming their ideas into UX designs. Quick Mockup is useful for meeting many different needs, such as:
- Marketers that need to easily mockup a landing page to share with their boss or agency
- Product managers with lots of great app ideas, who need a super fast way to build a wireframe or even a high-fidelity mockup.
- Seasoned designers that no longer want to hunt and peck for the right element in a UI kit to build your designs or draw a button from scratch.
- Designers that need to find the right icon for an app by simply searching a keyword within XD.
The idea for Quick Mockup came out of our conversations with all sorts of people that had great ideas but never could find a way to create beautiful mockups easily and quickly.
How do I use Quick Mockup?
Design faster using Elements
Instead of drawing UI elements from scratch, just open the Elements tab and click on the one you would like to add to an artboard. Elements include common parts of a user interface, such as buttons, navigation, form elements, headers, body copy, icons, and more.
Unlike UI kits, Quick Mockup UI elements are dynamic, with multiple styles, states, sizes, and display settings that can be readily changed in the plugin panel just by selecting the element.
The magic in this is that the plugin can recognize any child element staged from it or even duplicated on an artboard. Just click the element and use the settings selectors that appear. And rest assured that copy and pasting an Element retains the previous setting. Elements come in both desktop and mobile sizes.
Design from scratch faster using Elements.
Jumpstart your ideas with Templates
For some projects, building a layout from scratch is either too time consuming or requires some major inspiration to get started. This is where Templates come in handy. Designed for both web and mobile, Quick Mockup comes with a collection of professionally-designed mockups that can be easily customized for your needs.
Try choosing a template such as “Classic Home - Desktop” or “One Page - Mobile” to have it added to an artboard, then simply start. Templates are built from Quick Mockup Elements, so you can double click grouped modules to select an Element and be able to change it in the plugin panel. You can even try combining layouts from two or more Templates to personalize your mockups quickly.
Jumpstart your ideas with Templates
Transform wireframes to designs with Themes
Wireframes are a great way to really hone in on and plan the structure of an experience, rather than being distracted by aesthetic and visual choices. This is why designers often start with black and white UI elements, sharing them with clients or stakeholders before moving into more visual design – one that focuses on the combination of color, fonts, and photos to express the brand of the app or company. Transforming a low-fidelity wireframe into high-fidelity UI design has always been a big task, requiring many hours, if not days, to complete.
With the introduction of Themes to Adobe XD in the Quick Mockup plugin, this style switching is a snap. Just select the artboard(s) that you’d like to change, click the Theme button and choose a Theme style that suits your needs. Then, watch as every part of your mockup “auto-magically” transforms to a new style with new fonts, colors, and free stock photos. Pro tip: if you’re not happy with the photos in the design, just click the theme again and new ones will appear.
Apply themes to your Templates.
Setting up your mockups with Element Styles for Themes
Theme switching is as easy as just a few clicks with the Quick Mockup plugin, but there are a couple of tricks to know about to get full use of each Theme:
The first trick has to do with color variations between panel backgrounds and the elements (buttons and other UI) in the foreground. You can start with a “Background” element added to the artboard. Select the element and notice that under Style in the plugin it shows “Main” by default. Each Template has 3 styles: Main, Primary and Secondary. To create different color combinations the background and elements should use the same Style. So by default, a background with Main style should have text, button, icons and other elements set to Main, too. Then, the next panel down could have a dark background Primary or Secondary style, which is shared by all the elements. In this way, you can get a nice banding of panels that have their own color values. You can see this in action by using a template like “Ecommerce Classic,” which liberally uses different colored panels and elements.
Match styles for elements.
Image element settings are one other setting that you need to pay attention to before using Themes. You will need to change the Asset Type from Placeholder to Small, Hero, or Panel to set up the image elements to use the photos selected for different size images. If you leave as a placeholder, it will continue looking like an image element in a wireframe when you change themes.
Pick image type as needed.
More about the Quick Mockup plugin
On developing the plugin
Quick Mockup was created by Adobe’s International Design Team after a collaboration with Adobe Design’s Research & Strategy team doing research in Japan, where they first discovered a wide range of non-designers and knowledge workers doing UI/UX design in non-design tools. From that sprang the idea to make Adobe XD the go-to tool for anyone interested in designing mockups quickly and easily. As a first iteration, the plugin launched in late 2019 at MAX Japan with just a collection of wireframe-styled UI elements. In Quick Mockup 2.0, the team has extended this idea much further into Templates and Themes to innovate on the rapid mockup process and making the plugin a tool both designers and non-designers can use to speed up their design process. Lots of new templates and themes as well as all-new Modules (a more complex combination of elements) will be offered in future releases.