​
Why grouping matters

Grouping keeps your design structured and easy to manage.
Everything in a screen design is made up of layers, and when those layers are grouped properly, Rocket can generate better results. Groups reduce clutter by combining similar components into fewer layers. They also auto-adjust when child objects are resized.
Example of grouping layers in Figma

Grouped components example

Keep your layers sorted. Group and arrange them carefully in your design.

​
How to use grouping effectively

  • Combine related elements like background images, buttons, or text into a single group.
  • Maintain a clear hierarchy order inside groups.
  • Use groups to simplify layering across your design, making it easier to manage and reuse elements.
Ungrouped design example

Example of ungrouped design

Avoid ungrouped designs. Proper grouping helps you identify and manage your components easily.

​
Real-world example

In an e-commerce app shopping list:
  • Start with a background image.
  • Add components like product image, title, description, and price.
  • Layer them properly, then group them together into one element.
This creates a clean hierarchy that is easy to manage and generates accurately in Rocket.
Example of grouping vectors for clean hierarchy

Grouped e-commerce components example

Why grouping helps Rocket

Proper grouping reduces messy layers, ensures objects stay aligned, and helps Rocket generate clean code from your designs.
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.