<?xml version="1.0" encoding="utf-8"?>

Group and align elements

Groups in Figma are a lifesaver for designers who want to simplify their layer management. With groups, you can combine multiple elements into one top-level layer — for instance, if you have a header with a bunch of menu options that should always stick together. When you group things, you can move and edit the entire layer as one object on the canvas. And if you need to select a specific part of the group, just double-click it. To group stuff in Figma, select what you want and hit "Command + G" (on Mac) or "Ctrl + G" (on Windows).

What can you do to elements within a group? Here are a few common operations with a group:

  • Align: Just use the alignment controls in the right sidebar to align elements with each other or with the parent layer.
  • Move: You can move a group by clicking and dragging it.
  • Change layer order: You can change the order of layers within a group by dragging them up or down in the Layers panel.
  • Rotate: You can rotate a group by selecting it and dragging the rotation handle that appears above it.
  • Apply styles: You can apply a style to all layers within a group — for example, change the font color or size of all menu options.
  • Resize the elements: When you resize a group, the child elements will scale like vector artwork should. But be warned — things like effects, strokes, and text sizes won't change with the scaling. To change these properties, use the scale tool (or press "K" on your keyboard).[1]

Pro Tip: Figma doesn’t allow the use of grids for grouping objects, so use frames for this purpose.

Improve your UX & Product skills with interactive courses that actually work