Right Panel Resize [Design, Prototype, Inspect]

[Seferidis]

The new properties feature is great.
However giving it a name past some character length feels crowded and the ellipses do not help.

I can scale the UI as documented in here but that does not help us laptop users.
So I wish I could resize the panel to better see the name of the property, similar to how I resize the left (layers) panel.

[Chris28]

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.

[Peter45]

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

[Amanda_Page]

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.

[David_Whittinghill]

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.

[tim.guest]

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

[NDB]

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.

[Mikka_Wild_adesso]

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

[dvaliao]

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.

[KieranN]

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

[y_toku]

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

[KieranN]

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.

[KieranN]

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

[Buck]

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.”