Mockplus Cloud offers users a plugin to export artboards with slices marked from Adobe XD quickly and directly.
Download Adobe XD plugin
Download and install the Adobe XD plugin
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.
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.
Add an update note
When exporting the latest design version with iDoc plugin, you can easily add an update note to further explain design changes clearly. Just click "Add an update note" (at the bottom of the plugin interface), and then, both of your designs and update notes will be exported to iDoc on the web.
The other team members can easily view the note details instantly in the "Activity" mode online.
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.