Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
About the shortest code I could write to render an image out from the Figma API and make it clear whether it is loading/has loaded.
// About the shortest code I could write to render an image out from the Figma API and make it clear whether it is loading/has loaded.
// https://github.com/wolfr
// If you use this code please change to your own access token
const PERSONAL_ACCESS_TOKEN = ''; // Your personal access token here
function apiRequest(endpoint) {
return fetch('https://api.figma.com/v1' + endpoint, {
method: 'GET',
headers: { "x-figma-token": PERSONAL_ACCESS_TOKEN }
}).then(function(response) {
return response.json();
}).catch(function (error) {
return { err: error };
});
}
const fileKey = ''; // Your file key here
const nodeId = '7%3A42' // Your node id here, example provided because the semicolon is encoded
apiRequest('/images/' + fileKey + '?ids=' + nodeId + '&scale=2&quality=jpg')
.then(function (apiResponse) {
var imgUrl = Object.entries(apiResponse.images)[0][1];
// Create image and set its URL
var img = document.createElement('img');
img.setAttribute("src", imgUrl);
document.body.appendChild(img);
// Display a success message
var p = document.createElement('p');
p.innerHTML = 'Image loading OK';
document.body.appendChild(p);
document.querySelector('p:first-child').remove();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.