1. Intro – what we're going to build
- Install and set up the Open Design SDK
- Upload a design and get its ID
- Get data from the design
- Render artboards into images
- Set default fonts for rendering
In this tutorial, we'll create a web app that will display a design just like in the design tool it was created in. We'll call this app Design Viewer and it will be able to:
- Import a design
- List the design structure including Pages and Artboards
- Switch between Pages
- Display artboards as static PNGs in their proper place
To give you a better idea of how the app works, here's a demo of the final product. As an input, we used the example design that comes with Sketch.
On the left side, you can see the list of available Pages and Artboards. You can switch to another page by clicking on it. When you click on Artboard, the right side of the page will scroll to the selected Artboard. All the data we need was obtained from the Open Design SDK.
Was this article helpful?