Make your designs Rocket-ready
The cleaner your Figma design, the better your generated app.
Follow these guidelines to avoid common issues and get production-ready results right away.
Follow these guidelines to avoid common issues and get production-ready results right away.
Design Guidelines
Design Guidelines
Follow the complete set of best practices to prepare Figma files for Rocket.
Group Components and Layers
Organize related elements into groups or components for cleaner imports.
Overlay Controls
Design overlays (like modals) clearly so Rocket imports them as separate layers.
Group Vectors
Combine vector layers into single groups to avoid messy outputs.
Components Outside Frame
Keep all design elements inside their screen frame.
Image Masking
Use proper masks so images render as intended.
Invisible Components
Remove hidden layers that could cause broken layouts.
Unwanted Components
Delete placeholder or unused layers before importing.
Excess Text Boundary
Resize text boxes so Rocket matches your intended layout.
What’s next?
Create a web app
Your designs are ready. Import them into a web app.
Create a mobile app
Your designs are ready. Import them into a mobile app.