Save image programatically in Figma

Try this to understand what is the current element.

(async () => {

const json = await figma.currentPage.selection[0].exportAsync({ format: 'JSON_REST_V1' })

// Return a JSON object in the same format as the Figma REST API response

console.log(json.document)

})()

Then exec this for get an image

(async () => {

const bytes1 = await figma.currentPage.selection[0].exportAsync({

format: 'JPG',

constraint: { type: 'SCALE', value: 2 },

})

// Return a JSON object in the same format as the Figma REST API response

var blob = new Blob([bytes1], { type: "image/jpeg" });

var link = document.createElement('a');

link.href = window.URL.createObjectURL(blob);

var fileName = "reportName.jpg";

link.download = fileName;

link.click();

})() 

If you want to set a variable programmatically

Set the variable name:

figma.variables.createVariable("hola", "VariableCollectionId:8:45", "STRING")

Explore variables:

figma.variables.getLocalVariables()

Attach the variable in the text you want, in this case the name of the variable is "name":

Get the desired index (in this example is 0) variable and then set the value using the random mode created:

figma.variables.getLocalVariables()[0].setValueForMode("8:0", '"Jorge Useche2")') 

Get the value to check if ok:

figma.variables.getLocalVariables()[0].valuesByMode

Example recursive script:

(async () => {

var names = [

"First Name",

"Second Name",

"Third Name",

];

for (const name of names) {

console.log("Name:", name);

figma.variables.getLocalVariables()[0].setValueForMode("8:0", '"' + name + '")');

var imgBytes = await figma.currentPage.selection[0].exportAsync({

format: 'JPG',

constraint: { type: 'SCALE', value: 0.7 },

})

var blob = new Blob([imgBytes], { type: "image/jpeg" });

var link = document.createElement('a');

link.href = window.URL.createObjectURL(blob);

var fileName = name + ".jpg";

link.download = fileName;

link.click();

await new Promise(resolve => setTimeout(resolve, 500)); // wait for download

}

})()

Additionally you can add a wait function in case of rendering icons or emojis:

function esperar(milisegundos) {

return new Promise((resolve) => {

setTimeout(() => {

console.log('¡Esperé ' + milisegundos + ' milisegundos!')

resolve('¡Esperé ' + milisegundos + ' milisegundos!');

}, milisegundos);

});

}

(async () => {

var names = [

"Soy 🇨🇴 🇲🇽 🇧🇷 🇦🇷 🌀 🍃 💻 🇨🇳 💃 🇻🇪",

];

for (const name of names) {

console.log("Name:", name);

figma.variables.getLocalVariables()[0].setValueForMode("8:0", '"' + name + '"');

await esperar(1000)

var imgBytes = await figma.currentPage.selection[0].exportAsync({

format: 'JPG',

constraint: { type: 'SCALE', value: 0.7 },

})

var blob = new Blob([imgBytes], { type: "image/jpeg" });

var link = document.createElement('a');

link.href = window.URL.createObjectURL(blob);

var fileName = name + ".jpg";

link.download = fileName;

link.click();

await new Promise(resolve => setTimeout(resolve, 500)); // wait for download

}

})()