Export type

Export multiple pages or single page

The Export Type gives you a way to export multiple artboards at the same time. By default only the selected artboard is exported. With this option you can export all artboards or a range of artboards and then you can choose to export those to the same page or multiple pages.

Use the dropdown list to select from selected artboard, selected artboards or all artboards.

After you chose if you want to export one artboard, multiple artboards or all artboards then chose in what way you want them exported. Do you want to export the artboards to a single page or to multiple individual pages.

Exporting to multiple pages or exporting to a single page CHANGES how automatic hyperlinks are created. You can get around this by manually entering hyperlinks.

Multipage Export

Multiple page export creates a page for each artboard you are exporting. If you have 10 artboards selected and choose Multiple pages you will end up with this in the export directory.

artboard1.html
artboard2.html
artboard3.html
artboard4.html
artboard5.html
artboard6.html
artboard7.html
artboard8.html
artboard9.html
artboard10.html

Settings you have selected to not apply to all pages when you export to individual pages. Set the settings on each page when exporting multiple pages.

Single Page export

Single page application adds a view on one single page for each artboard you are exporting.

If you have 3 artboards selected and then export to Single Page Application then you will have one page and then 3 views inside of that page.

artboard1.html

artboard1.html: 

<html>
<body>
   <div id="artboard1">
   </div>
   <div id="artboard2">
   </div>
   <div id="artboard3">
   </div>
</body>
</html>

When you view the Single Page Application page in the browser all the artboards will be hidden except the selected artboard (the artboard selected in the Export Artboard dialog).

Settings you have chosen are applied to all selected artboards unless those artboards have their settings that are different than the default. In other words if you have Artboard Red and Artboard Blue selected and enable scaling then both artboards will have scaling enabled. If you turn scaling off in Artboard Blue then it will not have scaling enabled. It's like CSS. The options are inherited from the selected artboard unless that artboard specifically chooses a different setting.

You show or hide other artboards by making hyperlinks to them. You can also use the JavaScript API and show or hide views using Javascript.

You can create your own custom URL structure using the URL hook function Javascript API

Single Page Application with Media Queries

This option is the same as Single Page Application but it allows you have multiple artboard views for mobile, desktop and tablet and shows or hides views automatically.

Single page showing multiple versions of a page:

Single page showing multiple views and multiple versions of each view:

If you have 1 artboards selected with 3 views (one for mobile, tablet and desktop) and then export to Single Page Application with Media Queries then you will have one page and then 3 views inside of that page.

artboard1.html

artboard1.html: 

<html>
<body>
   <div id="artboard1_mobile">
   </div>
   <div id="artboard1_tablet">
   </div>
   <div id="artboard1_desktop">
   </div>
</body>
</html>

You could have multiple views in the same page with multiple size versions. The view that is automatically shown is dependent on the size of the browser.

If you have 2 artboards and each has mobile, tablet and desktop views and then export to Single Page Application with Media Query then you will have one page and 6 views inside of that page.

artboard1.html

artboard1.html: 

<html>
<body>
   <div id="artboard1_mobile">
   </div>
   <div id="artboard1_tablet">
   </div>
   <div id="artboard1_desktop">
   </div>
   <div id="artboard2_mobile">
   </div>
   <div id="artboard2_tablet">
   </div>
   <div id="artboard2_desktop">
   </div>
</body>
</html>

When you have multiple views that are shown by media query use hyperlinks and hyperlink states to show the view you want while the mobile, tablet or desktop view will automatically be shown based on browser size.

Selecting Multiple Artboards

To select multiple artboards, select them on the paste board (design view) or open the Layers panel and select the artboards. The last artboard selected is the one that will be the main selected artboard that contains the properties or export options.

PreviousAuto RefreshNextReset Artboard

Last updated