Tutorial / Mockplus Cloud / Add & Import Designs / Import Designs from Adobe XD

Import Designs from Adobe XD

You can import design files directly from Adobe XD into Mockplus Cloud using our plugin.You can also mark any layer as export to import your design assets into Mockplus Cloud simultaneously. 

Download Adobe XD plugin

Download and install the Adobe XD plugin

Please note that you need to use Adobe XD 13.0 or higher version.

Open the Adobe XD Plugin to Get Started

After installing the plugin on your computer successfully, find and open it in this path: Menus> Plugin.

Please note: 

To use the plugin, you'll need to install Adobe XD 13.0. or a higher version. 

Register & Log In

To use the plugin, you'll need to log in with your Mockplus account. If you don't have an account yet, register here

Please note: 

When using Mockplus, you only need to register one account. This account can be used on all Mockplus tools and plugins.

Choose Team and Project

The next step is to choose the team and project you want to import your designs into:

Create Projects

To import designs from Photoshop, you'll need to first create a project inside the plugin or Mockplus. Inside the plugin, click the triangle icon next to the name of the project and click "+" in the dropdown menu to create a project.

When you have a project created, you can then specify a target page group to import designs you need.

Switch Teams/Accounts

You can also switch teams, switch accounts, and change more settings, by clicking the “More” icon in the top right corner.

Mark Assets for Export

Apart from exporting, the Adobe XD plugin lets you mark assets for export.

Choose any layer or folder that you want to export as an asset, and click the “Mark for export” button. Now the button will change from “Mark for Export” to “Unmark for Export”.

Customize Asset Size

To export assets with a custom size, you need to:

  • Drag a rectangle over any icon layer and adjust its frame size. 

  • Group the icon and the rectangle.

  • Select the group and click "Make for Export".

Now, after uploading to Mockplus Cloud using the plugin, you will get an icon asset with the custom size. 

Set Pixel Density

Before exporting designs to Mockplus Cloud, you can select a pixel density, such as @1x, @2x or @3x, according to your needs. 

For instance, if you have a design at 750x1334 pixels, select @2x. Well, if you have a design at 375 x 667 pixels, select @1x instead.

Upload Designs

Once you have selected your designs and assets, press “Upload”. Now you can view them inside the Mockplus online.

Please note: 

You can cancel uploading at any time by pressing the “x” button.

Page States

If you have previously uploaded your design, when you upload an updated version of your design, the plugin will upload it as a Page State by default. 

Check our Page State tutorial to learn more 

Add An Update Note

When uploading with the Photoshop plugin, you can add an update note to further explain changes. Click "Add an update note" (at the bottom of the plugin interface), both of your design drafts and update notes will be exported to Mockplus Cloud.

Now your team members can check these update note details in the Activity tab online.

Export High-Quality Artboards

To export high-quality designs, select the option: "Upload high-quality artboards". Once selected, you can export your artboards at twice the original size.

However, this may impact the performance of your Storyboard, such as slowing your page loading. If you do encounter these issues, unselect the option.

Spec Includes Extension Areas

If you select “Spec includes extension area” in Settings, your marked assets will include all extension areas such as shadows, borders and blurs. If you don’t select this option, your marked assets will be uploaded without the extension area - all assets will be shown in their original layer size.

Set Artboard Order Before Uploading

To ensure your artboards are uploaded to Mockplus in your preferred order, you should set the artboard order before you upload.

In the plugin’s Settings panel, there is the option to “Upload in current artboard order”, if checked, your artboards uploaded in batch will follow the same order they have in Photoshop.

Always Cover Existing State

In the same Settings panel, you can check “Always cover existing state” if you want to simply upload a new version of an older, already uploaded artboards. Once the new artboard has been uploaded, it will overwrite the older version. 

There will be no any reminder popping out to ask you whether to cover the older version or not.  

Notify Members

After updating your designs in Mockplus Cloud, you can notify your team members so they can check updates as soon as possible. Click “Notify members”, select the members to whom you want to send notifications to and enter a notification message. These members will then be notified in real time.

Download and install the Adobe XD plugin