Open Design

5. Render all artboards as PNGs

Now let's write a new API Endpoint to export all artboards as PNGs. We'll iterate on the code we wrote for artboards.js and add some extra logic to render the artboards.

  1. Create a previews.js file in the api folder with the following contents:

  2. Call the new API endpoint by going to http://localhost:3000/api/previews?designId=YOUR_DESIGN_ID. Once it finishes, you should see lots of generated images in the public folder.

Nice ๐ŸŽ‰. The script works, but there are some optimizations we can make.

Optimization 1: Global font fallback

Text layers may be missing in artboards if you run the script in an environment where there aren't any fonts (for example, in CodeSandbox). To handle this, we'll create a global fonts fallback. This means that even if we don't have the exact font specified in the design, we'll at least see a replacement.

Let's do it:

  1. Create a folder in the root of the project called fonts.

  2. Download a great universal open font to use as the fallback font. We recommend using Inter made by Rasmus Andersson. Download the zip and extract it. We'll use the fonts in the "Inter Desktop" directory.

  3. Drag the desired fonts the new fonts folder. The contents of the fonts folder should look something like this:

  4. Add these two lines of code to previews.js to set up the font directory and the global fallback font:

    previews.js now looks like this:

  5. Call the preview endpoint again and you should see the rendered artboards with the text.

    โ˜๏ธ
    If you had the text layers rendered before, it's because the SDK automatically found fonts on your local computer and set the fallback font to one of those. When running in production, you'll need to configure the fallback fonts like we did in this step.

Optimization 2: Organizing and caching artboard previews

Design Viewer can process multiple designs, so it would be best to store previews in folders based on the design ID.

Also, if we call the preview API endpoint multiple times, the artboards will be rendered each time. It should skip designs that have already been rendered.

Letโ€™s solve both of these issues:

  1. Use the Node.js fs module to check whether there is a folder called images in the public folder. If it doesn't exist, create it.

  2. Next, we'll store rendered images to /public/images/:designID/. If a folder with the design ID already exists, we'll assume that the previously rendered files are intact.

    The final code for previews.js looks like this:

  3. Call the preview endpoint again and you should see this file structure as a result:

That was it for this lesson. As always, you can see the ongoing result in the CodeSandbox below.

๐Ÿค–
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.

Edit 5-render-all-artboards-to-pngs

Next: Building the front-end part