ekspor figma

ekspor figma

figma-export adalah alat CLI untuk mengekspor file Figma, FigJam, dan Figma Slides secara massal ke desktop lokal Anda dalam format .fig / .jam / .deck milik Figma. figma-export mendukung pengunduhan berdasarkan tim, proyek, dan bahkan draf.

Alat ini memanfaatkan REST API dan Playwright Figma untuk mengotomatiskan penemuan file Figma dan mengunduhnya.

Daftar isi

• Persyaratan
• Instalasi
• Penggunaan
• Perintah
• Masalah yang diketahui

Persyaratan

• simpul (v20.15.x)
• npm (v10.7.x)

Versi lain mungkin berfungsi, tetapi belum diuji secara resmi.

Anda juga memerlukan token akses Figma yang dapat Anda hasilkan melalui pengaturan profil pengguna Figma Anda.

Instalasi

1. Kloning repositori atau unduh rilis terbaru
2. cd ke dalam repositori
3. Jalankan npm install

Penggunaan

Variabel lingkungan

Buat file .env di root repositori:

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

Jika Anda menggunakan SSO untuk masuk ke Figma, Anda dapat mengatur kata sandi secara manual (lihat wiki) atau Anda dapat memberikan cookie sesi autentikasi Figma melalui FIGMA_AUTH_COOKIE sebagai pengganti FIGMA_EMAIL dan FIGMA_PASSWORD :

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

Nilai FIGMA_AUTH_COOKIE harus berupa nilai cookie __Host-figma.authn . Silakan merujuk ke wiki tentang cara mengambil nilai ini.

Menghasilkan file.json

files.json menentukan file Figma mana dalam akun Anda yang akan diunduh.

Tip

Draf hanyalah proyek tersembunyi di Figma sehingga Anda benar-benar dapat mengunduhnya dengan figma-export. Kunjungi wiki untuk mempelajari cara mengambil draf ID proyek.

Disarankan agar Anda menggunakan salah satu perintah bawaan untuk menghasilkan files.json :

• npm run get-team-files {team_ids ...} - Mendapatkan semua file untuk semua proyek dalam ID tim tertentu (dipisahkan spasi)
  • Contoh: npm run get-team-files 12345 67890
• npm run get-project-files {project_ids ...} - Mendapatkan semua file untuk ID proyek tertentu (dipisahkan spasi)
  • Contoh: npm run get-project-files 12345 67890

Untuk menemukan ID tim Figma Anda, navigasikan ke beranda Figma Anda, klik kanan tim Anda di sidebar kiri, lalu klik Salin tautan . Segmen terakhir URL yang Anda salin akan berisi ID tim Anda: https://www.figma.com/files/team/1234567890 .

Untuk menemukan ID proyek, navigasikan ke beranda tim Anda, klik kanan proyek, lalu klik Salin tautan . Segmen terakhir URL yang Anda salin akan berisi ID proyek: https://www.figma.com/files/project/1234567890 .

Anda bebas membuat file ini secara manual asalkan mengikuti struktur ini:

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

Ini adalah struktur yang dimodifikasi dari nilai kembalian titik akhir file proyek GET Figma.

Memulai pengunduhan

Setelah Anda membuat files.json , Anda kemudian dapat menjalankan npm run start untuk memulai pengunduhan. Status setiap unduhan akan ditampilkan di konsol.

Setiap file akan diunduh ke DOWNLOAD_PATH yang Anda tentukan dalam folder yang diberi nama dengan nama dan ID proyek. Setiap file akan disimpan sebagai nama file dan ID (kunci). Struktur folder akan terlihat seperti ini:

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

Jika Anda menjalankan get-team-files , files.json Anda juga akan memiliki referensi ke ID tim sehingga proyek akan ditempatkan di folder yang diberi nama sesuai ID tim. Dalam hal ini, struktur folder akan terlihat seperti ini:

 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

Unduhan paralel

Unduhan paralel dinonaktifkan secara default. Untuk mengaktifkannya, perbarui properti berikut di playwright.config.ts :

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

Mencoba lagi unduhan yang gagal

Jika Anda menemukan unduhan yang gagal, Anda dapat mencoba menjalankan kembali unduhan yang gagal tersebut saja menggunakan perintah npm run retry .

Perhatikan bahwa pengunduhan mungkin gagal karena sejumlah alasan, tetapi biasanya karena batas waktu Playwright telah habis. Anda dapat menambah batas waktu ini dengan memperbarui konfigurasi timeout di playwright.config.ts .

Perintah

Perintah berikut tersedia melalui npm run :

Memerintah	Keterangan
get-team-files	Menghasilkan files.json dari ID tim Figma
get-project-files	Menghasilkan files.json dari ID proyek Figma
start	Mulai mengunduh
retry	Mencoba lagi unduhan yang gagal dari proses terakhir
dry-run	Daftar file yang akan diunduh
report	Tampilkan laporan HTML dari proses terakhir

Kapan saja, Anda dapat menekan ctrl+c untuk menghentikan perintah.

Masalah yang diketahui

• Otentikasi dua faktor tidak didukung (sarankan nonaktifkan sementara otentikasi dua faktor)
• Anda harus memiliki akses editor ke file untuk mendownloadnya
• Beberapa pengunduhan mungkin memerlukan waktu lama (ukuran file besar, koneksi internet lambat, dll.) yang dapat memicu batas waktu Playwright dan menyebabkan pengunduhan gagal (menyarankan untuk menambah timeout di playwright.config.ts )
• Pembatasan kecepatan dapat terjadi karena tidak jelas apakah Figma akan melakukan pembatasan berdasarkan jumlah file yang Anda unduh (sarankan menggunakan WAIT_TIMEOUT )