Ability to expand right workspace panel

  1. As a user, I can drag and expand my Layers and Assets work-panel. I’d like to have that functionality on the right work-panel (Design, Prototype, Inspect panel). Some of our design tokens are a bit long and are truncated due to character count limits.

1 Like

I want to be able to drag the right panel to resize it like I can with the left panel so I can view the full names of my color styles.

Does anyone else experience this? Is anyone using a plugin or workaround to help solve this?

4 Likes

Hi,

We have color and type libraries set up to align with our development environment meaning we can just have “red” or “body” as a description. It needs to be longer.

However, The right bar containing all our properties has become almost unusable in some circumstances due to it’s hugely constrained width. We can often just see a category title, and not the actual label of the color or type.

With the left layers panel being resizable, it would make sense to provide this same flexibility for designers to better utilise our working space.

Thank you,

Craig

Hi,

I’d like to add that the problem is even bigger for developers inspecting designs. For us, the variant names are directly pointing to React property keys. Therefor it is crucial that developers can read the full property name. Right now they’re being truncated after 6-7 characters, which is way too short.

Thx!
Jasper

1 Like

The Properties panel and menus for selecting styles are very narrow. This makes it difficult to identify and select styles that are deeply nested in a tree structure or have long names because the text is truncated (Note that the distinguishing suffixes are often at the end of the names and get cut off).

Note: we often end up with long names for color styles when we match them with names of variables that devs use in their CSS.

I have at times used the Chrome dev tools to adjust the CSS for the width of this panel. This help a little but is cumbersome to do every time and results in a janky UI.

Please improve the Figma UI so that we can see the full names of styles and components in the Properties panel and menus.

Does any one else struggle with the names of styles and components being truncated in the Properties panel and menus?
Do you wish the menus can dynamically adjust their width to fit the whole names of the list items, or at least use word wrapping?
Do you wish you could resize the width of the Properties panel like you can with the Layers panel?

3 Likes

Yes, thank you!

I made a hack for this (I won’t promote it here) which adjusts the internal CSS of the property panel. Some things are a bit quirky but overall its a HUGE improvement to be able to see variant properties, text and color styles in their entirety. This makes hand-off so much smoother as others have mentioned.

It would be great to hear an official response from Figma on this, and ideally some roadmap commitment (new features are great, but a rock solid foundation, like accessible properties, is absolutely critical).

What?
Could we please get the ability for the RHS panel to be resized, in order to read component names.

4 Likes

Hi there,

I’ve set up a some font styling (based on tailwind presets) and am wondering is it possible to enlarge the dialog window where I can select them? currently I am having to scroll alot. I’m using a 5K screen, so there is plenty of space for a larger window…

This.

Due to the structure of style hierarchies and labeling practices, it’s rare when an entire style name will be completely visible in this right panel.

And identifying information is usually at the end of the style’s title.

Designers tend to use larger monitors, so screen real estate would generally be ample enough to allow for more text to be shown. (But not always, so expanding the right panel should be possible, but optional.)

Developers don’t need to see as much of the canvas, so being able to expand the right (Inspect) panel makes their job easier, too. They’d be able to see the code more fully without having to copy and paste it somewhere else (just to know it’s the right code they’re after).

2 Likes