Get Figma variables from the tables overview

getFigmaTableVariables.js

/* 
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.

Last update: 14.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 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?")
	}

	return data
}

/** @returns {HTMLTableRowElement[]} */
function getRows() {
	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)
	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("\n")
	}

	return getRowPathFromRow(row.previousSibling)
}

/**
 * @param {HTMLTableRowElement} row
 * @returns {boolean}
 */
function isPathRow(row) {
	return row.querySelectorAll("td").length === 1
}