Figma│コンポーネントの情報を出力するFigmaライブラリ

特定のFigmaファイルの情報をスプレッドシートに出力するライブラリを作成してみました。

このライブラリは「Figma をスプレッドシート用の疑似DBに変換するエンジン」です。

しかも

  • API制約
  • GAS制約
  • 公開ライブラリ制約

を全部考慮した設計になっております。

ただしGASの制限でJSONが50MB以上を超えたらエラーがでますので、
大容量のデータには向いていません。

目次

コンポーネントの情報を出力するFigmaライブラリ

実際の使い方の例です。

全体をシートに出力

ファイル全体のコンポーネントの情報を出力します。

function run_export() {
  var fileKey = 'YOUR_FILE_KEY'; // ★https://www.figma.com/design/YOUR_FILE_KEY/
  var token = PropertiesService.getScriptProperties().getProperty('FIGMA_TOKEN');

  var result = FigmaSheet.exportToSheet(fileKey, {
    token: token,
    sheetName: 'Figma情報一覧'
  });

  Logger.log(result);
}

特定セクションだけ出力

function run_export_section() {
  var fileKey = 'YOUR_FILE_KEY'; // ★https://www.figma.com/design/YOUR_FILE_KEY/

  // セクション nodeId(例)
  var sectionIds = ["'123:456", "'789:1011"]; // 1個なら "'123:456" でもOK

  var result = exportSectionToSheet(fileKey, sectionIds, {
    sheetName: 'Figma情報一覧'
  });

  Logger.log(result);
}

条件を細かく指定

コンポーネントの種類や出力したい情報も選べます。

function run_export_section() {
  var fileKey =  'YOUR_FILE_KEY'; // https://www.figma.com/design/YOUR_FILE_KEY/
  var token = PropertiesService.getScriptProperties().getProperty('FIGMA_TOKEN');

  // ★生の nodeId(' は不要)
  var sectionIds = ['9:5', '9:3'];

  var result =  FigmaSheet.exportSectionToSheet(fileKey, sectionIds, {
    token: token,
    sheetName: 'Figma情報一覧',

    // ★出力したい列だけ指定
    fields: [
      'mainComponent',
      'nodeId',
      'variantName',
      'variantId',
      'layerPath',
      'componentKey',
      'pageName',
      'instanceName',
      'componentSetName',
      'x','y','w','h',
      'visible',
      'opacity',
      'rotation',
      'constraintsHorizontal',
      'constraintsVertical',
      'fills',
      'strokes',
      'textStyle',
      'fontFamily',
      'fontSize',
      'characters'
    ],

    nodeTypes: ['INSTANCE', 'COMPONENT', 'COMPONENT_SET', 'TEXT']
  });

  Logger.log(result);
}

Figmaライブラリの設定方法

スクリプトプロパティにFigmaのトークンを入れておきます。

次にGASのライブラリのプラスボタンを押してスクリプトID(FIGMA_TOKEN)を入力。

FigmaのトークンはFigmaの設定から取得しましょう。

バージョンは一番大きい数字に(最新)

IDはFigmaSheetとしました。

スクリプトID後述
バージョン一番大きい数字(最新)
IDFigmaSheet

あとは記事冒頭の関数を試すだけです。

初回は権限の許可のポップアップがでます。

スクリプトIDは下記になります。

サービス

Service

デザイン制作に関心がありましたら、ぜひ詳細をご覧ください。

  • URLをコピーしました!
目次