Skip to main content

​
Why grouping matters

Everything in a screen design is made up of layers. When those layers are properly grouped, Rocket can generate better, more accurate results. Groups reduce clutter by combining related components into fewer layers, and they auto-adjust when child objects are resized.
Example of grouping layers in Figma

​
How to group 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 components easier to manage and reuse.
Ungrouped design example
Avoid ungrouped designs. Proper grouping helps Rocket identify and map your components accurately during import.

​
Example

In an e-commerce shopping list screen:
  1. Start with a background image.
  2. Add components like product image, title, description, and price.
  3. 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 properly grouped e-commerce components in Figma

Back to guidelines

See all design guidelines for preparing your Figma files.