Skip to main content

Only play with what is visible

While designing, some elements are made invisible by hiding them behind visible ones.
When importing into Rocket, such hidden elements should be avoided.
In the example below, a rectangle (Rectangle 2) is hidden behind another rectangle (Rectangle 1).
Since it will never appear on the screen, it should be removed from the design.
Hidden rectangle behind another in Figma

Avoid using fill tricks

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

Best practice

Make hidden components visible or simply remove them.
Designs with invisible elements are not relevant and will reduce accuracy when imported into Rocket.

You did it!

Your design now only includes visible, meaningful components, so Rocket can generate accurate, clutter‑free screens.