Created
April 10, 2019 23:11
-
-
Save seanriceaz/8225a6b2e3b3464ceab29f77e156db4b to your computer and use it in GitHub Desktop.
Sync figma layer images up to a firebase bucket
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// NOTE: This expects a few things to be stored in a .env file: | |
// FBKEY=xxxxxxxxx | |
// FIGMAPERSONALTOKEN=xxxxxxxxxxx | |
// GOOGLE_APPLICATION_CREDENTIALS=/users/your.name/googlekeys/firebase-storage.json | |
const axios = require('axios'); | |
const dotenv = require('dotenv'); | |
const Storage = require('@google-cloud/storage'); | |
dotenv.config(); | |
// Creates a client | |
const storage = new Storage({ | |
projectId: 'PROJECTID', | |
}); | |
// The name for the new bucket | |
const bucketName = 'BUCKETNAME'; | |
// Hard code (for now) figma file and page ID's so we can grab their contents | |
const figmaIDs = { | |
documentID: 'DOCUMENTID', // Design system document (random looking alphanumeric string) | |
pageID: 'PAGEID', // Page with the stuff to export (looks like 11%3A0) | |
}; | |
figmaIDs.pageID = decodeURIComponent(figmaIDs.pageID); | |
const figmaFileURI = `https://api.figma.com/v1/files/${figmaIDs.documentID}`; | |
const figmaImageURI = `https://api.figma.com/v1/images/${figmaIDs.documentID}`; | |
// Make the request | |
axios.get(figmaFileURI, | |
{ | |
headers: { | |
'X-FIGMA-TOKEN': process.env.FIGMAPERSONALTOKEN, | |
}, | |
}).then((file) => { | |
const layers = {}; | |
// cycle through pages | |
const pages = file.data.document.children; | |
for (let page = 0; page < pages.length; page++) { | |
// If this is the page we want | |
if (pages[page].id === figmaIDs.pageID) { | |
// take all non-ignored children and store them so we can get their image URLs. | |
const images = pages[page].children; | |
for (let image = 0; image < images.length; image++) { | |
if (images[image].name.toLowerCase().indexOf('ignore' < 0)) { | |
layers[images[image].id] = images[image]; | |
} | |
} | |
} | |
} | |
return layers; | |
}).then(async (layers) => { | |
let imageIDs = []; | |
// create an array of image IDs | |
imageIDs = Object.keys(layers); | |
if (imageIDs.length > 0) { | |
// get our object of Urls. | |
const imageURI = `${figmaImageURI}?ids=${encodeURIComponent(imageIDs.toString())}&scale=2`; | |
const imageObj = await axios.get(imageURI, { | |
headers: { | |
'X-FIGMA-TOKEN': process.env.FIGMAPERSONALTOKEN, | |
}, | |
}); | |
// marry the URLs to the names of the layer | |
const imagesKeys = Object.keys(imageObj.data.images); | |
const urlsWithNames = []; | |
for (const id in imagesKeys) { | |
if (id) { | |
urlsWithNames.push({ | |
name: layers[imagesKeys[id]].name, | |
url: imageObj.data.images[imagesKeys[id]], | |
}); | |
} | |
} | |
return urlsWithNames; | |
} | |
throw (Error('No images')); | |
}).then(async (result) => { | |
// push these files up. | |
const bucketOPromises = []; | |
for (const image in result) { | |
if (image) { | |
bucketOPromises.push(storage | |
.bucket(bucketName) | |
.upload(result[image].url, { | |
destination: `ds-sync/figma/${result[image].name}.png`, | |
})); | |
} | |
} | |
const results = await Promise.all(bucketOPromises); | |
return results; | |
}).catch((err) => { | |
console.log(err); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment