A simple spacing generator for figma token-studio from TailwindCSS spacing table: https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale

README.md

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!

spacingDesignTokens.js

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));