Skip to content

Instantly share code, notes, and snippets.

@vdawg-git

vdawg-git/getFigmaTableVariables.js

Last active August 15, 2025 08:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save vdawg-git/e37112eb7caa9990ef32fd3610d59b54 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save vdawg-git/e37112eb7caa9990ef32fd3610d59b54 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. vdawg-git revised this gist Aug 15, 2025. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion getFigmaTableVariables.js
    View file
    Original file line number Diff line number Diff line change
    @@ -68,7 +68,7 @@ function getColumnNames() {
    */
    function getRowPathFromRow(row) {
    if (isPathRow(row)) {
    return row.innerText.split("/")
    return row.innerText.split("\n")
    }

    return getRowPathFromRow(row.previousSibling)
  2. vdawg-git revised this gist Aug 15, 2025. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion getFigmaTableVariables.js
    View file
    Original file line number Diff line number Diff line change
    @@ -39,7 +39,6 @@ function getRows() {
    */
    function getDataFromRow(row, columns) {
    const path = getRowPathFromRow(row)
    console.log({ path })
    const [name, ...items] = [...row.querySelectorAll("td")].map(
    (element) => element.innerText
    )
  3. vdawg-git revised this gist Aug 14, 2025. 1 changed file with 2 additions and 4 deletions.
    6 changes: 2 additions & 4 deletions getFigmaTableVariables.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,11 +1,9 @@
    /*
    Just copy paste all this into the console.
    Just paste and run it in the devtools. Then you can copy the resulting array.
    This gets the variables from the current table in the Figma Variables overview.
    Just paste and run it in the devtools. Then you can copy the resulting array.
    Last update: 12.08.2025
    Last update: 14.08.2025
    */

    console.log(getVars())
  4. vdawg-git revised this gist Aug 14, 2025. 1 changed file with 65 additions and 10 deletions.
    75 changes: 65 additions & 10 deletions getFigmaTableVariables.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,32 +1,87 @@
    /*
    Just copy paste all this into the console.
    This gets the variables from the current table in the Figma Variables overview.
    Just paste and run it in the devtools. Then you can copy the resulting array.
    Last update: 12.08.2025
    */

    console.log(getVars())

    /**
    * The element of the returned array
    * @typedef {Object} VariableItem
    * @property {string[]} path Something like [ "grey" ] or [ "button", "primary" ]
    * @property {string} name
    * @property {Record<string, string>} values
    */

    function getVars() {
    const data = getRows().map(getDataFromRow);
    const columnNames = getColumnNames()
    const data = getRows().map((row) => getDataFromRow(row, columnNames))

    if (!data) {
    throw new Error('No table with variables found. R u on the right page?');
    }
    if (!data) {
    throw new Error("No table with variables found. R u on the right page?")
    }

    console.log(data);
    return data
    }

    /** @returns {HTMLTableRowElement[]} */
    function getRows() {
    return $$('table tr:has(td button[data-fpl-component])');
    return $$("table tr:has(td button[data-fpl-component])")
    }

    /**
    * @param {HTMLTableRowElement} row
    * @param {readonly string[]} columns Excluding `name`
    * @returns {VariableItem}
    */
    function getDataFromRow(row, columns) {
    const path = getRowPathFromRow(row)
    console.log({ path })
    const [name, ...items] = [...row.querySelectorAll("td")].map(
    (element) => element.innerText
    )
    if (!items) {
    console.log(row)
    }
    const values = Object.fromEntries(
    items.map((text, index) => [columns[index], text])
    )

    return { name, path, values }
    }

    /**
    * @returns {readonly string[]} The names of the columns, excluding `name` as its always there
    */
    function getColumnNames() {
    return $$("table tbody>tr:first-child td")
    .map((item) => item.innerText)
    .filter((_, index) => index !== 0)
    .filter(Boolean)
    }

    /**
    * @param {HTMLTableRowElement} row
    * @returns {readonly string[]}
    */
    function getRowPathFromRow(row) {
    if (isPathRow(row)) {
    return row.innerText.split("/")
    }

    return getRowPathFromRow(row.previousSibling)
    }

    /**
    * @param {HTMLTableRowElement} row
    * @returns { string[] }
    * @returns {boolean}
    */
    function getDataFromRow(row) {
    return [...row.querySelectorAll('td')].map((element) => element.innerText);
    function isPathRow(row) {
    return row.querySelectorAll("td").length === 1
    }

    getVars();
  5. vdawg-git created this gist Aug 12, 2025.
    32 changes: 32 additions & 0 deletions getFigmaTableVariables.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    /*
    This gets the variables from the current table in the Figma Variables overview.
    Just paste and run it in the devtools. Then you can copy the resulting array.
    Last update: 12.08.2025
    */

    function getVars() {
    const data = getRows().map(getDataFromRow);

    if (!data) {
    throw new Error('No table with variables found. R u on the right page?');
    }

    console.log(data);
    }

    /** @returns {HTMLTableRowElement[]} */
    function getRows() {
    return $$('table tr:has(td button[data-fpl-component])');
    }

    /**
    * @param {HTMLTableRowElement} row
    * @returns { string[] }
    */
    function getDataFromRow(row) {
    return [...row.querySelectorAll('td')].map((element) => element.innerText);
    }

    getVars();