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.