figma エクスポートダウンロード - figma エクスポートソースコードダウンロード

figmaエクスポート

その他のソースコード

v2.0.1

ダウンロード

figma-エクスポート

figma-export は、Figma、FigJam、および Figma Slides ファイルを Figma 独自の.fig / .jam / .deck形式でローカルデスクトップに一括エクスポートするための CLI ツールです。 figma-export は、チーム、プロジェクト、さらにはドラフトごとのダウンロードをサポートしています。

このツールは、Figma の REST API と Playwright を利用して、Figma ファイルの検出とダウンロードを自動化します。

要件

ノード (v20.15.x)
npm (v10.7.x)

他のバージョンも動作する可能性がありますが、正式にはテストされていません。

Figma ユーザープロファイル設定を通じて生成できる Figma アクセストークンも必要です。

インストール

リポジトリのクローンを作成するか、最新リリースをダウンロードします
リポジトリにcdます
npm install実行する

使用法

環境変数

リポジトリのルートに.envファイルを作成します。

FIGMA_EMAIL= " [email protected] "
FIGMA_PASSWORD= " hunter2 "
FIGMA_ACCESS_TOKEN= " figd_abcdefghijklmnopqrstuvwxyz "
DOWNLOAD_PATH= " /Users/anonymous/Downloads " # Absolute path where files will be downloaded to
WAIT_TIMEOUT=10000 # Time in ms to wait between downloads

SSO を使用して Figma にログインしている場合は、手動でパスワードを設定するか (wiki を参照) 、 FIGMA_EMAILおよびFIGMA_PASSWORDの代わりにFIGMA_AUTH_COOKIEを通じて Figma 認証セッション Cookie を提供することができます。

FIGMA_AUTH_COOKIE= " my-auth-cookie-value "
FIGMA_ACCESS_TOKEN= " figd_abcdefghijklmnopqrstuvwxyz "
DOWNLOAD_PATH= " /Users/anonymous/Downloads "
WAIT_TIMEOUT=10000

FIGMA_AUTH_COOKIEの値は、 __Host-figma.authn Cookie の値である必要があります。この値を取得する方法については wiki を参照してください。

files.json の生成

files.jsonによって、アカウント内のどの Figma ファイルがダウンロードされるかが決まります。

ヒント

ドラフトは Figma の単なる隠しプロジェクトなので、figma-export を使用して完全にダウンロードできます。ドラフトのプロジェクト ID を取得する方法については、Wiki を参照してください。

files.json生成するには、組み込みコマンドのいずれかを使用することをお勧めします。

npm run get-team-files {team_ids ...} - 指定されたチーム ID 内のすべてのプロジェクトのすべてのファイルを取得します (スペース区切り)
- 例: npm run get-team-files 12345 67890
npm run get-project-files {project_ids ...} - 指定されたプロジェクト ID のすべてのファイルを取得します (スペース区切り)
- 例: npm run get-project-files 12345 67890

Figma チーム ID を見つけるには、Figma ホームに移動し、左側のサイドバーでチームを右クリックし、 [リンクのコピー]をクリックします。コピーした URL の最後のセグメントには、チーム ID: https://www.figma.com/files/team/1234567890が含まれます。

プロジェクト ID を見つけるには、チームのホームに移動し、プロジェクトを右クリックして、 [リンクのコピー]をクリックします。コピーした URL の最後のセグメントには、プロジェクト ID: https://www.figma.com/files/project/1234567890が含まれます。

このファイルは、次の構造に従っている限り、自由に手動で作成できます。

[
  {
    "name" : String,
    "id" : String,
    "team_id" : String?,
    "files" : [
      {
        "key" : String,
        "name" : String
      },
      ...
    ]
  },
  ...
]

これは、Figma の GET プロジェクトファイルエンドポイントの戻り値から変更された構造です。

ダウンロードの開始

files.jsonを生成したら、 npm run startを実行してダウンロードを開始できます。各ダウンロードのステータスがコンソールに表示されます。

各ファイルは、プロジェクトの名前と ID で名付けられたフォルダー内の指定したDOWNLOAD_PATHにダウンロードされます。各ファイルは、ファイルの名前と ID (キー) として保存されます。フォルダー構造は次のようになります。

 Project A (12345)/
├── File X (123).fig
└── File Y (456).fig
Project B (67890)/
└── File Z (789).fig

get-team-files実行した場合、 files.jsonにはチーム ID への参照も含まれるため、プロジェクトはチーム ID にちなんで名付けられたフォルダーに配置されます。この場合、フォルダー構造は次のようになります。

 1029384756/
├── Project A (12345)/
│   ├── File X (123).fig
│   └── File Y (456).fig
└── Project B (67890)/
    └── File Z (789).fig
5647382910/
└── Project C (45678)/
    └── File W (012).fig

並行ダウンロード

並列ダウンロードはデフォルトでは無効になっています。これらを有効にするには、 playwright.config.tsの次のプロパティを更新します。

 export default defineConfig ( {
  ...
  fullyParallel : true ,
  workers : 3 , // The maximum number of parallel downloads
  ...
} ) ;

失敗したダウンロードの再試行

ダウンロードが失敗した場合は、 npm run retryコマンドを使用して、失敗したダウンロードのみを再実行できます。

ダウンロードはさまざまな理由で失敗する可能性がありますが、通常は Playwright タイムアウトに達することが原因であることに注意してください。 playwright.config.tsのtimeout設定を更新することで、このタイムアウトを増やすことができます。

コマンド

次のコマンドはnpm run経由で使用できます。

指示	説明
`get-team-files`	Figma チーム ID から`files.json`生成します
`get-project-files`	Figma プロジェクト ID から`files.json`を生成します
`start`	ダウンロードを開始します
`retry`	失敗したダウンロードを前回の実行から再試行します
`dry-run`	ダウンロードされるファイルをリストします
`report`	前回の実行の HTML レポートを表示します

ctrl+cを押すと、いつでもコマンドを停止できます。

既知の問題

2 要素認証はサポートされていません (2 要素認証を一時的に無効にすることをお勧めします)
ファイルをダウンロードするには、ファイルへの編集者アクセス権が必要です
一部のダウンロードには長い時間がかかる場合があり (ファイルサイズが大きい、インターネット接続が遅いなど)、Playwright タイムアウトがトリガーされ、ダウンロードが失敗する可能性があります ( playwright.config.tsでtimeout増やすことをお勧めします)。
ダウンロードするファイルの数に基づいて Figma が調整するかどうかが不明なため、レート制限が発生する可能性があります ( WAIT_TIMEOUTの使用をお勧めします)

拡大する

追加情報