Right Panel Resize [Design, Prototype, Inspect]

Yes to this! or if resizing is hard to do, wrap the titles to multiple lines. Hovering over the title to read the full label works but feels like it takes to long.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.

how the f i’m gonna know what the color is this with the fix and unresizable right f panel figma

Right pane (Design/Prototype) needs to be resizable.

When working with colors or tokens with any degree of nesting, it’s impossible to see the state names and I have to click in to each one to see what it is.

This is really essential if you are using tokens, particularly if they are in collections. Not being able to see a variable/variant’s hierarchy and name at a glance really slows you down, breaks your concentration, and thereby increases the risk of errors.

Hi - is there any news on making the right panel resizable? It’s currently making it really difficult to see properties properly

Any info on when this will be fixed? All of our custom property names are cut off making it hard to read them.

I ended up creating a bookmarklet to resize the panel in the browser:

Create a new bookmark with this as the URL. When the bookmark is clicked on it will cycle through panel sizes:

javascript: (() => {const el = document.querySelector(‘[data-onboarding-key=“properties panel”]’).parentElement; const curWidth = parseInt(el.style.width.split(‘px’)[0], 10); curWidth > 450 ? el.style.width = ‘0px’ : el.style.width = ${curWidth + 50}px;})()

This is not a great solution but better than nothing.

How is this still a topic after almost 2 years? So annoying to work with libraries when you can’t see the names…

Hey All, thank you for your feedback!

This is already on our radar for improvement. We’ll continue to pass your feedback along to the team for future consideration.

Is there any workaround to see long token / style names without resizing the right panel?

Hi there,

One potential solution could be to hover over the style. I can’t come up with other ideas unfortunately at this moment.

Thanks,
Toku

Thanks for the reply Toku. Hovering doesn’t appear to do what I need it to do unfortunately. Here’s hoping Figma adds a way to resize the right panel, or some other way to view full style names.

One workaround that I found is to go into Dev Mode and view the full name in the Style section at the right.

I run into this a lot. There’s no tooltip to show the full name, and clicking on the style to see it in a grid of styles doesn’t always pinpoint it, if the style isn’t necessarily accessible in the current file (but an asset already has it applied). I’m left guessing.

The goal: to be able to select the correct color, through seeing the full name of a style color (all the way to the end of the folder structure & color name, where the actual distinguishing characteristics often appear).

Possible Solutions:

• Full, fast tooltips that show full names and pop up immediately so I don’t have to wait or slow down while scanning through a list of them quickly.
• Resizeable right panel - Note, this may not solve the whole problem, depending on length of style names.
• Wrap style names, with optional expand/collapse.
• Helpful: Ellipsis in the middle, like the macOS file system naming convention, e.g.:
  → Full name: “The beginning of the text, the middle of the text, and the text at the end that actually matters, e.g. the color name, light blue.”
  → Visible chunk: “The beginnin…light blue.”