Tutorial > Mockplus Cloud > Add & Import Designs > Export Designs from Adobe XD Plugin

Export Designs from Adobe XD Plugin

Mockplus Cloud offers users a plugin to export artboards with slices marked from Adobe XD quickly and directly. 

Installation

Find [Plugins>Manage Plugins>All Plugins] in Adobe XD, and search Mockplus Cloud to install it quickly. Or you download the Adobe XD plugin and double-click to install it on your computer. Please note that you need to download a full version higher than 13.0.

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 that you need to upgrade your Adobe XD at least to version13.0.

Mac OS:

Windows:

Register & Log In

Log in with your Mockplus account credentials (the username and password used for your Mockplus prototyping tool account can also be used in Mockplus Cloud) .

Select Collaboration Teams and Projects

Expand the list to select the targeted team and project. All your artboards will be uploaded to this project.

Create a Project

Click + to create a new project.

When creating a new project, you can create it in a "Project folder" for better management.

Choose Project and Group

You can upload designs in the corresponding group or project by choosing a category in the dropdown menu.

SwitchTeam/Switch Account

Click the menu in the upper-right corner to Switch Team/Switch Account as shown below:

Mark Slices

Select the layers or folders of the desired slices and click the “Mark for export”icon:

When the prompt changes from “Mark for Batch Export” to “Unmark for Batch Export”, the slice has been marked successfully.

Select Different Pixel Densities

You can expand the artboard size menu and choose a proper artboard size for all your selected designs before uploading.

For example, if you have an artboard in 750px*1334px, @2× is a good choice.

Upload Artboards

Upload all your artboards or selected artboards with one click after marking all slices successfully. You can then view these artboards on the web.

Notes: If you are uploading the design unintentionally, you can click "Cancel" (in the upper right corner) to stop the process.

State Page

Select a single artboard in XD and click the “Upload as a state” button on the Mockplus Cloud plugin

panel to upload a state page. Click here to view detailed steps of the State Page.

Export High-Quality Artboards

The Sketch plugin also supports an "Upload high-quality artboards" option.

Once selected, you can export your artboards twice the original size.

However, this may slow the screen loading in Storyboard. If you encounter similar laggy screen issues, please unselect the option.

Set Specs to Include Extension Areas

The Sketch plugin now supports a "Spec includes extension area" option.

Once selected, your marked assets will be exported into Mockplus Cloud and shown with extension areas, like shadows, borders, and blurs, etc. If you don't select the option, the marked assets will be shown in its original layer size.


Download the Adobe XD plugin.