Generate images for your Instagram using Figma and the PikMaker API

We know PikMaker sounds magical by automating image generation using one of the most loved design tools in the market which is Figma. To help you to start using PikMaker as soon as possible we wrote a little tutorial.

Although, keep in mind PikMaker is in Alpha and maybe need some adjustments to work for you case. You can join our Discord community if you need any help or assistance. We will be happy to help you.

So lets start by sign up using your Figma account.

After creating your account, lets import a template using the Figma file URL. If you don‘t have a template yet, you can get a copy from an existent template created by us.

Paste the Figma file URL in the search field, wait for the available templates be loaded, select the ones you want to import and click on the “Import templates“ button.

With the template created, you can now start using it to auto-generate images using the API. Right now, we only support text and images modifications. Lets say you want to generate an image, based in the template above, but you want to use a different title and image. The code should look something like:

fetch("https://pikmaker.com/api/images", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "your-api-key"
  },
  body: JSON.stringify({
    template: "template-id",
    modifications: {
      "title.text": "House of the Dragon - Season 1 Review"
      "author.text": "John Doe"
      "background.src": "https://yourwebsite.com/house-of-the-dragon.png"
    }
  })
})

Note, to modify an element(or node, how Figma likes to call it) you have to use its name and the attribute. So to modify the text of the title element you have to use title.text and pass the new text. To modify an image you can use background.src and pass the new image URL. The request above returns a response like the code below:

{
  "url": "http://img.pikmaker.com/347345026884305489/347345026884305489-347345026884305489.png"
}

I hope you were able to complete this tutorial successfully but if not, join us on Discord and let us know where you stopped and we will help you. See you around!