LiveDemo - Open-source alternative to Storylane, Navattic, and Arcade | Product Hunt

How to Group in Framer



How to Group in Framer: step-by-step guide

  1. Start by opening your Framer project - this is where the magic happens.

  2. Select an element you want to group.

  3. Choose 'Group'.

  4. Your elements are now grouped in a single Frame that you can resize, move, or style as one cohesive unit.

Quick answer: To group elements in Framer, open your project, select an element, and choose Group. Your selected elements will be placed into a single Frame, allowing you to resize, move, or style them together as one cohesive unit.

About this Framer tutorial

Combine multiple elements into a single Frame in Framer. Select your items and choose Group to resize, move, or style them as one unit. This guide shows how to group in Framer in 4 steps, starting with "Start by opening your Framer project - this is where the magic happens" and finishing with "Your elements are now grouped in a single Frame that you can resize, move, or style as...". The interactive demo above is a click-through copy of the real Framer interface, so you can rehearse each step before doing it in your own account.

Frequently asked questions

How many steps does it take to group in Framer?

4 steps. Each one is listed in order above, and the demo highlights exactly where to click.

Can I try it without changing my own account?

Yes. Clicking through the demo doesn't touch your Framer data or settings. Once you know the flow, repeat it in your own workspace.

This tutorial is filed under Framer. Related guides: How to Hand Off Website Framer, How to Highlight Text in Framer and How to Import Figma to Framer. Last reviewed 05 Oct 2026.

LiveDemo - Open-source alternative to Storylane, Navattic, and Arcade | Product Hunt
🚀

Create your first interactive demo in minutes

No credit card required • Start building today

Start free→

This website uses cookies to enhance the user experience.

AcceptDecline