With our Photoshop plugin, you can import assets and designs directly from Photoshop into Mockplus. Inside the plugin, you can easily choose which design layers you want to be imported as assets into Mockplus with your designs.
Download Photoshop plugin
Download and install the Adobe PS plugin ：
Start Photoshop Plugin
After installing the plugin, go to Window > Extension > Mockplus:
Register and Log In
You need to login into your Mockplus account to use this plugin, if you don’t have an account, register here.
Please note:
When using Mockplus, you only need to register one account. This account can be used on all Mockplus tools and plugins.
Choose Team and Project
And then, you'll be guided to choose the team and project that you want to import designs into:
Create Projects
To import designs from Photoshop, you'll need to first create a project inside the plugin or Mockplus. Inside the plugin, click the triangle icon next to the name of the project and click "+" in the dropdown menu to create a project.
When you have a project created, you can then specify a target page group to import designs you need.
Switch Teams/Accounts
You can also switch teams, switch accounts, and change more settings, by clicking the “More” icon in the top right corner.
Mark Assets for Export
Apart from exporting, the Photoshop plugin lets you mark assets for export.
Choose any layer or folder that you want to export as an asset, and click the “Mark for export” button. Now there will be an “-e-” on the front of the layer or folder name. To deselect any asset, simply go back into the plugin and click “Unmark”.
Please note:
You are recommended to only mark the layers and folders that you need. If you are uploading too many at one time you may experience lag or upload failures.
Customize Asset Size
If you would like to set assets at the same size in a batch, our Photoshop plugin has an advanced feature that lets you set your assets at the same height and width in a batch. You can enter a value to customize both of the height and width of all assets at once.
Go to the “Custom Size” section, select a layer, enter your desired Height and Width values and click “Add mask”. The background of the asset will also be transparent.
Once the layer has been imported into Mockplus, your asset will all be the same size as the mask.
If your selected layer is not grouped with another layer, the mask and the layer will be automatically grouped together. There will also be an “-m-” on the front of the group name indicating a mask has been added to the layer.
Please note:
Once a mask has been added to the layer, this layer also has been marked as an asset for export instantly. You don't have to mark it manually again.
You can also drag and drop the frame of the mask to resize assets directly without needing to manually enter Height and Width.
Unmask Assets
When you incorrectly mask one group or layer, select a group or layer and click "Unmark". The mask added to that group or layer will be removed.
Set Pixel Density
Before exporting designs to Mockplus Cloud, you can select a pixel density, such as @1x, @2x or @3x, according to your needs.
For instance, if you have a design at 750x1334 pixels, select @2x. Well, if you have a design at 375 x 667 pixels, select @1x instead.
Upload Designs
Once you have selected your designs and assets, press “Upload”. Now you can view them inside the Mockplus online.
Please note:
You can cancel uploading at any time by pressing the “x” button.
Page State
If you have previously uploaded your design, after clicking Upload the selected artboard(s) > Upload, the plugin will upload it as a page state by default.
Need more information about page state? Check our Page State tutorial.
Reset Artboard ID
To reupload a design as a new page, not a page state, click the icon 
in the upper right corner, and select “Reset Artboard ID”.
Add An Update Note
When uploading with the Photoshop plugin, you can add an update note to further explain changes. Click "Add an update note" (at the bottom of the plugin interface), both of your design drafts and update notes will be exported to Mockplus Cloud.
Now your team members can check these update note details in the Activity tab online.
Sync Designs
If you have deleted any artboards in Photoshop that were synced with Mockplus, click “Synchronize designs automatically while uploading all artboards” in Settings. These arboards will also be deleted from Mockplus after the uploading.
Spec Includes Extension Areas
If you select “Spec includes extension area” in Settings, your marked assets will include all extension areas such as shadows, borders and blurs. If you don’t select this option, your marked assets will be uploaded without the extension area - all assets will be shown in their original layer size.
Set Artboard Order Before Uploading
To ensure your artboards are uploaded to Mockplus in your preferred order, you should set the artboard order before you upload.
In the plugin’s Settings panel, there is the option to “Upload in current artboard order”, if checked, your artboards uploaded in batch will follow the same order they have in Photoshop.
Always Cover Existing State
In the same Settings panel, you can check “Always cover existing state” if you want to simply upload a new version of an older, already uploaded artboards. Once the new artboard has been uploaded, it will overwrite the older version.
There will be no any reminder popping out to ask you whether to cover the older version or not.
Notify Members
After updating your designs in Mockplus Cloud, you can notify your team members so they can check updates as soon as possible. Click “Notify members”, select the members to whom you want to send notifications to and enter a notification message. These members will then be notified in real time.
Identify file name when uploading
If you tick the option Identify file name when uploading, the artboards within the design file will be uploaded as new ones once you changed the file name.
Download and install the Adobe PS plugin ：