Design amazing mockups with Adobe XD

Whenever you want to launch a new application, the first step is to create a mockup of all the different screens the application should have. Adobe XD mockup helps get suggestions on what the final design will look like. Designing a mockup will enable you to validate all the functional requirements and UX/UI design before the development is started.

A mockup is a wireframe that has an extra surface layer that shows the visual design including typography, colors, images, designing items. You can even go further by using the Adobe XD prototyping tool. You will be able to create fake interactions between screens. In this article, we will see the steps to create a mockup in Adobe XD.

Step 1 – Get Adobe XD

You can buy Adobe XD for US$9.99/mo. If you are unsure that this software is the best to create mockups and prototypes, you can try the free 7-day trial! Once you are convinced, just click on “Buy” to start your plan. You can also decide to get the full Adobe pack for US$52.99/mo. You will get 20+ Creative Cloud apps, including XD, Photoshop, Illustrator, and After Effects! 

To review the plans, visit that page: Adobe XD plans

Step 2 – Select the project you want to launch

Do you wish to create mockups for a mobile or web application? Adobe XD has prebuilt templates for any kind of device and even social network posts. You can even create a custom size by putting the width and height desired for your mockup.

Once you have chosen your template, a new window opens in the tab “Design”, displaying a first screen.

  • To zoom in
    • Ctrl ++
    • Alt + mouse wheel
  • To zoom out
    • Ctrl —
    • Alt + mouse wheel

Step 3 – Creating the mockup

  • Set a color for the background

Click on the title of the mockup. In the right panel, section “APPEARANCE”, click inside the fill rectangle and choose your color.

  • Use a UI kit

In the left panel, click on Get UI kits. You are redirected to Adobe website. You can also follow this link: https://www.adobe.com/fr/products/xd/features/ui-kits.html#panel-3

From there you can download Apple Design, Google Material Design or again Bootstrap kit! To save time, click on Add to libraries. Then, from the left panel, you can search for this new library and use it.

  • Use an Adobe XD template

If you lack inspiration, some designers are kind enough to share their designs and templates. You can check this link: https://www.uistore.design/types/adobe-xd/

If a design or a template suits your needs, you can download it and start working on your project! Here is an example for a cooking application, which you can easily adapt: https://www.uistore.design/items/caco-cooking-free-ui-kit/

  • Organize the document assets

While working on your mockups, you will have to reuse document assets in each of your screens. That is why it is very important to organize the document assets wisely from the beginning to that you don’t lose time. Avoid to have duplicates and put in place right from the beginning a set of colors, character styles and components (icons, pop-ups, buttons etc.)

Step 4 – Share your mockup with collaborators

You can invite people to document your mockups. Click on the icon “Invite to document” and in the box “Share document”, add the e-mail adress of the person with whom you want to share your project.

The end! 

Leave a Comment