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.
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
Create a folder called
apifolder inside the
pagesfolder. Any file in the
apifolder will be treated as an API endpoint. If you want to learn more about Next.js API Routes follow this link.
upload-design.jsfile inside the
apifolder 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.
Start the development server if it’s not already running.
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:
Copy this design ID somewhere. We will use it in the next part of the tutorial.
Was this article helpful?