Export to a Single Page
Export multiple artboards to one page
Last updated
Was this helpful?
Export multiple artboards to one page
Last updated
Was this helpful?
It's not uncommon to have multiple artboards for mobile, tablet and desktop.
The Export multiple pages a single page option provides a way to have multiple artboards on a single page and either programmatically, or with navigation buttons or through media queries show the desired artboard.
The term single-page application is used often. Simply:
A single-page application (SPA) is a or that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. This approach avoids interruption of the between successive pages, making the application behave more like a .
The term Progressive Web App is also used often.
Progressive web applications (PWAs) are a type of delivered through the web, built using common web technologies including , and .
They are intended to work on any platform that uses a standards-compliant .
Functionality includes working offline, , and device hardware access, enabling creating user experiences similar to native applications on desktop and mobile devices.
Since they are a type of or known as a , there is no requirement for developers or users to install the web apps via digital distribution systems like or .
With Single Page Applications you have 3 options:
Normal - All of the artboards are exported to the same page and the first artboard is shown. Use prototype links to show another artboard or use the code to change artboards.
Slideshow - This is same as above but navigation buttons are shown to go from one artboard to the next. Keyboard arrow keys can also be used to go forward or back through the artboards.
Media Query - Create artboards of different sizes and then when you export them the artboard will show depending on the size of the browser or your device.
The following demonstrates a Normal export of theto a single page application. It uses existing prototype links to navigate between views.
The following demonstrates exporting the to a single page application. It uses existing prototype links to navigate between views.
The following demonstrates exporting theto a slideshow. It uses existing prototype links to navigate between views and provides a forward and back buttons that go from one artboard to another.
