Figma to Google Slides using Google Apps Script

GasTips / Figma
Google Apps Script / Figma / Slides

Gists

In this sample script, all pages in the Figma file are retrieved and the retrieved pages are put to new Google Slides as the image.

Usage

1. Retrieve access token

You can see the method for retrieving the access token at here. Although there is also OAuth2 for retrieving the access token, in your situation, I thought that the method for directly generating the access token on the site might be suitable. So in this answer, the generated access token on the site is used. Please retrieve the access token as follows.

Generate a personal access token

  1. Login to your Figma account.
  2. Head to the Account Settings from the top-left menu inside Figma.
  3. Find the Personal Access Tokens section.
  4. Click Create new token.
  5. A token will be generated. This will be your only chance to copy the token, so make sure you keep a copy of this in a secure place.

The access token is like #####-########-####-####-####-############. At Google Apps Script, the authorization is done by headers: {"X-Figma-Token": accessToken}.

2. Retrieve file key

In order to retrieve the Figma file using Figma API, the file key is required. You can retrieve the file key from the URL of the file.

The URL of the file is like https://www.figma.com/file/###/sampleFilename. In this case, ### is the file key.

3. Run script

The sample script is as follows. Before you run the script, please set the variables of accessToken and fileKey.

function myFunction() {
  var accessToken = "###"; // Please set your access token.
  var fileKey = "###"; // Please set the file key.

  var baseUrl = "https://api.figma.com/v1";
  var params = {
    method: "get",
    headers: { "X-Figma-Token": accessToken },
    muteHttpExceptions: true
  };
  var fileInfo = JSON.parse(
    UrlFetchApp.fetch(baseUrl + "/files/" + fileKey, params)
  );
  var children = JSON.parse(
    UrlFetchApp.fetch(
      baseUrl +
        "/images/" +
        fileKey +
        "?format=jpg&scale=3&ids=" +
        fileInfo.document.children
          .map(function(c) {
            return c.id;
          })
          .join(","),
      params
    )
  );
  if (!children.err) {
    var s = SlidesApp.create("sampleSlide");
    var slide = s.getSlides()[0];
    var keys = Object.keys(children.images);
    keys.forEach(function(c, i) {
      slide.insertImage(children.images[c]);
      if (i != keys.length - 1) slide = s.insertSlide(i + 1);
    });
  } else {
    throw new Error(children);
  }
}
  • When myFunction() is run, at first, the file information is retrieved with the file key fileKey. Then, all pages are retrieved from the retrieved file information, and the retrieved pages are put to each slide of new Google Slides.
  • I think that the action of this script is similar to the script which is shown at the bottom of your question.

Note

  • This is a sample script. So please modify it for your actual situation.

References

 Share!