Skip to content

Instantly share code, notes, and snippets.

@jtini
Created July 15, 2020 21:06
Show Gist options
  • Select an option

  • Save jtini/5690b0c50773e43794d4a7a389519cfa to your computer and use it in GitHub Desktop.

Select an option

Save jtini/5690b0c50773e43794d4a7a389519cfa to your computer and use it in GitHub Desktop.
Run this in the Figma console to export a .js file with locally defined shared styles
(function() {
const styles = [];
const addStyle = style => {
const rawToken = style.name.match(/\([^()]+\)(?=[^()]*$)/);
let token = null;
if (rawToken && rawToken[0] !== '(Underline)') {
token = `--${rawToken[0].split('(')[1].split(')')[0]}`
}
styles.push({
...style,
name: style.name,
description: style.description,
key: style.key,
type: style.type,
token
})
}
const textStyles = figma.getLocalTextStyles();
const paintStyles = figma.getLocalPaintStyles();
const gridStyles = figma.getLocalGridStyles();
const effectStyles = figma.getLocalEffectStyles();
textStyles.forEach(sty => addStyle(sty));
paintStyles.forEach(sty => addStyle(sty));
gridStyles.forEach(sty => addStyle(sty));
effectStyles.forEach(sty => addStyle(sty));
const fileContent = `module.exports = ${JSON.stringify(styles, null, 2)}`
const download = (content, fileName, contentType) => {
const a = document.createElement("a");
const file = new Blob([content], {type: contentType});
a.href = URL.createObjectURL(file);
a.download = fileName;
a.click();
}
download(fileContent, 'tokens.js', 'text/javascript');
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment