> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rocket.new/llms.txt
> Use this file to discover all available pages before exploring further.

# Design guidelines

> Structure Figma frames, screen sizes, and layers for accurate import in Rocket.new's Figma-to-code pipeline.

export const LlmsDirective = () => <blockquote className="llms-directive">
    For the complete documentation index, see <a href="/llms.txt">llms.txt</a>.
    For a lightweight markdown version of this page, append .md to the URL.
  </blockquote>;

<LlmsDirective />

<Info>
  For Rocket to recognize and import your screens correctly, follow these structure rules before sharing your Figma link.
</Info>

<Divider />

## 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

<Warning>
  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.
</Warning>

Use the **Frame Tool** or [Frame Presets](https://help.figma.com/hc/en-us/articles/360041539473-Frames-in-Figma-Design#Change_the_frame_preset) from the Properties Panel to set up your screen structure.

<Divider />

## 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

<Warning>
  **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.
</Warning>

<Divider />

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

<Divider />

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

<Warning>
  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.
</Warning>

<Divider />

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

<Divider />

<Card horizontal title="Back to guidelines" icon="arrow-left" href="/build/create/figma/figma-design-guidelines/overview">
  See all design guidelines for preparing your Figma files.
</Card>