Skip to content

Instantly share code, notes, and snippets.

@Wolfr
Created September 28, 2018 06:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Wolfr/19d719ff0cbb044063ce3ac60bc26395 to your computer and use it in GitHub Desktop.
Save Wolfr/19d719ff0cbb044063ce3ac60bc26395 to your computer and use it in GitHub Desktop.
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