Learn how to prototype web and mobile apps

How to export and import your prototypes

Learn how to export and import prototypes with this tutorial. It can be useful if you want to reuse a prototype screen in another prototype, or to share only a portion of a prototype.

Thanks to the export and import prototype options, you will be able to export selected subsets of elements of a prototype and import them into a new prototype file. Exported files have the .vp extension.

Export Prototype

The Export>Prototype option is accessible via the File menu.

Select the option Export >Prototype from the file menu

If you click on it, a tab will pop up to let you select the target folder and the elements you want to export. 

1) Open the prototype you wish to export and go to File>Export>Prototype… .

2) Click the [… ] button to select ‘Export location’, choose where you would like the prototype to be saved and give a name to the file you’re exporting.

3) Tick the check boxes on the left of the exportable prototype elements (screens, scenarios, data masters, templates and masters) you want to export.


Once you select an element, the template applied to it will be automatically selected too. However, other elements included in it (e.g. the links or masters that appear in that screen) will be marked with a warning symbol. Those elements must be ticked too if you want the selected element to be fully functional and appear in the exact same way as in the source prototype.

4) On the right, you will see two buttons:

– Click on Add Direct Dependencies to automatically add all the elements that are direct dependencies of the elements currently ticked.
– Click on Add All Dependencies to make the same process recursive for all the elements until no dependencies are missing.

5) Click OK to export. Exported files will have the .vp extension.

Import Prototype

The Import>Prototype option is accessible via the File menu

 Select Import>Prototype from the File Menu

If you click on it, a tab will pop up to let you select the prototype you want to import. 


1) In the Import Prototype tab, select the prototype you want to import. Once selected, the bottom area displays a list of conflicts. A conflict occurs when there are elements in the imported prototype with the same name and type as other elements in the open prototype. For each conflict detected, the system offers three actions:

– (a) Copy: Copies the element under a new name, so that you get both in the final prototype. The new name is the old name with a number suffix.
– (b) Discard: Discards the imported element and keeps the original one. The imported element is lost. That’s the option by default.
– (c) Update: Discards the original element and updates it with the imported. The original element is lost.

Once you have dealt with all the conflicts, click OK to perform the import.

You have completed the Reuse and Apply Global Changes tutorials! Click here to continue with the Conditions and Variables tutorials >