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.
