Open Design

1. Intro – what we're going to build

πŸ’‘
In this tutorial you will learn how to:
  • 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

Demo

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.

Next: Install and set up the Open Design SDK