การส่งออกฟิกม่า

figma-ส่งออก

figma-export เป็นเครื่องมือ CLI สำหรับการส่งออกไฟล์ Figma, FigJam และ Figma Slides ไปยังเดสก์ท็อปในพื้นที่ของคุณในรูปแบบ .fig / .jam / .deck ที่เป็นกรรมสิทธิ์ของ Figma figma-export รองรับการดาวน์โหลดตามทีม โปรเจ็กต์ และแม้แต่แบบร่าง

เครื่องมือนี้ใช้ประโยชน์จาก REST API และ Playwright ของ Figma เพื่อค้นหาไฟล์ Figma และดาวน์โหลดไฟล์เหล่านั้นโดยอัตโนมัติ

สารบัญ

• ความต้องการ
• การติดตั้ง
• การใช้งาน
• คำสั่ง
• ปัญหาที่ทราบ

ความต้องการ

• โหนด (v20.15.x)
• เวลาต่อนาที (v10.7.x)

เวอร์ชันอื่นๆ อาจใช้งานได้ แต่ยังไม่ได้รับการทดสอบอย่างเป็นทางการ

คุณจะต้องมีโทเค็นการเข้าถึง Figma ที่คุณสามารถสร้างผ่านการตั้งค่าโปรไฟล์ผู้ใช้ Figma ของคุณ

การติดตั้ง

1. โคลนพื้นที่เก็บข้อมูลหรือดาวน์โหลดรุ่นล่าสุด
2. cd ลงในที่เก็บ
3. เรียกใช้ 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 คุณสามารถตั้งรหัสผ่านด้วยตนเอง (ดูวิกิ) หรือ คุณสามารถให้คุกกี้เซสชันการรับรองความถูกต้อง Figma ของคุณผ่าน FIGMA_AUTH_COOKIE แทน FIGMA_EMAIL และ FIGMA_PASSWORD :

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 โปรดดูวิกิเกี่ยวกับวิธีการรับค่านี้

กำลังสร้างไฟล์.json

files.json กำหนดไฟล์ Figma ภายในบัญชีของคุณที่จะถูกดาวน์โหลด

เคล็ดลับ

แบบร่างเป็นเพียงโปรเจ็กต์ที่ซ่อนอยู่ใน Figma ดังนั้นคุณจึงสามารถดาวน์โหลดได้อย่างแน่นอนด้วย figma-export ลองอ่านวิกิเพื่อเรียนรู้เกี่ยวกับวิธีรับรหัสโปรเจ็กต์แบบร่าง

ขอแนะนำให้คุณใช้คำสั่งในตัวอย่างใดอย่างหนึ่งเพื่อสร้าง files.json :

• npm run get-team-files {team_ids ...} - รับไฟล์ทั้งหมดสำหรับโปรเจ็กต์ทั้งหมดภายใน ID ทีมที่กำหนด (คั่นด้วยช่องว่าง)
  • ตัวอย่าง: npm run get-team-files 12345 67890
• npm run get-project-files {project_ids ...} - รับไฟล์ทั้งหมดสำหรับรหัสโปรเจ็กต์ที่กำหนด (คั่นด้วยช่องว่าง)
  • ตัวอย่าง: npm run get-project-files 12345 67890

หากต้องการค้นหา ID ทีม Figma ของคุณ ให้ไปที่หน้าแรกของ Figma คลิกขวาที่ทีมของคุณในแถบด้านข้างซ้าย จากนั้นคลิก คัดลอกลิงก์ ส่วนสุดท้ายของ URL ที่คุณคัดลอกจะมี ID ทีมของคุณ: https://www.figma.com/files/team/1234567890

หากต้องการค้นหารหัสโปรเจ็กต์ ให้นำทางไปที่บ้านของทีม คลิกขวาที่โปรเจ็กต์ จากนั้นคลิก คัดลอกลิงก์ ส่วนสุดท้ายของ URL ที่คุณคัดลอกจะมีรหัสโปรเจ็กต์: https://www.figma.com/files/project/1234567890

คุณมีอิสระที่จะสร้างไฟล์นี้ด้วยตนเองได้ตราบใดที่เป็นไปตามโครงสร้างนี้:

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

นี่คือโครงสร้างที่แก้ไขจากค่าส่งคืนของจุดสิ้นสุดไฟล์โครงการ GET ของ Figma

กำลังเริ่มการดาวน์โหลด

เมื่อคุณสร้าง files.json แล้ว คุณสามารถเรียกใช้ npm run start เพื่อเริ่มการดาวน์โหลดได้ สถานะของการดาวน์โหลดแต่ละครั้งจะแสดงในคอนโซล

แต่ละไฟล์จะถูกดาวน์โหลดไปยัง DOWNLOAD_PATH ที่คุณระบุในโฟลเดอร์ที่ตั้งชื่อด้วยชื่อและ ID ของโปรเจ็กต์ แต่ละไฟล์จะถูกบันทึกเป็นชื่อไฟล์และ ID (คีย์) โครงสร้างโฟลเดอร์จะมีลักษณะดังนี้:

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

หากคุณรัน get-team-files files.json ของคุณจะมีการอ้างอิงถึงรหัสทีมด้วย ดังนั้นโปรเจ็กต์จะถูกวางไว้ในโฟลเดอร์ที่ตั้งชื่อตามรหัสทีม ในกรณีนี้ โครงสร้างโฟลเดอร์จะมีลักษณะดังนี้:

 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 คุณสามารถเพิ่มการหมดเวลานี้ได้โดยอัปเดตการกำหนดค่า timeout ใน playwright.config.ts

คำสั่ง

คำสั่งต่อไปนี้พร้อมใช้งานผ่าน npm run :

สั่งการ	คำอธิบาย
get-team-files	สร้าง files.json จาก ID ทีม Figma
get-project-files	สร้าง files.json จากรหัสโครงการ Figma
start	เริ่มการดาวน์โหลด
retry	ลองดาวน์โหลดที่ล้มเหลวจากการเรียกใช้ครั้งล่าสุดอีกครั้ง
dry-run	แสดงรายการไฟล์ที่จะดาวน์โหลด
report	แสดงรายงาน HTML ของการเรียกใช้ครั้งล่าสุด

คุณสามารถกด ctrl+c เพื่อหยุดคำสั่งได้ตลอดเวลา

ปัญหาที่ทราบ

• ไม่รองรับการตรวจสอบสิทธิ์แบบสองปัจจัย (แนะนำให้ปิดใช้งานการตรวจสอบสิทธิ์แบบสองปัจจัยชั่วคราว)
• คุณต้องมีสิทธิ์แก้ไขไฟล์จึงจะดาวน์โหลดไฟล์ได้
• การดาวน์โหลดบางรายการอาจใช้เวลานาน (ขนาดไฟล์ใหญ่ การเชื่อมต่ออินเทอร์เน็ตที่ช้า ฯลฯ) ซึ่งอาจทำให้เกิดการหมดเวลาของ Playwright และทำให้การดาวน์โหลดล้มเหลว (แนะนำให้เพิ่ม timeout ใน playwright.config.ts )
• การจำกัดอัตราอาจเกิดขึ้นเนื่องจากไม่ชัดเจนว่า Figma จะเค้นตามจำนวนไฟล์ที่คุณดาวน์โหลดหรือไม่ (แนะนำให้ใช้ WAIT_TIMEOUT )