Tutorial > iDoc > 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 iDoc plugins, including the Sketch/XD/PS plugin, support uploading an artboard as a“State page”:

  • In the PS 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 iDoc. (If you would like to upload multiple state pages, merely repeat the above operations.)

To upload a State Page in Sketch/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 iDoc. (If you would like to upload multiple state pages, merely repeat the above operations.)

Check Details of the State Page

When selecting “Cover the existing Stage Page”, the uploaded State Page will display below the setting as a thumbnail. Double-click the thumbnail to check the details of the old version.

State Map 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.

Merging and separating 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 as Statechart” to merge them multiple selected statecharts; conversely, if you want to separate the statechart into multiple single pages, drag and drop any button at the bottom of the page to get the status.

Previous Settings
Next Download