Skip to main content
For Rocket to recognize and import your screens correctly, follow these structure rules before sharing your Figma link.

​
Screen structure

Rocket identifies screens that are either a Frame placed directly on the Page, or inside a Section 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 on the Page. These screens will not be detected correctly.
Use the Frame Tool or 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
Image-only frames are not supported. Code cannot be generated for frames containing only images. Include design elements (text, components, or shapes) alongside the image.

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

​
Vectors and icons

  • Group related vectors into a single grouped vector for icons and visuals.
  • Use Figma’s vector tools to build shapes and fill areas. Avoid image-based workarounds or overlays.
Do not leave hidden elements in your design. If an element is tucked behind another or made invisible, Rocket will not include 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 are ignored during import and may cause visual gaps or missing content.

Back to guidelines

See all design guidelines for preparing your Figma files.