Skip to main content

Figma Visibility

visible property is a global property rather defines if the node should be visible or not. By default, setting visible = false for figma not will act like the node never existed. I.e. item under autolayout, if the item's visibility is off, than the item will not only invisible, but act like it does not exist, triggering re-arrangement of other items.

TL;DR Figma#visible is not visible: false but gone.

Config - ignore_invisible​

When ignore_invisible is set true, design to code will ignore the invisible nodes at the point of initial conversion, even before the tokenization. This is not recommanded on component / instance design tokenization.

Web - css​

invisible

.invisible {
  visibility: hidden;
}

gone

.gone {
  display: none;
}

Flutter​

invisible only (no gone)

Visibility(
  child: Text("Invisible"),
  maintainSize: true,
  maintainAnimation: true,
  maintainState: true,
  visible: false,
);

This will only hide the child, while maintaining its space. - It can be also represented as Opacity 0

Opacity(
    opacity: 0,
    child: Text("Invisible")
);

gone

Visibility(
  child: Text("Gone"),
  visible: false,
);