Как заставить API Figma работать с API-интерфейсом Google App-script? - PullRequest
Новая
       54

Как заставить API Figma работать с API-интерфейсом Google App-script?

1 голос
/ 10 ноября 2019

Я подумываю о создании слайдов Google для экспортера Figma с помощью Google App Script. Сначала я хотел бы направить фигуры, созданные в Google Slides, на Figma. Как мне настроить файл? И я не знаю, как настроить связь Oauth API между Google и Figma или, если это вообще возможно.

Я считаю, что могу начать с:

Ссылки

Ссылка на 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 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()
}
};

ПолучитьФорма файла 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 в файл Figma?

и после просмотра: https://github.com/alyssaxuu/figma-to-google-slides/blob/master/Chrome%20Extension/background.js Интересно, нужно ли мне создавать расширение для Chrome или плагин Google Slides.

1 Ответ

3 голосов
/ 11 ноября 2019

Как насчет этого ответа?

Проблема и обходной путь:

К сожалению, похоже, что формы Google Slides нельзя поместить на страницу файла Figma. Потому что, похоже, нет методов API для нанесения фигур. Но было обнаружено, что страницы файла Figma могут быть извлечены в виде изображения с помощью API Figma.

В этом ответе я хотел бы предложить пример сценария, который может быть помещен на страницы файла Figma вGoogle Slides в качестве изображения использует Figma API с токеном доступа. Таким образом, вы можете напрямую использовать Figma API со скриптом Google Apps.

Использование:

1. Получить токен доступа

Метод получения токена доступа можно посмотреть по адресу здесь . Хотя есть и OAuth2 для извлечения токена доступа, в вашей ситуации я подумал, что может пригодиться метод прямой генерации токена доступа на сайте. Поэтому в этом ответе используется сгенерированный токен доступа на сайте. Пожалуйста, получите токен доступа следующим образом.

Создайте личный токен доступа

  1. Войдите в свою учетную запись Figma.
  2. Headв настройки учетной записи в верхнем левом меню внутри 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. Затем все страницы извлекаются из информации извлеченного файла, и извлеченные страницы помещаются на каждый слайд новых Google Slides.
  • Я думаю, что действие этого сценария аналогично сценарию который показан внизу вашего вопроса.

Примечание:

  • Это пример сценария. Поэтому, пожалуйста, измените его для вашей реальной ситуации.

Ссылки:

Если я неправильно понял ваш вопрос, и это не то направление, которое вы хотите, я приношу свои извинения.

...