Layers 101: Combine layers

Ready to take your workflow to the next level? Check out these time-saving heroes that will have you spinning up new designs in no time.

Auto layout

Have you got all your building blocks and want to play around with the layout? Auto layout is a property you can add to frames that automates the resizing, alignment, and spacing of your designs.

This is great when you need to add new layers, accommodate longer text strings, or create designs that respond to different device and screen sizes.

In this design for a travel app, when we add a new destination card for a new tour in Rome, the other cards automatically shift and reflow to include it in the frame.

Add auto layout to a design

Explore auto layout properties

Components

Components are elements you can reuse across your designs. They save you from having to recreate the same element multiple times, and make it easy to manage design changes across one or all of your designs.

You can create components from any collection of layers or objects. These can be single objects, like icons or buttons; or entire layouts, like cards and menus. Select your layer(s) and click create component ❖ in the right sidebar.

There are two aspects to a component:

• A main component that defines the properties of the component.
  We've created a component for the destination card in our travel app. It includes all the layers you’ll need to create a card for each destination.
• An instance that’s a copy of the component, which you can add to your designs.
  We have four separate instances of the card component. Each instance has a unique photo and relevant text for each destination.

If we change the color of the city name in the main component of our destination card, it also updates the four instances we created.

Create components to reuse in designs

Add component instances to your designs

Create and use variants

Create interactive components with variants

Create and manage component properties