fabe/gatsby-source-figma

🎨 Kết nối Figma với Gatsby qua GraphQL

Transformer bất kỳ tài liệu Figma nào thành nguồn dữ liệu cho site Gatsby.

gatsby-source-figma là plugin cho phép truy xuất nội dung từ Figma như file thiết kế, hình ảnh (artboard/node), và dự án trực tiếp trong cấu hình Gatsby. Dựa trên Figma REST API, plugin hỗ trợ truy vấn thông qua GraphQL để tích hợp thiết kế vào quy trình build.

✨ Điểm nổi bật

• Truy vấn file Figma: lấy tên, thời gian sửa đổi, URL thumbnail và cấu trúc trang.
• Truy vấn hình ảnh/node: xuất artboard dưới dạng hình ảnh với hỗ trợ định dạng png, jpg, svg, pdf.
• Hỗ trợ tùy chỉnh scale và format: điều chỉnh tỉ lệ (0.01–4) và định dạng đầu ra hình ảnh.
• Truy vấn dự án Figma: truy cập components, frames, instances và lọc theo tên hoặc regex.
• Tích hợp GraphQL: sử dụng GraphiQL để khám phá và truy vấn dữ liệu dễ dàng.
• Cấu hình đơn giản: chỉ cần accessToken, fileId hoặc projectId trong gatsby-config.js.

💡 Vì sao đáng chú ý

gatsby-source-figma giúp các nhà phát triển thiết kế và frontend hợp tác chặt chẽ hơn bằng cách đưa trực tiếp nội dung Figma vào pipeline Gatsby. Thay vì xuất thủ công hoặc dùng công cụ trung gian, plugin này tự động đồng bộ file, hình ảnh và dự án Figma thông qua API, giảm thiểu công đoạn thủ công. Phù hợp cho các dự án cần tích hợp thiết kế UI từ Figma một cách linh hoạt và tự động.

---

#Figma #Gatsby #GraphQL #Plugin #OpenSource #TiniX