Skip to main content

​
Why vector grouping matters

Fill elements like images can be created using vectors.
Often, many different vectors are combined to form a single image.
Animated example showing grouped vectors
Group all vector images and paths into a single group to avoid design issues.
Icons should be designed using vectors, not PNGs. Vector-based icons scale cleanly and import correctly into Rocket.

​
Best practices

  • Combine related vectors into one group for a cleaner design hierarchy.
  • Proper grouping makes it easier to manage and identify elements later.
  • Without grouping, each vector is downloaded separately, which prevents Rocket from generating the image correctly.
Ungrouped vectors are downloaded as separate images, producing broken or duplicated output in the generated code.

Back to guidelines

See all design guidelines for preparing your Figma files.