20min

Sharing & Export

Upload to Cloud

Prototypes can be uploaded to projects in Antetype Cloud.

To upload, choose Export > Upload to Cloud from the File menu or use the button in the toolbar. More informations can be found in the cloud section.

If you want to upload a prototype as a new one choose Upload to Cload As...

Document image



Web Viewer

Antetype prototypes can be exported and viewed in a browser. Choose Export > Web Viewer… from the toolbar.

Document image



You can select individual screens inside the export dialog, to reduce the footprint of your exports and increase performance. A folder will be created on the hard disk and the default browser will be opened. To open the web viewer again, just open the index.html file on top level. You can also put the Web Viewer folder on a web server and host your prototype. Pressing the option key, the interactive elements are highlighted.

Tip

By appending the screen number to the url you can navigate to a specific screen. e.g.: .../index.html#5



Fonts

Antetype tries to automatically convert all used fonts into web fonts that can be displayed in the browser without installing the font locally.

Some fonts cannot be converted automatically by Antetype. In this case, a warning appears. You can fix the problems by clicking on the "Font Options" button.

This dialog shows the used font-families and the conversion status:

  • "Converted automatically" Antetype converted the font, it will display in the web viewer without problems
  • "Choose…" allows to choose a Web-font (WOFF-format) of the corresponding font.
  • Fallback allows to enter a CSS fall-back for the font. 
Document image





Toolbar

The web viewer has a toolbar to choose the screen and back/forward buttons to go from screen to screen. You can enter full screen mode to hide the toolbar. Pressing the ESC-key exits full screen. There is also a button to show clickable areas of the prototype.



Resize Mode

Can be used to resize the prototype manually.



Spec Inspector

The spec inspector provides an automatic specification of your prototypes. In the panel, all properties needed for development are included. We also provide basic CSS code.

Document image



Elements can be selected, spacing between elements is visualized.

Document image





With the left / right arrows you can navigate between different elements. Up and down is used to navigate in the hierachy of the element.





iOS Viewer

Antetype prototypes can be exported and viewed on an iPhone or iPad. The native Antetype iOS Viewer app is available for free on the App Store.

Live Preview

In the live preview tab you have easy acces to all your currently open projects in Antetype.

You are also able to see other Antetype users in your network. This option can be disabled in the Antetype settings.

Document image



Downloads

Prototypes exported as Web Viewer can be opened in the iOS application. Therefore the folder needs to be zipped and send to the device.

Inside the app you can paste a download link. It is also possible to use Airdrop for this. With the Open in dialog you are also able to use other cloud solutions.

Document image





Export as Graphic

Export Screens as Graphic

Antetype screens can be exported as PNG (or vector-based PDF). Choose Export > Screens as Graphic… from the tool bar.

You can export multiple screens at once by selecting the check boxes at the bottom of the save dialog. The name of the resulting graphic will be equal to the screen name, but it can also be overwritten. Double-click the screen name in the save dialog and enter the new name.



Export Selected Objects as Graphic

Any object can be exported as PNG. Choose Export > Selected Object as Graphic… from the toolbar. You can select multiple objects and save them all at once.

Attention

Zoom Levels do apply with this export method. So you need to make sure that you set the appropriate zoom level before exporting. This can also be used to your advantage when @2x exports are required.



Copy & Paste

As an alternative to using export functions it is also possible to use ⌘ C, and paste it directly in your desired application.

With this method zoom levels do apply. That means an element will be sharper if you copy it e.g. at 300%.

@50%
@50%



@100%
@100%





@300%
@300%















Updated 22 Apr 2022
Did this page help?
Yes
No