​
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.

​
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.
Have a design issue or Rocket import is not working as expected?
Reach out in our Discord community or email support@rocket.new. We will help you troubleshoot.