Open Design

3. Upload a design and get its ID

Download an example design or use your own if you have one

Find a design to use Design Viewer with. If you don't have one, download this example.



Download the example design

Place the design in the project folder

Move the design to the root folder of our project. In this tutorial, we call this design file tutorial.sketch but feel free to use another name or file format.

The file structure in your project should now look like this:



Upload the design and get the ID

  1. Create a folder called api folder inside the pages folder. Any file in the api folder will be treated as an API endpoint. If you want to learn more about Next.js API Routes follow this link.

  2. Create an upload-design.js file inside the api folder with the following contents:

    In this script, we are creating an instance of SDK and then we import the design file placed in the root folder. We are returning the design ID as the response. Let’s see it in action.

  3. Start the development server if it’s not already running.

  4. Now open http://localhost:3000/api/upload-design in your browser. It will take a couple of seconds before the server returns the design ID. When the server responds, you should see the following:

  5. Copy this design ID somewhere. We will use it in the next part of the tutorial.

🤖
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 2-Upload-a-design-and-get-its-ID

Next: Get all Pages and Artboards from the design file