Mockplus Cloud offers users a plugin to export artboards with assets marked from Sketch directly and quickly. Here are your simple instructions.
Download Sketch plugin
Open the Sketch Plugin to Get Started
After installing the plugin on your computer successfully, find and open it in this path: Plugins> Mockplus Cloud:
Register & Log In
Log in with your Mockplus account (the account of your Mockplus prototyping tool can also be used in Mockplus Cloud).
Create A New Project
Click the “+” icon to create a new project in the Sketch plugin.
When creating a new project, you can create it in a "Project folder" for better management.
You can also do more operations, including switching teams, switching accounts, and setting your design uploading, by clicking the “More” icon next to the “+” icon.
Choose Project and Group
You can upload designs in the corresponding group or project by choosing a category in the dropdown menu.
Assets usually come in two forms: fully-filled by the layer or group, and the layer or group comes with paddings.
Assets fully-filled by the layer or group
- Select the needed layer or group in Sketch.
- Click “Make Exportable” at the bottom right of the screen, and upload it to Mockplus Cloud.
- Mockplus Cloud will automatically generate the asset with different scales.
Layer/group with paddings
- Select the required layer or group in Sketch, and click “Make Exportable” at the bottom right of the screen.
- Click the slice tool to draw a slice around the layer or group, then adjust the size of the slice (shortcut: S; press and hold it to draw a slice).
Below are instructions for generating assets with a transparent background:
- Group the slice and the layer(s) together.
- Click “Export group contents only” in the property panel on the right side of the screen.
Assets with paddings can also be created more easily with Mockplus Cloud. Here’s how.
- Click “Make Exportable” at the bottom right of the screen for the asset in Sketch, then upload it directly to Mockplus Cloud.
- In Mockplus Cloud, select the asset under Development Mode, then click “Custom size” and “Center” in the Assets panel.
- Set up the size of the asset, then click "Download the current asset" to download.
Please note: to create paddings, the set-up size must be larger than the size of the asset's layer or group.
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 375pt*667pt, @1× is a good choice.
You have three options for uploading your design artboards to Mockplus Cloud, as follows:
- Upload all pages - upload all pages and artboards to Mockplus Cloud within the design file.
- Upload all artboards - upload all the artboards to Mockplus Cloud.
- Upload selected artboard(s) - uploade the selected artboard(s) to Mockplus Cloud
Choose one option and click the “Upload” button to upload all your artboards with asset details to Mockplus Cloud.
Then, other designers and developers can log in and freely view or download the marked assets and related spec details on the web.
Notes: If you are uploading the design unintetionally, you can click "x" to cancel the process.
Select a single artboard in “Sketch” and click the “Upload” button on the Mockplus Cloud plugin panel to upload a state page automatically.
Click here to view detailed steps for uploading a design as a 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.
While uploading all artboards from PS, after clicking the “Automatically detect the non-corresponding designs while uploading all artboards ” option, the artboards, which have been deleted in advance in PS, will also be synchronously removed in Mockplus Cloud.
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. It can be found at the "Settings" panel.
Once selected, your marked assets will be exported into Mockplus Cloud with extension areas, like shadows, borders, and blurs, etc. Otherwise, the marked assets will not include the extension area and be shown in its original layer size.
Export Symbol artboards
To export Symbol artboards in Sketch directly to Mockplus Cloud, you should select "Upload Symbol artboard" option in the Settings panel on Sketch plugin. Then return to the plugin homepage to import all the Symbol artboards.