我如何使Figma API与Google App脚本API一起使用()

一箫一剑平生意,负尽狂名十五年。这篇文章主要讲述我如何使Figma API与Google App脚本API一起使用?相关的知识,希望能为你提供帮助。
我正在考虑使用Google App脚本为Figma导出器创建一个Google幻灯片。首先,我首先要将从Google幻灯片创建的形状路由到figma。我将如何设置文件?而且我不知道如何在Google和Figma之间建立Oauth api通信,或者甚至不可能。
我相信我可以从以下开始:
参考Figma参考https://github.com/figma/plugin-samples/blob/master/react/src/code.ts
Google应用程序脚本参考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); }

但是我还想从Google应用脚本中获取文件ID到Figma文件吗?
并且在查看之后:https://github.com/alyssaxuu/figma-to-google-slides/blob/master/Chrome%20Extension/background.js我想知道是否必须创建chrome扩展程序或google幻灯片插件。
答案这个答案怎么样?
问题和解决方法:[遗憾的是,似乎Google幻灯片的形状无法放在Figma文件的页面中。因为似乎没有用于放置形状的API方法。但是发现使用Figma API可以将Figma文件的页面检索为图像。
[在此答案中,我想提出一个示例脚本,即可以使用带有访问令牌的Figma API将Figma文件的页面作为图像放置到Google幻灯片中。因此,您可以直接将Figma API与Google Apps脚本一起使用。
用法:1。检索访问令牌
您可以在here处看到检索访问令牌的方法。尽管也有OAuth2用于检索访问令牌,但是在您的情况下,我认为在站点上直接生成访问令牌的方法可能是合适的。因此,在此答案中,将使用站点上生成的访问令牌。请按以下方式获取访问令牌。
生成个人访问令牌
  1. 登录到您的Figma帐户。
  2. 从Figma的左上方菜单转到帐户设置。
  3. 查找个人访问令牌部分。
  4. 单击创建新令牌。
  5. 将生成一个令牌。这是复制令牌的唯一机会,因此请确保将其副本保存在安全的地方。
访问令牌类似于#####-########-####-####-####-############。在Google Apps脚本中,授权由headers: {"X-Figma-Token": accessToken}完成。
2。检索文件密钥
为了使用Figma API检索Figma文件,需要文件密钥。您可以从文件的URL中检索文件密钥。
文件的URL类似于https://www.figma.com/file/###/sampleFilename。在这种情况下,###是文件密钥。
3。运行脚本
示例脚本如下。在运行脚本之前,请设置变量accessTokenfileKey
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检索文件信息。然后,从检索到的文件信息中检索所有页面,并将检索到的页面放入新的Google幻灯片的每个幻灯片中。
  • 我认为此脚本的操作类似于问题底部显示的the script。
注意:
  • 这是一个示例脚本。因此,请根据您的实际情况对其进行修改。
参考:
  • Figma API
  • Class UrlFetchApp
  • Class SlidesApp
【我如何使Figma API与Google App脚本API一起使用()】如果我误解了你的问题,而这不是你想要的方向,我深表歉意。

    推荐阅读