Skip to content

Instantly share code, notes, and snippets.

@jkazimierczak
Created December 9, 2023 22:48
Show Gist options
  • Save jkazimierczak/47a1b510eb5c8378fa07c169fb798fd0 to your computer and use it in GitHub Desktop.
Save jkazimierczak/47a1b510eb5c8378fa07c169fb798fd0 to your computer and use it in GitHub Desktop.
A simple spacing generator for figma token-studio from TailwindCSS spacing table: https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale

TailwindCSS design token generator

A simple design token generator for Token Studio for Figma from TailwindCSS spacing table.

https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale

First open devtools and select spacing table, right click on it and select "Use in console". This will create a temporary variable. The name may vary, so update the script accordingly (defaults to temp0). Then execute the script in the browser console, copy and paste JSON into JSON editor of Token Studio for Figma and voila!

image

nodes = Array.from(temp0.querySelectorAll("tbody tr"));
const types = [
{
type: "sizing",
prefix: "w",
},
{
type: "spacing",
prefix: "gap"
},
];
designTokens = {}
vals = nodes.forEach(n => {
const tds = n.querySelectorAll("td:nth-child(odd)");
const name = tds[0].textContent;
const px = tds[1].textContent;
types.forEach(({type, prefix}) => {
designTokens[`${prefix}-${name}`] = {
value: px,
type,
};
});
});
console.log(JSON.stringify(designTokens));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment