Adobe XD

Keeping up to date with the latest features

Setting up an Artboard - Desktop

The default settings for a desktop artboard is:

Artboard width: 1920

Grid setting for fluid Bootstrap website

Viewport height (default): 1080


Setting up an Artboard - Tablet / Mobile

The project specifications should document which tablet/mobile devices, the app will be primarily used on. If the requirements are based on multiple resolutions then you should design to the smallest device as it is easier to scale to a larger resolution (mobile first design).



Keep your design styling constant and save valuable time by creating reusable/global assets.

The following assets can be created:


Store your main projects colour pallet.

Character Styles

Create different typography styles to be used throughout the project.


Create components such as navigation bars, buttons, cards or any other reusable elements.

Keep in mind:

‘Master’ components - These are the main components which when edited, all child components will be edited in the project.

‘Child’ components - These are copies of the Master Components but can be edited without affecting the master or other child components. eg. change component colour


After you have finished creating your design, you should turn it into a prototype which will allow users to navigation through the wireframes. By doing this you have the ability to test the user-flow and everything is correct, etc.

Having a working prototype will allow the client to navigate through designs and get a clear idea of the end product.

Having broken or missing links will cause the artboard to be hidden from view when exporting n prototype and developer view.


Once the wireframes and prototypes are completed, you can export into the following views:


Produces a PDF version of artboards which can be easily emailed.

Share for Review

Creates a linked prototype version of the app or website where clients can easily navigate through. Clients can create and pin comments to the wireframes to request changes etc.

Share for Development

This option creates an overview of the project where you can see a detailed view of the page styling. The options include colour pallets, typography, assets(with download option), along with all the styling options, interactions and navigation links.

Designing for iOS

Use the link below to view the design resources and guidelines for iOS. If the app does not meet the guidelines, Apple may reject it.

Download iOS UI Kit for XD

Designing for Android

Use the link below to view the design resources and guidelines for material design.

Download Material UI Kit for XD

Designing for Web

When designing for Bootstrap, use the link below to see what components and layout options are available to use.

When designing for Flexbox, keep the following in mind.

Designing graphs and charts

When designing for charts and graphs, use the link below as a guide.

Stock images / icons / files