我正在考虑使用 Google App Script 为 Figma exporter 创建一个 google 幻灯片。首先,我想将在 google Slides 中创建的形状路由到 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 文档文件形状
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 幻灯片插件。
最佳答案
这个答案怎么样?
问题和解决方法:
不幸的是,Google Slides 的形状似乎无法放到 Figma 文件的页面中。因为似乎没有 API 的方法来放置形状。但是发现可以使用Figma API将Figma文件的页面作为图像进行检索。
在这个答案中,我想提出一个示例脚本,即可以使用带有访问 token 的 Figma API 将 Figma 文件的页面作为图像放入 Google 幻灯片。因此,您可以直接将 Figma API 与 Google Apps 脚本结合使用。
用法:
1。检索访问 token
您可以在 here 查看获取访问 token 的方法.虽然也有用于检索访问 token 的 OAuth2,但在您的情况下,我认为直接在站点上生成访问 token 的方法可能是合适的。所以在这个答案中,使用了网站上生成的访问 token 。请按如下方式检索访问 token 。
Generate a personal access token
- Login to your Figma account.
- Head to the Account Settings from the top-left menu inside Figma.
- Find the Personal Access Tokens section.
- Click Create new token.
- 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.
访问 token 类似于 #####-########-####-####-####-######### ###
。在 Google Apps 脚本中,授权由 headers: {"X-Figma-Token": accessToken}
完成。
2。检索文件 key
为了使用 Figma API 检索 Figma 文件,需要文件 key 。您可以从文件的 URL 中检索文件 key 。
文件的 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
检索文件信息。然后,从检索到的文件信息中检索所有页面,并将检索到的页面放入新的Google幻灯片的每张幻灯片中。 - 我认为这个脚本的 Action 类似于the script这显示在您问题的底部。
注意事项:
- 这是一个示例脚本。所以请根据您的实际情况进行修改。
引用资料:
如果我误解了您的问题并且这不是您想要的方向,我深表歉意。
关于javascript - 如何让 Figma API 与 Google App-script API 一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58792786/