Related Videos

• Select layers and objects

  Before you Start

  Who can use this feature

  Users on Any plan

  Users with View or edit access to a File can select objects in the Canvas or Layers Panel

  Before you can update any properties associated with an object or layer, you will need to select it. We'll cover all the basics for selecting objects, as well as some lesser known tips and tricks.

  Select individual layers

  You can select layers in the canvas itself, or from the Layers Panel. Click on an object in the canvas to select it.

  

  Select nested layers

  If you're working on more complex designs, you may have objects nested within groups or frames.

  We refer to nested objects as children, and the Frames or Groups that they nest within as parents. Learn more about parent, child and sibling relationships.

  When you click on an object that is part of a group or frame, we'll select the parent by default.

  Double-click on the object - or press the enter key - to select one level of nesting down. Repeat this process until you select the correct child elements.

  Deep Select

  If there are many levels of nesting, you can use Deep select to select a nested child layer. Hold down the modifier key to select a nested layer or object.

  • macOS:  ⌘
  • Windows: Ctrl

  Select layer menu

  We have a couple of different ways to select nested objects. The Select Layer menu allows you to choose which specific you'd like to select, in the canvas.

  1. Right-click to open the context menu:
  2. Hover over the Select layer option.
  3. Select a layer from a list of layers underneath the cursor's location. We show the layer name and icon in the same order as the Layers panel.

  

  Tip! Move between nested objects using the keyboard shortcuts:

  • Select Child enter
  • Select Parent shift enter
  • Select Next Sibling tab
  • Select Previous Sibling shift tab

  Layers Panel

  Every object in the canvas will have a corresponding layer in the Layers Panel.

  Click the Layers tab in the left sidebar to open the layers panel. Or, use the keyboard shortcut:

  • MacOS: Option 1
  • Windows: Ctrl 1

  If you hover over the layer in the panel, a blue box will highlight that layer's location on the Canvas.

  Click on the layer name in the layers panel to select it.

  If there are any Frames or Groups on the canvas, we will nest the child objects within the parent. Click the arrow next to a Frame, Group, or Component to view any child layers.

  

  Can't see the layer highlight on hover? Adjust your preferences in the menu: select Preferences > Highlight on hover.

  Select multiple layers

  You can also select more than one object or layer at a time.

  This is great when you want to:

  • Update a property across more than one layer
  • Resize layers in bulk
  • Move a collection of objects
  • Create a Group, Frame, or Component from the selection

  Note: When you select more than one layer, you can access Selection Colors in the Properties Panel.

  This allows you to update individual Fills, Styles and Strokes in a mixed selection. Learn more in our View and adjust colors in a mixed selection article.

  Canvas

  1. Select an object in the Canvas.
  2. Hold down the Shift key and click on another object.
  3. This will allow you to select as many objects as you like.

  

  Tip! Click an object a second time while holding Shift to remove it from from the current selection.

  Selection marquee

  The marquee tool allows you to select all objects in a specific area of the canvas.

  1. Click and hold on a empty part of the canvas.
  2. Drag the cursor across any objects you'd like to select.
  3. A blue box will appear around each object are in the selection.
  4. To select nested layers, hold down the modifier key and drag the marquee across the objects:
     • Mac: ⌘
     • Windows: Ctrl
  5. To remove an object from the selection, hold down the Shift key and click on the object.

  

  Note: It's possible to select nested objects without selecting the parent object. This is something to be mindful of, especially when selecting objects to move them!

  When you select a parent object, this also selects any child objects. This allows you to move everything at once.

  Select multiple layers in the Layers Panel

  When you select layers in the Layers Panel, there are some different rules:

  To select every layers between two layers:

  1. Click on the first layer to select
  2. Hold down the Shift key
  3. Select the last layer.
  4. Figma will select every layer between those two layers in the Layers Panel.

  To select individual layers:

  1. Click on the first layer to select
  2. Hold down the modifier key
     • MacOS: ⌘
     • Windows: Ctrl (Windows)
  3. Select any other layers you want to select

  

  Select All Layers

  The Edit menu allows to select multiple objects based on their properties. This allows you to select all layers in your file that have the same properties.

  This is super handy when you want to adjust the properties of all those layers at once.

  1. Select a layer or layers in the

  2. Go to the File menu ☰ and select Edit from the options.

  3. Choose to Select All other layers that have the same:

     • Properties
     • Fill
     • Stroke
     • Effect
     • Text Properties
     • Font
     • or another Instance

     

  Want to select everything on the canvas? Use the keyboard shortcut: macOS: ⌘ A Windows: Ctrl A

  Locked and hidden layers

  If you hide a layer we won't show in the Select Layer menu. You will need to toggle visibility on to select it.

  If you lock an object or layer, you can't select it via the normal left-click selection process. However, you can select it via the Select Layer process.

  We include locked layers in the Select Layer menu with a padlock icon.

  Tip! Smart Selection allows you to select 2 or more objects in the canvas. From there you can adjust their arrangement, or the spacing between them.

  Create a 1D Smart Selection from a list of objects that align on one axis, like a column or row. Or, a 2D Smart Selection of objects in a grid or gallery-like structure.

  Deselect objects or layers

  To clear your selection entirely:

  • Click anywhere on the canvas
  • Use the keyboard shortcut: Esc

  To remove an object from a selection:

  • Hold down the Shift key and click on the object again

  Note: If you click on a parent object, this will deselect the parent and any child objects within it.

  To select the inverse of your current selection:

  • Use the keyboard shortcut:

    macOS: ⌘ A Shift

    Windows:  Ctrl A Shift

  This removes the current selection, then selects everything on the canvas you didn't select before.

• Adjust the z-index with layer order

  Before you Start

  Who can use this feature

  Users on Any plan have access to the Layers Panel in the Editor

  Only users with Edit access can make changes to layer order

  You can change the order that Layers appear in the Layer Panel. Changing the order of the layer in the layer panel also affects the layer's z-index - the depth of the layer.

  • Move a layer forward by moving it up in the Layers Panel
  • Send a layer backwards by moving it down in the Layers Panel.

  This allows you to move specific Layers to the front or back of the canvas, as well as move Layers in or out of a Group or Frame.

  Adjusting a Layer in the Layers panel won't affect its position on the canvas. It may change how you can see, select or Group the Layer in the canvas.

  You can reorder your Layers in a couple of ways.

  Keyboard shortcuts

  Bring Forward

  • macOS: Command  ]
  • Windows: Ctrl  ]

  Bring to Front

  • macOS: Command Option ]
  • Windows: Ctrl  Shift  ]

  Send Backward

  • macOS: Command [
  • Windows: Ctrl  [

  Send to Back

  • macOS:  Command Option [
  • Windows: Ctrl  Shift  [

  From the right-click menu

  1. Select the Layer(s) in the canvas.
  2. Right-click on the Layer to open the context menu:
  3. You can then choose to:
     
     1. Bring Forward
     2. Bring to Front
     3. Send Backward
     4. Send to Back
        
        
     

  From the Layers Panel

  Click and drag the Layer to change its position in the hierarchy.

  • Moving the Layer towards the top of the list will bring the Layer to the front of the canvas.
  • Moving the Layer further down the list will push the Layer behind those layers in the canvas.

  Tip! If you make a change you're unhappy with, you can Undo the action using the Keyboard Shortcut:

  • Mac: Option Command Z
  • Windows: Ctrl Z
• Adjust the alignment or distribution of layers

  Before you Start

  Who can use this feature

  Users on Any plan

  Users with Edit access to a File to adjust the alignment and distribution of objects

  At the top of the Properties Panel are controls for aligning and distributing an object or set of objects. 

  

  These include: 

  • Align Left
  • Align Horizontal Centers
  • Align Right
  • Align Top
  • Align Vertical Centers
  • Distribute Horizontally
  • Distribute Vertically
  • Tidy up
• Adjust the position or dimensions of layers

  Before you Start

  Who can use this feature

  Users on Any plan

  Users with Edit access to a File to adjust the position and dimensions of objects

  Below the alignment and distribution buttons at the top of the Properties Panel are tools for directly manipulating the location and dimensions of objects on the canvas. You can change the width, height, rotation, and border radius, as well as modify the x and y coordinates. 

  

  Scrubbable Inputs

  You can always manually type in values, but scrubbable inputs are fun and help speed up your workflow.

  1. Select an object on the canvas
  2. Place your cursor over the lable next to the input and watch the cursor change. You can also place your cursor over the input field and use Alt or Option and click  as well.
  3. Now click and drag to change the input value

  

  If you're cursor needs to go off the screen, no worries, Chrome supports cursor wrap. This works if you're using Figma in a Chrome browser, or if you're using our desktop app. 

  Scrubbable inputs also work when you need to add strokes, change the opacity, or blur effects.

  

  You control the speed

  Sometimes you may need to move objects ever so slightly. Sometimes you need to move them quite a bit. Here's a nice feature:

  1. Select a shape on your canvas
  2. Place your cursor over the x-axis input field
  3. Hold the Alt or Option key and click to activate the left/rightcursor
  4. Drag the cursor over the canvas
  5. Now slowly drag the cursor up and down the canvas

  You'll notice two things: 

  1. The width of the cursor changes, and
  2. A visual indicator pops up on the screen (Scrubbing at 1/2, 1x, 2x, etc). This even works with the cursor wrap technology.

  When the cursor is wider and you move your mouse left and right, the object moves along the x-axis in smaller increments. 

  When the cursor is narrower and you move your mouse left and right, the object will move along the x-axis in smaller increments

  Rotating objects

  You can rotate individual objects, Frames and Groups. There are a couple ways to do this. 

  1. Select the element you wish to rotate on the canvas
  2. Place your cursor just outside the object handles to activate the rotation arrows
  3. Click and drag to rotate your image

  

  You'll also see the degree of rotation change in the properties panel. Scrubbable inputs also work for rotating objects. Hover over the rotation icon to the left of the input and drag to rotate. 

  Adjusting the corner radius

  A very common question we hear from users is, "How do I round corners?". You can use the corner radius feature on rectangles, stars, and polygons. 

  Rectangles

  1. Use the R shortcut and click and drag out a rectangle on the canvas
  2. If you mouse over the rectangle, you'll see the [square] corner handles for the bounding box of the shape, and four (4) additional circular handles inside the shape. 
  3. Change the size of the shape with the outer handles
  4. Click and drag any of the inner handles to round all the corners

  If you need to round a single corner, hold Alt or Option then drag an individual corner. When you do this, you'll notice a new section in the properties panel. 

  

  You can manually set each corner radius here. Just like CSS, the order of input boxes starts from the top left and goes clockwise. These inputs are also "scrubbable". Hover over each, hold Alt or Option and use a 2 finger scroll on your trackpad, or scroll your finger across your Magic Mouse. 

  When you drag the rounding handles back towards the outer bounds of the shape and release them, you'll notice a slight “bounce back” effect. This is by design. It ensures the rounding handle doesn’t interfere with the bounding box handles.  If you make the rectangle too small or zoom out, the corner rounding handles will vanish.

  "Does the corner radius feature support nudges?"

  Of course!

  

  Dragging a corner handle will snap by the Small nudge amount, and holding the Shift key will use whatever Big nudge you have predefined. 

  Stars

  With a star selected and moused over, you will see three (3) control handles inside the bounding box. 

  

  These allow you to adjust:

  1. Count: the number of points on the star
  2. Rounding: how sharp or rounded you want each point to appear
  3. Radius: a percentage representation

  Polygons

  With a polygon selected and moused over, you'll see two (2) control handles inside the bounding box that allow you to adjust:

  1. Count: the number of corners, or sides, to your polygon
  2. Corner radius: how sharp or rounded you want each point to appear
• Tidy up objects

  Before you Start

  Who can use this feature

  Users on Any plan

  Users with Edit access to a File to use the Tidy up function

  If you have objects that aren't an equal distance apart, then you can use the Tidy Up function. This will redistribute objects so that they are equidistant from each other.

  1. Select any objects you'd like to include in the Smart Selection.
  2. There are a couple of ways to perform a Tidy Up:
     1. Hover over the selection and a Tidy Up icon will appear. Click the Tidy Up button:
     2. Use the keyboard shortcuts:
        
        MacOS:  ⌃ ⌥ T Windows: Ctrl Alt T
     3. Click the Tidy Up icon in the Properties Panel (on the far right of the alignment section):
  3. The objects will be rearranged on the canvas so that they are an equal distance apart, on either the x or y axis.

  What to Expect

  For Smart Selections on either the horizontal or vertical axis (1D), objects will only be arranged based on the axis they overlap on.

  Objects that are aligned on the x axis will have only their horizontal spacing adjusted, and objects aligned on the y axis will have only their vertical spacing adjusted.

  

   

  Tip! Tidying up a 1D selection won't automatically align the objects along both the x and y axis (i.e. center them), but you can use the alignment tools in the Properties Panel to make any further adjustments to the objects' alignment.

  When using the Tidy Up function on a selection of objects in a grid-like layout (2D), the Tidy Up function is much stricter.

  Objects will have both their vertical and horizontal spacing adjusted. The vertical and horizontal spacing may be the same or unique depending on their starting position. Regardless, you will be able to adjust the vertical and horizontal spacing individually.

  Unlike the distribute function, which repositions objects within the original selection's bounds, the Tidy up function will arrange all objects into a grid that aligns with the top and left edges of your selection.

  

• Measure distances between objects

  Before you Start

  Who can use this feature

  Users on Any plan

  Users with View or Edit access to a File can measure distances between objects in the Canvas

  You can measure distances, in pixels, between objects on your canvas with the steps below:

  1. Select an object
  2. Hold the alt/option key while hovering your cursor over other objects
  3. Figma will display redline distances to nearby edges.

  

  Also, if you have Guides on your frames you can now measure distances between objects in the frame and those guides. 

• Arrange objects with Smart Selection

  Before you Start

  Who can use this feature

  Users on Any plan

  Users with Edit access to a File to arrange layers using Smart Selection

  Learn more about the why behind Smart Selection in our Medium post: Introducing Smart Selection. 

  Smart Selection allows you to quickly select 2 or more objects in the canvas and easily adjust their arrangement, or the spacing between them.

  You can create a Smart Selection from a list of objects that align on one axis, like a column or row, or of objects that are arranged or aligned in a grid or gallery-like structure.

  This is perfect for making quick adjustments, or iterations to complex layouts. You can use Smart Selections for inbox interfaces, news feeds or timelines, photo galleries, or other grid based layouts.

  Smart Selection saves time and reduces the need for tedious repetitious tasks. This allows you to build and rearrange layouts faster.

  You can use Smart Selection to:

  • Adjust the vertical and/or horizontal space between objects.
  • Create uniform or non-uniform grids from a selection of objects.
  • Rearrange, duplicate or delete objects within a row, column or grid layout.

  To qualify for Smart Selection, objects must:

  • Be spaced equally apart.
  • Overlap on either the X (horizontal) or Y (vertical) axis, or both.

  Objects won't need to be the same shape or size to be included in a Smart Selection.

  If objects aren't equally spaced on the canvas, then you can use the Tidy up function to rearrange the objects and create a Smart Selection.

  

  Make a Smart Selection

  Figma will automatically recognise a Smart Selection.

  1. Select any objects you'd like to include in the Smart Selection. Learn more about making selections in our Select layers and objects article.
  2. Smart Handles will appear on each object; these take the form of a pink ring in the center of each object.
  3. When you hover over the Smart Selection, additional handles in the form of pink lines will appear between each object. These allow you to adjust the spacing between objects.

  You can then make a number of different adjustments to the Smart Selection:

  Adjust Space between Objects

  With Smart Selection you can quickly adjust the vertical or horizontal spacing between each object.

  1. Hover over the purple handles between the objects.
  2. An arrow will appear where the cursor was. You can then click and drag the handle.
     
     1. Up to decrease the space vertically between objects.
     2. Down to increase the space vertically between objects.
     3. Left to decrease the space horizontally between objects.
     4. Right to increase the space horizontally between objects.
  3.  The tooltip above your cursor will indicate the distance between objects, in pixels. Release the cursor to apply.
  4. 

     Tip!  You can hold down the Shift key while scrolling to adjust the increments by the amount specified in your Big Nudge settings. The default for this is 10px, but you can update this by searching for the Nudge Amount setting and determining your Small and Big Nudge values.

  5. Or, you can update the Space property directly, in the Properties panel. Depending on the Smart Selection, you will see either a Horizontal or Vertical space field.
  6. Enter a number directly in the field, or hover the cursor over the icon to scrub the field:

  Resize objects within a Smart Selection

  Smart Selection will also allow you to resize any objects within the selection, while maintaining an equal distance between objects.

  When you select an object within a Smart Selection, we refer to this as "marking".

  You have a number of options when it comes to marking:

  • Click on an object within the Smart Selection to mark it for resizing.
  • To mark multiple objects, hold down the Shift key to continue marking objects.
  • To mark all objects within a 1D Smart Selection, double-click on any object.
  • To mark all objects on the same axis in a 2D Smart Selection, hold shift and double-click on any object. Double-click again to select all objects in the Smart Selection.

  You can then make any adjustments to the object(s) as desired. For example: you can adjust the height of the object to indicate a longer message in the newsfeed.

  Any other objects in the Smart Selection will automatically be repositioned, to keep the spacing consistent between objects.

  Note: You can resize one object within a 2D Smart Selection, or multiple objects within a 1D Smart Selection.

  

  Tip! To resize an object from the center, hold down the Optionkey (MacOS) or Alt key (Windows).

  Move, Duplicate and Delete objects

  You can make changes to individual objects within a Smart Selection. This allows you to move, add or delete objects, without leaving the selection.

  Move Objects

  You can change the order that an object appears within the Smart Selection.

  When you move objects within a selection, surrounding objects will "reflow" to accommodate.

  • You can move a single object within a 2D Smart Selection.
  • You can move more than one object within a 1D Smart Selection.

  To move objects within a Smart Selection:

  1. Click on the pink ring on the center of the object to mark it. The circle in the center of the objects will turn pink.
  2. For 1D Selections only: Hold down the Shift key and click on another object to mark it.
  3. Drag the object(s) to another location within the Smart Selection. A blue indicator box will show you which positions you can move the object to.
  4. Once you're happy with the new position, release the object(s) to confirm the new position.

  Duplicate objects

  You can create a duplicate of an object within a Smart Selection. You can duplicate more than one object within a 1D or 2D Smart Selection.

  To duplicate objects in a Smart Selection:

  1. Make your Smart Selection.
  2. Click on the pink ring on the center of an object to mark it. Hold down [Shift] and click on another object to mark it.
  3. You can then Duplicate the object in a few ways:
     • Use the Keyboard shortcut:

       MacOS: ⌘ D

       Windows: Ctrl D

     • Open the main menu and search for "Duplicate Selection in Place":
  4. This will copy the object and paste it next to the original object. The other objects in the Selection will move to accommodate the new object.

  What to Expect

  • For objects in a 1D selection (row): we place the duplicated object to the right of the original.
  • For objects in a 1D selection (column), we place the duplicated object below the original.
  • For objects in a 2D selection (grid), we also place the duplicated object below the original.

  Delete Objects

  You can also delete an individual object within a Smart Selection. You can delete more than one object within a 1D or 2D Smart Selection.

  1. Make your Smart Selection.
  2. Click on the pink ring on the center of an object to mark it. Hold down [Shift] and click on another object to mark it.
  3. Delete the marked objects by pressing the "delete" or "backspace" key on your keyboard.
  4. The other objects in the Selection will move to fill the gap.

  What to Expect

  • For objects in a 1D selection (row): Objects will move from towards the left to fill any space created.
  • For objects in a 1D (column): Objects will move upwards to fill any space created.
  • For objects in a 2D selection (grid), objects will also move upwards to fill any space created.

  Rearrange Objects

  You can also change the order or position that an object appears in the Smart Selection.

  At the moment, you can rearrange a single object within a 2D Smart Selection, or multiple objects within a 1D Smart Selection.

  1. Click on the pink ring on the center of the object to mark it; the entire circle will turn pink.
  2. To mark another object within the Smart Selection, hold down the Shift key and click on the handle of another object.
  3. Drag the object(s) to another location within the Smart Selection. A blue indicator box will show you which positions in the layout the object can be moved to.
  4. Once you're happy with the new position, release the object(s) to confirm the new position.

  Keep in Mind

  • Rearranging items in a Selection won't change the layer hierarchy in the Layers Panel
  • If you are using Smart Selection with Frames, you can use Resize to fit. This will resize the Frame to the size of the objects within it. Resize to fit is in the positioning section of the Properties Panel (right sidebar).
  • 2D Smart Selections function more like lists within lists, versus a perfect grid. The default behavior when rearranging 2D Selections, is to add that object to the existing column or row.
  • If you would like to swap one object's position for another, you can hold down the Command (Mac) or Ctrl (PC) key.
• Create dynamic designs with Auto Layout

  Before you Start

  Who can use this feature

  Users on Any Plan

  Users with Edit access to a File can add Auto Layout to Frames.

  Auto Layout allows you to create dynamic Frames that respond to their contents.

  There are lots of ways you can use Auto Layout:

  • Create buttons that grow or shrink as you edit the text label
  • Quickly build lists that adapt to new items
  • Combine Auto Layout Frames to build complete interfaces
  • Add Auto Layout to existing Components

  Auto Layout is a powerful feature with many moving parts. If we were to write a traditional step-by-step process, we'd end up in a Choose Your Own Adventure game!

  Instead, we'll show you how to access Auto Layout, what are the properties involved, and give you some tips. You can explore all features of Auto Layout in our Auto Layout Playground file.

  Want to see Auto Layout in action? You can follow along with our video tutorial, as we create some elements of our theater app. 

  Note: We use the terms Parent and Child to refer to Frames and objects within an Auto Layout Frame. If you are new to these terms, check out our Relationships in Figma: Parents, Children, and Siblings article.

  Add Auto Layout

  You can add Auto Layout to a Frame or a selection of objects. This includes:

  • New or empty Frames
  • Frames with existing content
  • Components
  • Groups or other collection of layers and/or objects

  Note: We only support Auto Layout on Frames. If you select objects outside a Frame, Figma will create a Frame around them and add Auto Layout.

  You can add Auto Layout in a few places:

  • Right Sidebar: Click the [+] Icon next to Auto Layout
  • Right-click on the Frame and select Add Auto Layout
  • Use the Keyboard Shortcut: Shift A

  

  Adjust the Fill, Stroke, Effects and Corner Radius properties of Frames! Learn more in our Frames in Figma article.

  Auto Layout Properties

  Frames with Auto Layout have different Properties to regular Frames. When you apply Auto Layout, you'll see some changes in the right sidebar (Properties Panel).

  When you add Auto Layout to a Frame you won't be able to:

  ❌ Add Layout Grids to that Frame
  ❌ Apply Constraints to any objects within an Auto Layout Frame
  ❌ Use Smart Selection within that Frame

  

  There are properties for both Auto Layout Parents (Frames) and an Auto Layout Children (objects). We've grouped Auto Layout properties based on which object you have selected:

  • Auto Layout Parent (Frame)
  • Auto Layout Child (Object or Frame)

  Note: As it's possible to nest Auto Layout(s), a Frame may take on the role of both an Auto Layout Parent and Auto Layout Child. This means both sets of properties will be available to you.

  Auto Layout Parent

  The following properties are in the Auto Layout section of the Properties Panel.

  

  1. Direction

  Direction allows you to choose which way the Auto Layout Frame will flow. You can choose between Vertical and Horizontal.

  • Vertical allows you to add, remove and reorder objects along the y axis. For example: objects within a list, or posts within a newsfeed or timeline.
  • Horizontal allows you to add, remove and reorder objects along the x axis. For example: a row of buttons, or icons in a mobile navigation menu.

  

  Figma currently supports only one direction at a time (e.g. horizontal or vertical). To build designs with both directions, combine or nest Auto Layout Frames.

  Note: Figma will set the Direction based on how you arranged the objects on the canvas. You can change the Direction in the Auto Layout section of the Properties Panel.

  2. Padding

  Padding controls the whitespace or "breathing room" around objects in your Auto Layout.

  You can set Horizontal and Vertical padding independently. It's not possible to control padding for each side on its own, or set a negative value.

  

  You can copy and paste properties between Auto Layout Frames

  Tip! Figma will use your Big nudge value as the default padding value. You can adjust your nudge settings in the preferences menu.

  3. Spacing Between

  You can control the Spacing between objects in an Auto Layout. This works like the spacing between objects in a Smart Selection.

  In a Horizontal Auto Layout this will refer to the Horizontal space between objects. In a Vertical Auto Layout, the Vertical space between objects.

  Unlike Smart Selection, there isn't a way to adjust the spacing on the Canvas. Instead, you can use the spacing field in the Auto Layout section of the Properties Panel:

  • Enter a number in the field
  • Focus on the field and use your arrow keys to adjust
  • Click and drag to scrub the field and increase or decrease the value

  Tip! You can copy and paste properties between Auto Layout Frames.

  • Mac:   Option-Command-C and Option-Command-V
  • Windows:   Ctrl + Alt + C and Ctrl + Alt + C

  4. Resizing

  The Resizing property controls whether you can adjust the size of the Frame itself. You can only control resizing along one axis, the axis opposing the direction.

  • Horizontal Auto Layout: Choose between Auto Height or Fixed Height.
  • Vertical Auto Layout: Choose between Auto Width or Fixed Width.

  When resizing is Auto, Figma will determine the dimensions of an Auto Layout Frame based on its contents. The Frame will grow and shrink as you adjust the Frame's contents.

  With Auto resizing, it's not possible to adjust the width or height of the Frame itself. To make this clear, we gray out the Width and Height fields in the Properties Panel.

  If resizing is Fixed, then the Frame's dimensions on that specific axis won't respond to any changes. This allows you to resize the Frame, as well as allow objects to extend beyond the Frame's bounds.

  With Fixed resizing, you can set the width (Vertical Auto Layout) or height (Horizontal Auto Layout) of the Frame. This allows you to adjust that dimension using the Width and Height fields in the Properties Panel.

  Switch between Auto and Fixed resizing in the Properties Panel:

  

  You can also adjust an Auto Layout Frame's dimensions in the canvas. If you resize an Auto Layout Frame, we will change the resizing setting to Fixed. If you want to switch back to Auto, change the resizing setting in the Properties Panel.

  Auto Layout Child

  When you select an object within an Auto Layout Frame, you'll see some changes in the Properties Panel. These are mainly related to the alignment and positioning controls.

  

  Position

  In an Auto Layout, the X and Y co-ordinates of any child objects are set to Auto. You won't be able to change or override these.

  You will be able to change the order of Objects within an Auto Layout.

  Use the arrow buttons at the top of the Properties Panel - or the keyboard shortcuts below - to move an item.

  In a Vertical Auto Layout

  • Move Up ↑
  • Move Down ↓

  In a Horizontal Auto Layout

  • Move Left ←
  • Move Right →

  

  Changing the object's order in the Auto Layout will also update the order in the Layers Panel. Unlike regular Frames, layers will appear in reverse order.

  Tip! Use the keyboard shortcuts to Bring Forward Command [ or Send Back Command ] an object.

  Alignment

  Within an Auto Layout, you have have limited alignment options. You can only align objects along one axis.

  In a Horizontal Auto Layout:

  • Top ↑
  • Center
  • Bottom ↓
  • Stretch Top & Bottom

  In a Vertical Auto Layout:

  • Left ←
  • Center
  • Right →
  • Stretch Left & Right

  

  Note: There is no way to replicate the following Alignment or Constraint options in an Auto Layout.

  ❌ Tidy Up a selection of Objects
  ❌ Use Smart Selection
  ❌ Distribute Vertical Spacing
  ❌ Distribute Horizontal Spacing
  ❌ Scale

  Add and Remove Objects

  • Add Objects to an Auto Layout Frame
  • Nest an Auto Layout Frame
  • Duplicate Objects in an Auto Layout Frame
  • Remove Objects from an Auto Layout Frame

  Add Objects to an Auto Layout Frame

  You can add any layer or object to an Auto Layout Frame.

  When you drag an object over an Auto Layout Frame, Figma will show you a blue line anywhere you can add the object.

  Figma will allow you to place an object into any Auto Layout Frame. It will use the object's size to determine which locations are suitable.

  You can use the modifier key to override the default behavior and add an object anywhere you like:

  macOS: Command ⌘  Windows: Ctrl

  

  Nest Auto Layout Frames

  You can nest an Auto Layout Frame within another Auto Layout Frame. This allows you to combine horizontal and vertical layouts to create complex interfaces.

  When you nest an Auto Layout Frame, the nested Frame will have both Parent and Child properties.

  In our example below, there are four levels of Auto Layout:

  1. Button: Each button is a Horizontal Auto Layout. This allows the button to grow and shrink as we change the label text.
  2. Button Row: We then add both buttons to another Horizontal Auto Layout. This allows objects to respond when we make any changes to a sibling's contents.
  3. Post: We then add our buttons to a Vertical Auto Layout with the other objects in the post. This includes a description, an image and the user's profile.
  4. Timeline: We've added three to a Vertical Auto Layout to create our timeline. The Auto Layout Frame is the top-level Frame which sits on the Canvas.

  

  You can nest Auto Layout Frames in a couple of ways:

  • Drag an Auto Layout Frame into an existing Auto Layout Frame
  • Create a new Auto Layout Frame around a selection of Auto Layout Frames (and other objects).
    1. Select the Auto Layout Frames and objects
    2. Use the keyboard shortcut Shift + A
    3. Figma will create a Frame around the Frames and objects

  Tip! You can bypass Figma's default parenting behavior. Hold down the Modifier Key to keep an object within the current Frame, or prevent Figma from nesting it.

  • Mac:   Command ⌘
  • Windows:   Ctrl

  Learn more about nesting and reparenting in: Relationships in Figma: Parents, Children, and Siblings.

  Duplicate Objects in an Auto Layout

  You can duplicate existing objects to add them to the Auto Layout. Figma will add the duplicate to the right (horizontal) or underneath the original (vertical).

  1. Select a child object in an Auto Layout Frame.
  2. Duplicate it by using the Keyboard Shortcut:
     • MacOS: Command-D
     • Windows: Ctrl + D

  Remove Objects from an Auto Layout

  You can remove any object from an Auto Layout:

  • Drag the object outside of the Auto Layout Frame.
  • Select the object and press the Delete or Backspace key

  Remove Auto Layout

  When you remove Auto Layout, you will have access to a Frame's regular properties.

  There are a couple of ways to remove Auto Layout:

  • Right-click on the Frame and select Remove Auto Layout
  • In the Properties Panel, click the minus icon [-] next to Auto Layout

  Note: You can't use the Add Auto Layout Keyboard Shortcut to remove Auto Layout. If you do, you will create a new Auto Layout Frame around your current selection instead - hey!

  Tips for Auto Layout

  If you've made it this far, thanks for hanging in there! Auto Layout establishes some new rules and behaviors that work differently than other functions in Figma.

  We've put together some tips and tricks to help you navigate those rules and behaviors.

  Frame Properties

  You can add Stroke, Effect and Corner Radius properties to a Frame. This includes Frames that have Auto Layout added.

  Before, you could add or change the properties of child objects when selecting the Frame. Now, this will apply those properties to the Frame.

  This means you can create buttons from a text layer, without having to draw a background. This may need a change in behavior.

  Have Components or objects with rectangles for backgrounds? Figma will apply the rectangle's properties to the Auto Layout Frame. Neat!

  Prototyping with Auto Layout

  There are a few things to be mindful of when creating Prototypes with Auto Layout.

  • Smart Animate transitions do not take into account the background of a Frame.

    If you want to use a Slide in or Move in transition with Smart Animate, you will need to add a background. You can create a rectangle within a regular Frame and place your Auto Layout Frame within it.

    Learn more about this in the Slide in and Move in Transitions section of our Smart Animate article.

  • To apply Scrolling Overflow to a Frame, you need to have content to extend beyond the Frame's bounds.

    As an Auto Layout Parent's dimensions are content-driven, it will resize to fit the objects. To replicate Scrolling Overflow you will need to put the Auto Layout inside a regular Frame.

    Note: Presentation view supports scrolling of long Frames by default. You will only need to use this workaround when you want to clip content.

  Toggle Visibility

  Toggling a layer or object's visibility will remove it from an Auto Layout. This may create an unwanted effect when creating layouts or prototypes.

  If you want to create a gap in the Layout where an Object should be, you can adjust the Opacity of the object instead.

  

  In the Properties Panel, update the Layer settings to 0%. Double-tap 00 to set to 0%.

  Use Auto Layout with Components

  As Components are Frames, you can add Auto Layout to them. You will need to add Auto Layout to each Component individually.

  There isn't currently a way to add Auto Layout in bulk.

  Master Components

  ✅ Adjust Vertical and Horizontal Padding
  ✅ Adjust Spacing between objects
  ✅ Reorder objects within a Component
  ✅ Add new objects

  Component Instances

  ✅ Adjust Vertical and Horizontal Padding
  ✅ Adjust Spacing between objects
  ❌ Reorder objects within a Component
  ❌ Add new objects

  Want to add icons to Instances? We recommend adding a placeholder icon, with 0% opacity, to the Master Component. You can then swap out the icon for another Component in your Library.

  Text Wrapping

  Text objects can also have their own Resizing properties. Within an Auto Layout, this may produce some interesting results.

  There are three Text resizing options:

  • Grow Horizontally: If we enter a longer word in the text field, the text won't wrap to a new line. Instead, the width of the Auto Layout Parent Frame will accommodate the longer text.
  • Grow Vertically: If we enter text that extends beyond the text object's width, text will wrap to a new line.
  • Fixed size: If we enter text that extends beyond the layer's bounds, the text box will not resize. Instead, text will overflow outside of the text layer's bounds.

  Note: We recommend against using Fixed Size with Auto Layout. Fixed Size will prevent the text layer from resizing to accommodate your text. This may cause overlap between the text and other objects in the Auto Layout Frame.

  Figma will convert any text objects using Fixed Size to Auto Width or Auto Height. Which ever best fits the context.

  Adjust the Text resizing property in the Text section of the Properties Panel. Choose from:

  1. Grow Horizontally
  2. Grow Vertically
  3. Fixed Size

  

  Constraints

  Note: Within an Auto Layout, you can create child objects that adapt as you resize the parent Frame. Instead of using Constraints, you can use the Stretch Left & Right or Stretch Top & Bottom options in the Alignment section at the top of the Properties Panel.

  We mentioned above that it's not possible to apply Constraints to an object in an Auto Layout Frame.

  You can still apply Constraints to the Auto Layout Frame itself, as long as you nest it within a regular Frame.

  As an Auto Layout Frame's dimensions are set by its content, you can't use any Constraints that stretch or change the Frame's dimensions. This includes:

   

  ✅ Left or Right
  ✅ Top or Bottom
  ✅ Center

  ❌ Left and Right
  ❌ Top and Bottom
  ❌ Scale