https://pikmaker.com/

[]PikMaker logoPikMaker logo
Alpha

Automate your marketing visuals using Figma

PikMaker helps you auto-generate beautiful social media posts,
engaging website banners and more using our API and integrations.

Automate my visualsRead more

fetch("https://www.pikmaker.com/api/images", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "your-api-key"
  },
  body: JSON.stringify({
    template: "template-id",
    modifications: {
      "title.text": "The Lord of the Rings: The Rings of Power - Season 1 Review"
      "author.text": "Bruno Quaresma"
      "background.src": "https://yourwebsite.com/lord-of-the-rings.png"
    }
  })
})

[]Marketing visual example created using PikMakerMarketing visual
example created using PikMaker

How to use the 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.

[]First page after creating an accountFirst page after creating an
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.

[]Loading and selecting templates using the Figma file URLLoading and
selecting templates using the Figma file URL
[]Template page with code sampleTemplate page with code sample

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://www.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!

2022 PikMaker - Made with by the TweetPik team