Skip to main content

​
Remove hidden elements

While designing, it is common to hide elements by placing them behind visible ones. These hidden elements should be removed before importing into Rocket.
Hidden elements reduce import accuracy. Rocket processes every layer it finds, so invisible elements can produce unexpected code and broken layouts.
In the example below, Rectangle 2 is hidden behind Rectangle 1. Since it will never appear on screen, it should be deleted before importing.
Hidden rectangle behind another in Figma

Hidden element behind another in Figma

​
Avoid hiding with matching fills

Another common issue is hiding an element by applying the same fill as the background color. In the example below, a square box is hidden this way. This should also be avoided.
Square hidden using same background color

Element hidden using background color match

​
Best practice

Make hidden components visible or simply delete them. Designs with invisible elements will reduce accuracy when imported into Rocket.

Back to guidelines

See all design guidelines for preparing your Figma files.