Hidden components are fully visible in dev mode side panel

Ask the community
1

Im not sure if this is how it’s meant to work but having a complex component with other components with it have been used to hide some of it. Though in dev mode all components are visible in the side panel although hidden in the display. We teach our devs to explore the side panel to check component structures and this adds a little caveat in the discussion.

So should the side panel visuals be the same as design mode and grey out a component section while its hidden, or reveal it like in dev mode?

2

Why would you hide a component though? Is it required to be hidden?

If it’s required to be hidden, the dev could code that object initially as display:none . The object would be in the code and can be shown on some conditions. (That is if it’s the initial state of the component)

But if they’re not required to be in the component, it’s better to not put them at all.

Example:

You have a component/object hidden inside, the structure would be something like this (Webapp):

---- Component ----
<div>
  This content is displayed
  <Component2/>
</div>

----- CSS -----

Component2{
    display: none;
}
3

Thanks for responding.

It’s more about the side panel not showing the same visual representation. Usually hidden objects in the side panel are greyed out, but on dev mode they are not. So there’s possibly confusion of a dev when they find components in the side panel that do not appear visually on the display.

4

Ohh sorry, you’re right. I believe Figma should refine the UI of the dev mode.
Even in dev mode, Figma should display which layer is hidden or not.