​
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

Example of hidden elements in a design

​
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

Example of elements hidden with 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.

Why this helps Rocket

Removing invisible components ensures Rocket imports only what matters.
This improves design accuracy and avoids unnecessary clutter in your generated app.
Need help? We’re here for you.
Email us at support@rocket.new or join our Discord community to get help, share ideas, and connect with other creators.