如何让 Figma API 与 Google App-script API 一起使用？

Question

I am thinking of creating a google slides to Figma exporter using Google App Script. Starting out I would first like to route the shapes created in from google Slides to figma. How would I go about setting up my file? And I don't know how to set up the Oauth api communication between Google and Figma or if it's even possible.

I believe that I can start with:

References

Figma reference

https://github.com/figma/plugin-samples/blob/master/react/src/code.ts

google app script reference

https://github.com/gsuitedevs/apps-script-samples/blob/master/slides/style/style.gs#L30

Get Figma Shape

var file=projectid.key()
var=figma rectangle= file()

  await figma.loadFontAsync({ family: "Roboto", style: "Regular" })
name;


var figmaShape = {
figma.ui.onmessage = msg => {
  if (msg.type === 'create-rectangles') {
    const nodes = []    
        for (let i = 0; i < msg.count; i++) {
      const rect = figma.createRectangle()
      rect.x = i * 150
      rect.fills = [{type: 'SOLID', color: {r: 1, g: 0.5, b: 0}}]
      figma.currentPage.appendChild(rect)
      nodes.push(rect)
    }

    figma.currentPage.selection = nodes
    figma.viewport.scrollAndZoomIntoView(nodes)
  }

  figma.closePlugin()
}
};

Get Google Docs File Shape

var powerpointfile = driveApp.getFileById = ("### Slide file ID ###")

function powerPointShape = () {
var slide = SlidesApp.getActivePresentation().getSlides()[0];
var shape = slide.insertShape(SlidesApp.ShapeType.TEXT_BOX, 100, 200, 300,
getObjectId.element(SHAPE);
                              };

Create new Figma file#

file.getSlides.shape = (powerPointShape, ) => {
  this.powerPointShape.getRigh()=this.figmaShape(rect.x);
  this.powerPointShape.getleft()=this.figmaShape(rect.y);
}

But from there would I also want to get the file id from google app script to a Figma File?

and after looking at: https://github.com/alyssaxuu/figma-to-google-slides/blob/master/Chrome%20Extension/background.js I wonder if I would have to create a chrome extension or a google Slides plugin.

Answer 1

How about this answer?

Issue and workaround:

Unfortunately, it seems that the shapes of Google Slides cannot be put to the page of Figma file. Because it seems that there are no methods of API for putting the shapes. But it was found that that the pages of Figma file can be retrieved as the image using Figma API.

In this answer, I would like to propose the sample script that the pages of Figma file can be put to the Google Slides as the image using Figma API with the access token. So you can directly use Figma API with Google Apps Script.

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:

• Figma API
• Class UrlFetchApp
• Class SlidesApp

If I misunderstood your question and this was not the direction you want, I apologize.