To ensure Rocket can recognize and import your screens correctly, follow these design structure rules before sharing your Figma link.

​
Screen structure requirements

For Rocket to correctly identify your screens, they need to be either a Frame placed directly on the Page, or inside a Section that’s placed directly on the Page.

​
Accepted structures

  • Page > Frame
  • Page > Section > Frame
Do not:
  • Nest Frames or Sections inside groups or other elements that are not directly placed on the Page. These screens will be not be identified correctly.

Use the Frame Tool or the Frame Presets from the Properties Panel to set up your screen structure.

​
Frame size requirements

​
For mobile screens:

  • Height: greater than 200px
  • Width: between 200px and 800px

​
For web screens:

  • Height: greater than 200px
  • Width: between 992px and 2500px

​
Layer organization

Use Groups or Frames to maintain a clean, logical hierarchy.

Organized layers:

  • Make designs easier to read and update.
  • Enable smart resizing and responsiveness inside Rocket.

​
Vector and element design

  • Group related vectors into a single grouped vector for icons and visuals.
  • Use Figma’s vector tools to build shapes and fill areas, and avoid using image-based workarounds or overlays.

Don’t leave hidden elements in your design.
If an element is tucked behind another or made invisible, Rocket will not consider it during import.

​
Keep everything inside the Frame

All components and visual elements must be placed inside the screen’s Frame.

Elements placed outside the Frame won’t be recognized and may create import issues or visual clutter.

You're set to design for Rocket

Structure your Figma files using these rules to ensure every screen is clean, complete, and ready to launch.

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.