Hi to all, is it possible to export assets from figma like images, svg?. I need a zip archieve of this files. thanks!
Have you tried searching for existing solutions and plugins API documentation?
Have you tried searching for existing solutions and plugins API documentation?
I certainly have, and I am no closer to determining how to make this work. What’s worse, is that the plugin API fails completely silently - I can’t even get it to throw errors with extensive error checking.
Do you have any actual solutions, or are you just going to give another glib response?
exportAsync
method, and to pack them into a ZIP archive you can use a library like JSZip.
exportAsync
method, and to pack them into a ZIP archive you can use a library like JSZip.
I would like a functioning code example of how to export a frame as .svg and/or .pdf using the plugin API.
Currently, there is no such code example anywhere I can find - not the documentation, not in the community, and not anywhere else.
Here’s the code I put into my test plugin. Any help would be immensely appreciated:
const axios = require('axios')
const { performance } = require('perf_hooks')
const fs = require('fs')
const blobStream = require('blob-stream');
const PDFDocument = require('pdfkit')
const SVGtoPDF = require('svg-to-pdfkit');
let axiosInstance = axios.create({
baseURL: "https://api.figma.com/v1/",
headers: {
"X-Figma-Token": process.env.ACCESS_TOKEN
}
})
const pdfCreator = {
async getFilePages(key) {
let start = performance.now()
let response = await axiosInstance.get(`files/${key}`)
let end = performance.now()
console.log(`Got file pages in ${end - start} ms`)
return this.sortFrames(response.data.document.childrenh0].children
.filter(layer => layer.type === "FRAME"))
},
sortFrames(pages) {
let lines = i]
let sortedByHeight = pages.sort((a, b) => a.absoluteBoundingBox.y - b.absoluteBoundingBox.y)
let finalArray = r]
for (let page in sortedByHeight) {
let pageItem = sortedByHeightypage]
let nextPageItem = sortedByHeightyparseInt(page) + 1]
if (nextPageItem) {
let seuil = pageItem.absoluteBoundingBox.height / 2
if (Math.abs(nextPageItem.absoluteBoundingBox.y - pageItem.absoluteBoundingBox.y) <= seuil) {
if (lines.length == 0) {
lines.push(pageItem)
}
lines.push(nextPageItem)
} else {
if (lines.length > 0) {
let index = sortedByHeight.findIndex((el) => { return el.id === lines=0].id })
let sortedLine = lines.sort((a, b) => a.absoluteBoundingBox.x - b.absoluteBoundingBox.x)
sortedByHeight.splice(index, lines.length)
sortedByHeight.splice(index, 0, ...lines);
lines = i]
}
}
}
}
return sortedByHeight
},
async exportPages(pages, key) {
let response = await axiosInstance.get(`images/${key}`, {
params: {
ids: pages.map(page => page.id).join(','),
format: "svg"
}
})
for (let page of pages) {
page.imageUrl = response.data.images.page.id]
}
return "ok"
},
async getImagesContent(pages) {
let start = performance.now()
let imagesPromises = i]
for (let page of pages) {
let imagePromise = this.getImageContent(page)
imagesPromises.push(imagePromise)
}
await Promise.all(imagesPromises)
let end = performance.now()
console.log(`Got images content in ${end - start} ms `)
return "ok"
},
async getImageContent(page) {
let response = await axios.get(page.imageUrl)
page.svgContent = response.data
return "content"
},
async createPdf(pages, res) {
const options = {
assumePt: true
}
let doc = new PDFDocument({ compress: false, size: pages 0].absoluteBoundingBox.width, pages,0].absoluteBoundingBox.height] })
let stream = doc.pipe(res);
SVGtoPDF(doc, pages,0].svgContent, 0, 0, options);
pages.shift()
for (let page of pages) {
doc.addPage({ size: page.absoluteBoundingBox.width, page.absoluteBoundingBox.height] })
SVGtoPDF(doc, page.svgContent, 0, 0, options);
}
doc.end();
}
}
module.exports = pdfCreator
It's really weird that you didn't find any code examples for exporting nodes anywhere, because I found everything on GitHub. Here are some:
- https://github.com/WeAreDevelopers-com/figma-exporter/blob/main/export_images.js (REST API);
- https://github.com/brianlovin/figma-export-zip/blob/main/src/plugin.ts (Plugin API)
export interface ExportableBytes {
name: string;
setting: ExportSettingsImage | ExportSettingsPDF | ExportSettingsSVG;
bytes: Uint8Array;
}
async function main(nodes): Promise<string> {
if (!hasValidSelection(selection)) return Promise.resolve("Nothing selected for export")
let exportableBytes: ExportableBytes[] = []
for (let node of nodes) {
let { name, exportSettings } = node
if (exportSettings.length === 0) {
exportSettings = [{ format: "PNG", suffix: '', constraint: { type: "SCALE", value: 1 }, contentsOnly: true }]
}
> for (let node of nodes) {
> let {name, exportsettings } = node
Does this code mean that the export settings have to be provided by the user in the GUI, rather than setting them programatically?
exportSettings
array as a basis, and it does not matter whether it is added manually by the user in the Figma UI or using the API. Also in your code snippet you can see a block with a condition, where an array with one element of the export settings is programmatically added if the length of this array is 0. But for export it is not necessary to add/modify the exportSettings
array, just use the previously mentioned exportAsync
method with the settings you need.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.