4. Get all Pages and Artboards from the design file
So, what data do we actually need for this app? We need to know all of the Pages and Artboards that are in the design and their relationships. We'll also need to render all of the Artboards as static PNGs. All of these actions will be exposed as API endpoints.
Get all Pages
Let's start by creating an API to get all Pages in the design:
Create a
pages.js
file in theapi
folder with the following contents:Call the API at
http://localhost:3000/api/pages?designId=YOUR_DESIGN_ID
. You should see something like:
Get all Artboards
Create an
artboards.js
file in theapi
folder with the following contents:This script is basically the same as before. The only change is that instead of the
design.getPages()
method, we call thedesign.getArtboards()
method.Now call the API at
http://localhost:3000/api/artboards?designId=YOUR_DESIGN_ID
and you should see something like this:
Refactor SDK initialization logic
The SDK initialization is repeated in each file (pages.js
, artboards.js
, upload-design.js
). To avoid having to create the SDK over and over again, let's refactor the common logic out:
Create a
lib
folder in the root directory.Create a
opendesign.js
file in the newlib
directory with the following contents:Now, refactor the files inside the
api
folder to use it. This is what the newartboards.js
file looks like:Make the same change in
pages.js
andupload-design.js
.
Was this article helpful?