Tutorial > Mockplus Cloud > Storyboards > State Page

State Page

The State Page allows designers to upload multiple copies to one page, retaining different states. It also supports automatic carousel, adjusts sequence by dragging and dropping, merges or detaches, and more… Let's have a look:

Upload State Pages

So far, all Mockplus Cloud plugins, including the Sketch/XD/PS plugin, support uploading an artboard as a “State page”:

  • In the PS/Sketch plugin, you can select a single artboard in PS and check the “Upload the selected artboard(s)” option. Then, click the “Upload” button. The first upload will be complete.

  • If the artboard gets modified or edited after uploading, you can upload it again using the same procedure.

  • If you want to replace the previously uploaded design copy, simply select the “Cover existing state” option and choose the copy that you want to rewrite with.

  • If you want to upload a new state page, choose the “Add new state” option and enter a page name for it.

  • Check and preview all uploaded state pages in the Storyboard module of Mockplus Cloud. (If you would like to upload multiple state pages, merely repeat the above operations.)

To upload a State Page in XD plugin, firstly, select a single artboard.

  • Click the “Upload as state” button to complete the first upload.

  • After editing the artboard, re-select it and click the “Upload as state” button.

  • If you want to replace the previously uploaded design copy, select the “Cover existing state” option and choose the copy that you wish to rewrite.

  • If you want to upload it as a new state page, select the “Add new state” option and enter a page name for it.

  • Check and preview all uploaded state pages in the Storyboard module of Mockplus Cloud. (If you would like to upload multiple state pages, merely repeat the above operations.)

Check Details of the State Page

Once selected "Cover the existing state", all previous state pages will be displayed below instantly. You can then click the magnifier icon next to the state names to view their details.

State Page Carousel

Click the dot below the page to check each State Page. Also, you can click the “Play”  button by hovering the mouse to play the State Pages automatically.

You can choose different carousel effects and carousel time in the lower-left setting panel.

Merge and Separate State Pages

By hovering the mouse on the toggle button below the State Page, you can view the different file names. Press the Ctrl key to select multiple pages, right-click and select “Merge into state page” to merge them; conversely, if you want to separate the state page, drag and drop any button at the bottom of the page to get the status.