website logo
HomepageCommunitySign up & Download for free
⌘K
USER MANUAL
User Interface
General
Styling
Color Management
Widgets
Presentation & Interaction
Interactions
Sharing & Export
Resources
JavaScript
Embedded HTML
Custom CSS
Plugins
Cloud
General
Account Registration
Projects
Prototypes
Subscription, Licensing and Billing
Single Sign-On (SSO)
Company Profile
Types of Users
User Management
Commenting
Sharing
Public Link
Embed Code
Prototype Settings
User Profile
FAQ
Tutorials
How to build
Interactive dropdown
Interactive tab bar with content
Modal dialog
Table
Input field
Upload and share prototypes
Changelog
Docs powered by
Archbee
USER MANUAL

Sharing & Export

20min

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 03 Mar 2023
Did this page help you?
PREVIOUS
Interactions
NEXT
Resources
Docs powered by
Archbee
TABLE OF CONTENTS
Upload to Cloud
Web Viewer
Fonts
Toolbar
Resize Mode
Spec Inspector
iOS Viewer
Live Preview
Downloads
Export as Graphic
Export Screens as Graphic
Export Selected Objects as Graphic
Copy & Paste
Docs powered by
Archbee