How Do I Select Which Component Is My Container w/ Smart Layout?
Hi,
I am exploring switching over to Figma from Sketch, and have been struggling with Auto Layout compared to Sketch.
When I try to make an auto-layout component for a modal, each component stacks and the card is not auto-recognized as the container, as mentioned in the tutorial. This auto-layout component is comprised of a 1. card component (variant), 2. a text auto-layout component (headline & body text), and a button component (variant).
The tutorial on auto-layout notes that Figma automatically recognizes which component should be the container, but that does not seem to be working. So I’m wondering if there is a way to manually indicate which should be the the container (card component in this case).
I have tried detaching each component, playing with the layer order, removing the shadow from the card, and making the card a frame before turning into an auto-layout component.
Thank you!
Page 1 / 1
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.
