The Export All Artboards has an option to export all artboards at the same time. Embedded in this feature are three unique options:
- Export to multiple pages
- Export to a single page (navigation)
- Export to a single page (media query)
The multiple pages option does what it sounds like. Every artboard on the stage will be exported each to it’s own page.
Note:
Not all of the objects on the stage are artboards. You can tell an object is an artboard by it’s icon in the layers panel:
In Export to Multiple Pages having 3 artboards will result in exporting 3 pages:
In Export to Single Page having 3 artboards will result in one page:
The options are listed in the Export Artboards to Page dialog
In the Export all artboards to section
In the Single page (with navigation) option all the artboards are exported to a single page and navigation buttons are shown.
So this:
Becomes this:
The navigation buttons advance to the next and previous artboards.
But let’s center it quick by selecting Center Horizontal and Center Vertical. Let’s also enable Auto Refresh so any changes we make are automatically shown in the browser.
By the way! Auto refresh only works in Firefox when viewing a page from the file system (when the protocol is file://) but will work in other browsers if you have a localhost running. Export again and let’s see how that looks:
But is often the case you will have all different sizes of artboards and you will have visitors with all different sizes of viewports.
If we resize the browser to a smaller screen size we can see how that looks to users of that screen size:
As you can see the artboard is cut off.
This is where Scale to Fit comes in. Scale to fit scales (zooms in or out) the artboard to fit the available space of the browser window.
In the Export dialog select Scale Artboards to Fit.
Here is Scale to fit and Scale on resize in action:
Usually, when you have this option enabled, you will want to select the related options, Scale on Resize, Scale on Double Click and Reset Scale on Double Click.
The Reset Scale on Double click option resets the scale to 1 (actual size) and it does that when you double click. That looks like this:
Once the scale is actual size you may want to be able to scale it to fit again. That’s where Scale on Double Click is used. That looks like this:
Let’s get back to Export to Single Page. When we export to a single page we have an option of showing navigation. The navigation buttons are placed in the lower right hand corner and contain a previous and next button.
That looks like this:
There’s another option to add Keyboard Navigation. This enables you to use the left and right arrow to move to the previous and next artboard.