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

Question

我正在考虑使用 Google App Script 为 Figma 导出器创建一个 Google 幻灯片。一开始，我首先想将在谷歌幻灯片中创建的形状路由到 figma。我将如何设置我的文件？而且我不知道如何设置 Google 和 Figma 之间的 Oauth api 通信，或者是否有可能。

我相信我可以从：

参考文献

Figma 参考

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

谷歌应用脚​​本参考

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

获取 Figma 形状

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()
}
};

获取 Google Docs 文件形状

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);
                              };

创建新的 Figma 文件#

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

但是我是否还想从谷歌应用脚​​本获取文件 ID 到 Figma 文件？

看了之后：https://github.com/alyssaxuu/figma-to-google-slides/blob/master/Chrome%20Extension/background.js 我想知道我是否需要创建一个 chrome 扩展程序或一个 google Slides 插件。

Answer 1

这个答案怎么样？

问题和解决方法：

很遗憾，Google Slides 的形状似乎无法放到 Figma 文件的页面上。因为似乎没有用于放置形状的 API 方法。但是发现可以使用 Figma API 将 Figma 文件的页面作为图片进行检索。

在这个答案中，我想提出一个示例脚本，可以使用带有访问令牌的 Figma API 将 Figma 文件的页面作为图像放入 Google 幻灯片。因此，您可以直接将 Figma API 与 Google Apps Script 一起使用。

用法：

1。检索访问令牌

您可以在here 看到获取访问令牌的方法。虽然也有用于检索访问令牌的 OAuth2，但在您的情况下，我认为在站点上直接生成访问令牌的方法可能是合适的。所以在这个答案中，使用了网站上生成的访问令牌。请按如下方式检索访问令牌。

生成个人访问令牌

1. 登录到您的 Figma 帐户。
2. 从 Figma 左上角的菜单转到帐户设置。
3. 找到个人访问令牌部分。
4. 点击创建新令牌。
5. 将生成一个令牌。这将是您复制令牌的唯一机会，因此请确保将其副本保存在安全的地方。

访问令牌类似于#####-########-####-####-####-############。在 Google Apps Script 中，授权由 headers: {"X-Figma-Token": accessToken} 完成。

2。检索文件密钥

为了使用 Figma API 检索 Figma 文件，需要文件密钥。您可以从文件的 URL 中检索文件密钥。

文件的 URL 类似于https://www.figma.com/file/###/sampleFilename。在这种情况下，### 是文件密钥。

3。运行脚本

示例脚本如下。在运行脚本之前，请先设置accessToken和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);
  }
}

• 在运行myFunction() 时，首先使用文件密钥fileKey 检索文件信息。然后，从检索到的文件信息中检索所有页面，并将检索到的页面放到新的谷歌幻灯片的每张幻灯片中。
• 我认为此脚本的操作类似于您问题底部显示的the script。

注意：

• 这是一个示例脚本。所以请根据您的实际情况进行修改。

参考资料：

• Figma API
• Class UrlFetchApp
• Class SlidesApp

如果我误解了您的问题并且这不是您想要的方向，我深表歉意。