Export to a Single Page
Export multiple artboards to one page
Last updated
Export multiple artboards to one page
Last updated
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 web application or web site 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 user experience between successive pages, making the application behave more like a desktop application.
The term Progressive Web App is also used often.
Progressive web applications (PWAs) are a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript.
They are intended to work on any platform that uses a standards-compliant browser.
Functionality includes working offline, push notifications, and device hardware access, enabling creating user experiences similar to native applications on desktop and mobile devices.
Since they are a type of webpage or website known as a web application, there is no requirement for developers or users to install the web apps via digital distribution systems like Apple App Store or Google Play.
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 Single Page API 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.
When an artboard is exported to a web page it becomes a view. That is the term we use to describe the artboard in the web page.
The following demonstrates a Normal export of the Dashboard UI Kit to a single page application. It uses existing prototype links to navigate between views.
The following demonstrates exporting the Crowdfund Companion UI Kit to a single page application. It uses existing prototype links to navigate between views.
The following demonstrates exporting the Dashboard UI Kit to 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.
The order of artboards is the same order that is in the layers panel.
Use the keyboard support option to navigate through the artboards with the left and right arrow keys.
Animations and transitions are not supported at this time. Visit the forums to get the most information.
