Tutorial > Mockplus Cloud > Add & Import Designs > Export Designs from Photoshop Plugin

Export Designs from Photoshop Plugin

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

Download Photoshop plugin

Download and install the Adobe PS plugin :Mac OSWindows.

Open the Photoshop Plugin to Get Started

After successfully installing the plugin on your computer, find and open it by selecting: Window > Extension:

Register & Log In

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

Choose Project and Group

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

Create New Project

Clicking "+" to create a new project.

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

Switch Team/Switch Account

Click "More" in the upper-right corner to switch team/account.

Mark Slices

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

When an “-e-” is added to the slice name and “Mark for export” changes to “Unmark”,  the slice has been successfully selected. ( Please note: It is best for you to mark the needed layers only while cutting assets since too many useless layers can cause uploading failures. )

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 of 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 them on the web.

Notes: If you are uploading the design unintetionally, you can click "x" to cancel the process.

State page

Select a single artboard in PS and click the “Upload” button on the Mockplus Cloud plugin panel to upload a state page automatically. Click here to view detailed steps for state page.

Reset Artboard ID

From within the PS plugin of Mockplus Cloud, click the icon  in the upper right corner, and select the “Reset Artboard ID” option in the pop-out menu. From here, you can reupload documents, that have since been updated.

Mockplus Cloud will recognize them as new documents and will not rewrite the original editions.

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.

Synchronize Artboards

Ticking the “Automatically detect the non-corresponding designs while uploading all artboards ” option while uploading from PS will cause, artboards, that have been deleted in PS, to also be synchronously removed in Mockplus Cloud.

Set Spec to Includes 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.

Download and install the Adobe PS plugin :Mac OSWindows.