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.

Installation

Download the Photoshop plugin:Windows, Mac OS. And select it to install it on your computer. 

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.

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.


Download the Photoshop plugin:Windows, Mac OS.