How Do I Select Which Component Is My Container w/ Smart Layout?

Hi,
Can you share a little video that illustrate the concern please ?

Hi I’m rajitha, a new employeeof learning front end development.

Hi Nathan, Sketch doesn’t have the same structure as Figma, so this might be where you are having problems. While in Skech you have a base arboard and everything inside it is a group, in Figma you can have Frames, which are basically arboards, inside other frames.

Also Frames in Figma can have their own fill and shadows, so you don’t need to create a “background” rectangle inside the Frame to define a background for it. Figma works in a way that reminds the actual HTML DOM element more. So while Sketch allows you to have elements scattered inside a smart layout container, Figma doesn’t. You have to wrap things if you want them to be in a different structure.

So, to a possible solution: for a modal you can create a Frame, fill it with the color variant (or style) you want for the background, add the shadow style you prefer (all to the same frame) and you can add all components that would go inside of it. You can then turn on the auto-layout on inside this frame (either by Shift+A or using the design panel), on the auto layout part you can select which direction it’s going to be (rows or columns, don’t use wrap until you understand the auto-layout better), and then add gutter and paddings to the auto-layout frame.

This frame is now the container. In the sizing part you can either set it to Hug it’s contents, or to have a fixed size (this is useful if you want the contents to set the size of the container instead)

The tutorial probably was teaching you to create an auto-layout when selecting multiple elements (let’s say, all the card contents) and adding the auto-layout, it would create a new container (a frame) around them and you’d be able to set the properties from there.