How do I use Quick Mockup?
Quick Mockup changes the game for designers and non-designers interested in speeding up the process of taking their ideas into UI/UX designs. Here are some tips for mastering the plugin.
Design faster using Elements
Instead of drawing UI elements from scratch, just open the Elements tab and click on the one you like to add to an artboard. Elements include common parts of a user interfaces like 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 are handily changed in the plugin panel just by selecting the element.
The magic is that the plugin can recognize any child element staged from it or even duplicated on the 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 even come in desktop and mobile sizes.
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 and then simply start editing. Templates are built from Quick Mockup Elements so you can double click into 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.
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 to share with clients or stakeholders before moving into more visual design 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 appear.
Setting up your mockups with Element Styles for Themes
Theme switching was made to be as easy as just a few clicks with the Quick Mockup plugin, but there are a couple of two tricks to know about to get full use of each Theme:
Setting up your color styles
One of these 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. Without mastering this style setting, your mockups will have very limited color control when changing from theme to theme. You can see in action by using a template like “Ecommerce Classic”, that liberally uses different colored panels and elements.
Setting up your photos
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.
