LAUNCHED: Resizable columns in the authoring modal

…or if you want to add an alias to a numeric variable there is no way to see values of existing variables from your library. You can only see the name of variables so you need to have another Figma window open in a new tab to actually see what you are adding… absolutely horrible UX for such a tool

That Adobe thing caused them to dump out everything they had in the works into the release two years ago. It caused so much unfinished work in the tool that I don’t think they know what works and what doesn’t.

I could live with that honestly. But their ego about it and unwillingness to examine their own support offering and to regroup like pros Is sad.

I had high hopes for Adobe to clean up some of that. It has only gotten worse.

Is this hack possible for the right side panel also? When picking variables / tokens from a list the right side panel and the modal windows for choosing variable/tokens from a list in a library should also be wider. Do you know what css selectors are controlling those widths? Thanks for sharing your hack.

EDIT: Found the html div with css width parameter for the right side panel. For changing its width you can edit the following element’s width value in it’s css: "div class=“properties_panel–drillDownContainer” style=“width: 350px;”

Upvoted. Really, really annoying with long variable names.

Thanks to @Chris_Kerr1, I came up with a little bigger hack to set the width of the columns every 10 seconds, so that you don’t need to constantly resize it, but rather only every time you load Figma.
Simply paste the following in your console and it will check every 10 seconds if your table IS NOT 300px wide, and will set it to 300px:

setInterval(() => {
    const table = document.querySelector('.variables_spreadsheet--root--m6SQ8');
    const targetStyle = '300px repeat(1, 200px) minmax(40px, 1fr)';
    
    if (table && table.style.gridTemplateColumns !== targetStyle) {
        table.style.gridTemplateColumns = targetStyle;
    }
}, 10000); // Runs every 10 seconds

How to

1. Open up your dev tools (cmd+opt+i)
2. Click Console in the top menu
3. Type allow pasting and hit enter to allow pasting
4. Paste the code in its entirety
5. Hit enter
6. Thank God

Had no idea God’s middle name was Isaac. Thank you million times! 🤝 Does this work with 1 second or will it topple the file?

Hehe sure thing 💪
Don’t know, never tried 1 sec, but I see no reason why it wouldn’t work, 1 sec is not too often. You can change the 10000 to 1000 and see what happens ✨

This is a major pain point when you’re managing anything but the smallest variable collections, or use anything resembling proper design token naming conventions. Adding to the disappointment is the notion that the solution is so simple. Simply scaling the columns to fit the variable window would go a long way even.

Because people do not know how to vote or use a forum.

In case anyone missed it, the latest Figma release notes update has resizable columns. 🥰

You can also finally drag sidebar columns wider in UI3 too now!