Open Design

6. Building the front-end part

In the previous sections, we prepared API endpoints to give us all the data we need to create the front-end part of Design Viewer. Since the main goal of this tutorial is to introduce the Open Design SDK, this part of the tutorial will be more condensed.

As a reminder, Design Viewer will display designs just like in the design tool it was created in. The app will have two screens. The first screen will be for entering the design ID and the second will display the design.

First screen - enter design ID
Second screen - display the design

Creating Screen 1

Let's create the first screen for entering the design ID:

  1. In the pages folder, replace the original index.js with the following:

  2. Create a file called styles/Style.module.css with the following contents (from CodeSandbox):



  3. And also replace the contents of styles/globals.css with the following contents (from CodeSandbox):



Creating Screen 2

  1. Create a new file called pages/design/[id].js. Note that this filename has brackets because that's how you define a dynamic route in Next.js. If you're interested in more, you can read about it here.

  2. Paste in the following contents:

  3. Modify pages/api/artboards.js to include the bounds of each artboard. It calls the getBounds method on each artboard and extend the artboard listing.

The code above has a few important parts to call out:

  • The getServerSideProps function calls the API endpoints we created in the earlier sections to pass the design data to the DesignViewer component as props.

  • The ArtboardPreview component is also important. We get the bounds (positioning data) from the modified Artboards endpoint.

Test it out

Head to http://localhost:3000, provide a design ID, and see if it works!

πŸ€–
You can also see the result in the CodeSandbox below if you don't want to start the project locally. When you fork the CodeSandbox project, don't forget to provide API_TOKEN in the Secret Keys section. You also need to provide your own design ID.

Edit Building the front-end part