Parent, child and sibling relationships

    Before you Start

    Who can use this feature

    Users on Any plan

    The concepts outlined here are valid for any level of access. These terms aren't specific to Figma, but they will help you understand some behaviors and dependencies in Figma.

    We use the terms Parent, Child and Sibling to describe relationships between objects in Figma.

    These terms are commonly used to explain similar relationships in web development, or programming.

    In this article, we'll clarify what we mean when we use these terms.

    If you have a background in object-orientated programming (OOP), these relationships are a little different. Parent/child relationships in Figma don't really relate to inheritance.

    In Figma, these relationships function more like the Document Object Model (DOM). That is, containers with elements inside them.

    Parents children and siblings

    We use these terms to explain how objects relate to other objects on the canvas.

    Parents are objects - namely Frames, Components and Groups - that contain other objects.

    Children are objects that are contained within a Parent.

    Siblings are objects that are contained within the same Parent. 

    • In a Frame with objects inside it, the Frame is a parent and any objects in it are children.
    • A Frame by itself is not automatically a parent. It is only a parent if there are objects within it.
    • If a parent contains more than one object, the child objects are siblings.
    • Objects — like Frames, Groups and Components — can be both parents and children.

    Parent and child interactions

    While these terms aren't explicitly used in the product, they are important for understanding how objects behave and relate to one another in Figma.

    Unlike their biological counterparts, they function as containers (parents) and contents (children) that influence each other. Rather than a defined lineage with explicit inheritance.

    Properties

    There are parent/child relationships that involve influence. In a lot of circumstances, the parent will be a Frame.

    You can add the following properties to a Frame that influences all their child objects:

    • Layout Grids: Create visual structure to your designs
    • Auto Layout: Create dynamic Frames that respond to their contents
    • Clip Content: Hide any objects within the Frame that extend beyond the Frame's bounds

    You can also add properties to a child object:

    • Constraints: Define how child objects will respond when you resize the parent Frame

    Parenting behavior

    When you move an object in the Canvas to a new location, Figma will decide whether or not to reparent the object.

    Reparenting means that the object is taken out of its current parent (e.g. a Frame) and is nested within another Frame.

    Figma uses the same logic for parenting when you are adding new objects to a Frame.

    The default behavior is:

    • If an object is smaller than a Frame, we will make it a child of the Frame
    • If an object is larger than a Frame, then we will not make it a child element

    Bypass default behavior

    You can choose to bypass the default behavior:

    • When adding Objects, hold down the Space bar to prevent Figma from reparenting an object
    • When moving an object out of a Frame's bounds, hold the Space bar to keep an object within the current parent

    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

        Select_All.png

      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 alignment, dimensions, rotation, and position

      Before you start

      Who can use this feature

      Supported on any team or plan

      Only people with can edit access to the file can make changes to a layer's position, dimensions, or alignment.

      Every shape, text object, or image you add to the canvas has its own layer. This allows you to adjust each layer individually as you create cohesive and complex designs.

      In this article, we'll show you how to adjust the alignment, position, dimensions, and rotation of your layers. This applies to individual layers, as well as frames, components, groups, and selections.

      You'll find most of these properties at the top of the Design panel in the right sidebar. You can also adjust a number of these properties on the canvas itself.

      The right sidebar with the alignment, position, dimensions, and rotation fields identified

      Note: Alignment, position and dimensions related to auto layout frames are different to the options we've outlined here. Learn how to adjust these properties with auto layout →

      Alignment

      Alignment tools allow you to arrange layers on the canvas in relation to one another. Figma will determine your layer's alignment based on your specific selection.

      • Select one object or layer: Figma will align the layer to its parent. This could be a group, frame, or the containing frame of a component.
      • Select multiple layers: Figma will align layers in relation to each other.

      Looking for text alignment? Learn more about Figma's text alignment options →

      Note: There isn't currently a way to align more than one object to their parent. Figma will show you guides on the canvas when moving a selection within its parent container. This helps you align your selection to the vertical and horizontal centers of the parent frame.

      Icon key

      Tip! Create fixed layers and control how layers respond as you resize them with constraints. Learn how to use constraints →

      Distribution

      Use distribution to create equal space between layers in a selection. You must have more than one layer or object selected.

      When using distribute, Figma will retain the position of the outermost objects or layers:

      • Distribute horizontal spacing: both the objects or layers on the outer left and outer right will maintain their position.
      • Distribute vertical spacing: both the top and bottom objects or layers will maintain their position.

      Tidy up

      Use tidy up to quickly align layers on one-dimension as rows or columns, or combine rows and columns to create two dimensional layouts.

      You can then adjust the horizontal and vertical spacing between the objects in your selection with smart selections. Learn how to use smart selection →

      Depending on your selection, you'll see one of the following options:

      • Tidy up vertical selection (one dimension)
      • Tidy up horizontal selection (one dimension)
      • Tidy up (two dimensions)

      One dimensional selections

      For a selection on either the horizontal or vertical axis (one dimension), Figma will arrange objects based on the axis they overlap on.

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

      Figma will use the most common spacing in the selection to set the Space between value.

      Illustration showing layer alignment and distribution before and after using the tidy up function on a vertical selection

      Note: When you use tidy up on a one-dimensional selection, Figma won't automatically align the objects along both axes, but you can use the alignment tools in the right sidebar l to make any further adjustments.

      Two dimensional selections

      When using tidy up on objects in two dimensions, like a grid, the tidy up process is much stricter. Figma will adjust both the vertical and horizontal spacing between objects.

      The vertical and horizontal spacing will depend on their starting position and can be the same or unique. Once Figma tidies up the layers, you can adjust the vertical and horizontal spacing

      Unlike distribute, which repositions objects within the original selection's bounds, tidy up arranges all objects into a grid that aligns with the top-left corner of your selection.

      Illustration showing layer alignment and distribution before and after using the tidy up function on a two dimensional selection

      Distribute or tidy up

      If you're using tidy up on a one dimensional selection, you'll notice that this functions similarly to the distribute function. You can think of tidy up as distribute with some extra logic.

      The main purpose of the tidy up function is to arrange layers so they meet both the criteria for a smart selection. That is, be an equal distance apart and overlap on either axis.

      • Distribute will only set a uniform distance between layers, it doesn't require layers to overlap on either axis. Tidy up will perform both, if required.
      • Tidy up lets you align objects along both axis at the same time. Distribute only works along one axis at a time: distribute horizontal spacing or distribute vertical spacing.

      For both distribute and tidy up, Figma will show the space between in the or field. This is based on the most common space between value (the mode).

      Note: If you have Snap to pixel grid enabled, you may see subtle discrepancies in spacing between layers. Figma will allow up to 1px of rounding.

      For example: if you have four layers and the spacing between most of the layers is 20, but there is only 19 space between two of the layers, Figma will still show the space between as 20.

      When Snap to pixel grid is disabled, Figma may distribute layers with decimal spacing values. For example: 7.5.

      Position

      You can adjust the position of layers in the canvas along any of the two dimensions or axes: horizontal (X axis) and vertical (Y axis).

      Figma represents a layer's position on the canvas using X and Y coordinates. These refer to the top-left corner of the layer's bounds.

      1. Open the Design panel in the right sidebar.
      2. Use the X and Y fields to adjust the layer's coordinates.
      3. You can also use basic mathematical equations (- + * / ^ () ) to quickly adjust the values of the X and Y co-ordinates. You can add an equation before or after the existing value, or replace it with a new equation entirely. Learn more about equations ↓

      Note: If you rotate a layer in the canvas, Figma will base the X and Y co-ordinates of that layer on the original top-left corner of the layer's bounds.

      Nudge layers

      Use your arrow keys to nudge the position of your layers. Figma allows you to set two default nudge amounts: small nudge and big nudge.

      By default, small nudge is set to 1 and big nudge set to 10. Both of these values are in resolution-independent points.

      Use arrows to nudge layers

      Use the arrow keys to nudge your selection. The arrow keys will use your small nudge settings, hold down Shift to use the big nudge settings instead.

      • ← Left
      • ↓ Down
      • ↑ Up
      • → Right

      Set nudge settings

      1. Click on the menu.
      2. Go to Preferences > Nudge amount...
      3. Enter your desired Small nudge and Big nudge in the fields provided.
      4. Click outside the window or use the icon to apply and close.

      Dimensions

      Every layer in the canvas will have its own dimensions. To view a layer's dimensions:

      1. Select the layer in the canvas or layers panel.
      2. View the dimensions in the blue label under the layer's bounding box.
      3. You can also view the dimensions of any layer using the W and H fields in the right sidebar.

      Select a layer to make changes to a layer's dimensions. There are then a few methods:

      • To adjust the width of a layer: hover over the layer's left or right bounds until the appears. Click and drag to resize.
      • To adjust the height of a layer: hover over the layer's top or bottom bounds until the appears. Click and drag to resize.
      • To adjust both the width and height of a layer: hover over any corner of the layer's bounds until the appears. Click and drag to resize.
      • Adjust both the W and H fields in the right sidebar.

      Note: It's not possible to adjust the dimensions of a group itself. If you update the dimensions of a group, Figma will update the dimensions of the layers inside the group instead.

      Constrain proportions

      The button allows you to constrain the dimensions of the layer to the current proportion. You can find this setting next to the dimension settings (W and H) in the right sidebar.

      When this setting is on, Figma will retain the original width to height ratio anytime you resize the layer in the sidebar. If you update either of the W and H fields, Figma will update the other accordingly.

      Tip! Hold down the Shift key when drawing to create create perfect squares, circles and polygons. Figma will toggle the constrain proportions setting on in the right sidebar.

      By default, Figma will draw a shape from the top-left. You can hold down the following modifier key to draw a shape from the center instead.

      Mac: ⌥ Option Windows: Alt

      Hold down both modifier keys to do both actions.

      Rotation

      Rotate individual layers, like objects, frames and groups, or a selection of layer. Figma will use the horizontal and vertical center of your selection as the point of rotation.

      Every layer you add to the canvas will have a default rotation of 0°. You can rotate your selection 180° in each direction:

      • A positive angle goes counterclockwise towards 180°
      • A negative angle goes clockwise towards -180°

      Once you pass 180 in either direction, Figma will count down towards 0° in that direction. For example: going 15° past 180° will give you an angle of -165°.

      A circle with directional arrows that show how Figma attributes the degree of an angle based on the direction you rotate it

      Caution: Figma uses the rotate CSS transform property to apply rotation to a layer or selection. The CSS transform property uses the opposite directions for determining the angle of rotation, which means you'll see the opposite angle in the Inspect panel.

      For example: if you rotate a layer 90° in the Design panel, Figma will translate this to transform: rotate(-90deg) in the Inspect panel.

      Tip! You can animate layers rotating between frames in your prototypes. Learn how with smart animate →

      Right sidebar

      Find the rotation field at the top of the Design panel in the right sidebar.

      1. Select the layer(s) or object(s) you want to rotate.
      2. In the right sidebar, use the field to enter your desired rotation.

      Canvas

      1. Hover just outside one of the layer's bounds until the icon appears.
      2. Click and drag to rotate your selection:
        • Drag clockwise to create a negative angle (towards -180° ).
        • Drag counterclockwise to create a positive angle (towards 180° )
      3. Hold down Shift to snap rotation values to increments of 15.

      Note: Figma won't rotate any effects you've applied to a layer or selection.

      Flip layers

      Another way to replicate rotating layers is to use the Flip horizontal and Flip vertical transformations.

      Use the right-click menu to apply a flip transformation, or the keyboard shortcuts:

      • Flip horizontal: ⇧ Shift H
      • Flip vertical: ⇧ Shift V

      Note: Figma uses the matrix CSS transform property for flip transformations. You can view the CSS values of the transformation in the Inspect panel of the right sidebar.

      Once you have applied a flip transformation to a selection, Figma will continue to use the matrix transformation CSS property, even if you later apply rotation to your selection.

      Every shape, text object, or image you add to the canvas has its own layer in the canvas. This allows you to adjust each layer individually as you create cohesive and complex designs.

      Animated llustration showing how designs in Figma exist in 3 dimensions as layers

      You can adjust the position of layers in the canvas along any of the three dimensions or axes: horizontal (X axis), vertical (Y axis), and depth (Z axis).

      Unlike the X and Y axes, there isn't a specific field you can adjust for the Z axis. Instead, you adjust the depth (Z axis) or hierarchy of a layer by changing the order in the Layers panel.

      This allows you to move layers to the front or back of the canvas, as well as move layers in or out of groups or frames. Learn more about relationships between layers →

      The Layers panel in the left sidebar shows you every layer on the current page and reflects the order your layers are currently stacked: the top layer is at the front and the bottom layer is at the back.

      Tip! If you're familiar with CSS, the layer's depth corresponds to an object's z-index.

      Change layer order

      There are a few ways to adjust a layer's order.

      • 1

        Layers panel

        Adjust the order of the layer by changing the layer's position in the Layers panel.

        1. Open the Layers panel in the left sidebar.
        2. Click and drag the layer to change it's position in the layer hierarchy:
          • Move the layer up to bring the layer forward
          • Move the layer down to send the layer back
        3. Release to apply.

        Note: Layer order works the opposite way inside an auto layout frame. This is because auto layout wasn't designed to support layers that overlap.

        If you change the order of layers in an auto layout frame, this will change the position and order of the layer within the the frame. Outside of an auto layout frame, changing the layer order won't affect a layer's position on the X or Y axes.

        Learn more about using auto layout →

      • 2

        Keyboard shortcuts

        Bring forward:

        • Mac: ⌘Command ]
        • Windows: Ctrl ]

        Bring to front:

        • Mac: ⌘ Command ⌥ Option ]
        • Windows: Ctrl Shift ]

        Send backward:

        • Mac: ⌘ Command [
        • Windows: Ctrl [

        Send to back:

        • Mac: ⌘ Command ⌥ Option [
        • Windows: Ctrl Shift [
      • 3

        Right-click menu

        1. Select the layer(s) in the canvas.
        2. Right-click on the selection to open the context menu:
        3. Choose from:
          • Bring forward
          • Bring to front
          • Send backward
          • Send to back

      Tip! If you make any changes you're not happy with, you can undo the action using the keyboard shortcut:

      • Mac: ⌘ Command Z
      • Windows: Ctrl Z

      Adjust values

      Equations

      Some fields in Figma accept equations, this includes the position, dimension, and rotation fields.

      You can use equations to resize layers by adding +, subtracting -, multiplying *, or dividing / the existing value. You can also use brackets ( ) within the field for more complex equations, or ^ for creating exponents.

      We've added some examples below but you can use any numbers:

      • + 10 to add 10 to the current value
      • - 20 to remove 20 to the current value
      • *2 to multiple the current value by 2
      • /4 to divide the current value by 4
      • ^2 to create an exponent of the current value to the power of 2
      • (𝑥/2)+6 to divide the current value in two and add 6 (𝑥=current value)

      The right sidebar with the width field active and an equation in the field

      Note: You'll need to edit the field and add the equation to the existing number. If you only select the field and add the equation, Figma will replace the existing number instead.

      Scrub fields

      In addition to manually entering values, you can also "scrub" fields. Scrubbing allows you to quickly adjust a field's value by dragging your active mouse or touchpad.

      You can use this for position, dimensions, and rotation fields, as well as other layer properties and settings in the right sidebar.

      1. Select the layer or object on the canvas.

      2. Hover over the label next to the input field until the scrubbing cursor appears. You can also hover the input field itself and hold down the modifier key:

        • Mac: ⌥ Option
        • Windows: Alt

      3. Click on the icon and drag to change the input value. Drag the cursor left to decrease the value, or drag it right to increase.

      4. Change the speed that you scrub the field by moving the cursor towards the top of the screen to increase the scrubbing speed, or towards the bottom of the screen to reduce it.

        You'll see a notification at the bottom of the screen for the current speed, as well as a difference in the cursor's width. There are four scrubbing speeds: 2x, 1x, 1/2, and 1/4.

      Tip! Figma will continue scrubbing the field, even if your cursor goes off the screen. This works if you're using Figma in the browser or desktop app.

    • Measure distances between objects

      Before you start

      Who can use this feature

      Users on any team or plan can use this feature.

      Users with can view or can edit access to a File can measure distances between objects in the canvas. You will need to have can edit access to access vector edit mode.

      Measure distances between objects in the canvas with measurement guides. This allows you to measure the distance between:

      • Vector shapes and paths
      • Text layers
      • Frames
      • Components
      • Groups
      • Guides

      redlines__1_.png

      Note: It's not currently possible to measure the distance between two guides. To calculate the distance between two guides, select the first guide and hover over the second guide. Figma will display the position of both guides on the axis so you can calculate the difference.

      Measure distances

      Measure distances between objects, even if they are nested within Frames, groups, or Components.

      1. Select the first object in the canvas.
      2. Hold down the modifier key:
        • MacOS: ⌥ Option
        • Windows: Alt
      3. Hover over the second object.
      4. Figma will display a red line between the two objects, as well as a measurement in pts (points).

      Measure distances between nested layers

      1. Select the first object in the canvas.
      2. Hold down the modifier keys:
        • MacOS: ⌘ Command ⌥ Option
        • Windows: Ctrl Alt
      3. Hover over the second object.
      4. Figma will display a red line between the two objects, as well as a measurement.

      Note: It's not currently possible to change the weight or color of the red measurement line. If you are working with similar or low-contrast colors, and want to see the measurement line, you can toggle the Fill visibility of the low contrast layer.

      Object bounds

      Figma will measure the distances between the bounds of each object - the bounding box that surrounds an object or layer.

      There are some situations of types of objects where this behavior may not be what you expect.

      • Strokes: If you have strokes applied to an object, Figma will measure to the object's bounds and not the outer limit of the stroke. You will notice this more on objects with Center or Outside stroke.
      • Text layers: Figma will measure the distance from the text layer's bounds. If you're wanting to measure to the baseline of the text, we recommend updating the bounds of the layer to match the baseline. You may also need to adjust the text resizing property.
      • Polygons and stars: If you have shapes with an odd number of sides, an object's bounding box may extend beyond the shape's dimensions.

        To snap the bounding box to the shape's true boundary, you can Flatten the shape. Right-click > Flatten, or use the keyboard shortcut:
        • Mac: ⌘ Command E
        • Windows: Ctrl E

      Overlapping layers

      Overlapping layers may prevent you from being able to measure the distance between nested objects. This includes masks, locked layers, and layers with low opacity fills.

      If you're having trouble measuring to a nested layer, we recommend you check the Layers Panel for any of the above layers.

      If there is a layer blocking your measurement, you can:

      • Toggle the layer's visibility to temporarily hide it. Use the keyboard shortcut:
        • MacOS: ⌘ Command Shift H
        • Windows: Ctrl Shift H
      • Toggle the Fill visibility
      • Reorder the layer so that it's below the layer you want to measure to
      • Hold down the modifier key to measure to a nested layer
        • MacOS: ⌘ Command Option
        • Windows: Ctrl Alt

      Tip! Want to add more permanent measurements to a file? Check out the Figma Measure plugin.

      Vector edit mode

      Measure between anchor points when you are in vector edit mode. Use this to measure distances between existing anchor points, or to create a new point.

      1. Select the object you want to edit.
      2. Click Edit object in the toolbar, or press the Enter / Return key.
      3. Click on an anchor point to select that point.
      4. Hold down the modifier key
        • Mac: ⌥ Option
        • Windows: Alt
      5. Hover over an existing to measure the horizontal and vertical distance between those two points.
      6. You can also use the measuring tool to see the distance between the selected point and a new anchor point. Click on the canvas to add a new point in that position.
      7. Press Enter / Return to leave vector edit mode.

      Measure_in_vector_edit_mode.gif

    • 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 team or plan.

      Users with can edit access to a file can add Auto Layout to frames and objects.

      About Auto Layout

      Auto Layout is a property you can add to frames and components. It lets you create designs that grow to fill or shrink to fit, and reflow as their contents change. This is great when you need to add new layers, accommodate longer text strings, or maintain alignment as your designs evolve.

      There are lots of ways to use Auto Layout:

      • Create buttons that grow or shrink as you edit the text label.
      • Build lists that adapt as items are added, removed, or hidden.
      • Combine Auto Layout frames to build complete interfaces.

      Auto Layout is a powerful feature with many moving parts and uses. In this article we'll show you how to add Auto Layout to a frame, and how each of its properties work.

      Explore the Auto Layout playground file in the Figma Community →

      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 and Component sets
      • Groups or other selections of layers and/or objects

      Note: Auto Layout is only supported on frames. If you select objects that are not in a frame, Figma will create an Auto Layout frame around them.

      You can add Auto Layout to a selected frame, component, or component set from a few places:

      • Use the keyboard shortcut Shift - A.
      • In the right sidebar, click the next to Auto Layout with a frame selected.
      • Right-click on the frame or object and select Add Auto Layout.

      Tip! You can add Auto Layout to components. You will need to add Auto Layout to each component individually. Learn how to use Auto Layout in components →

      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.

      You can't do the following to Auto Layout frames:

      • 🚫 Add Layout Grids to that frame
      • 🚫 Apply Constraints to any objects within an Auto Layout frame
      • 🚫 Use Smart Selection on any objects within the frame

      Auto_Layout_section_of_the_Design_tab_in_the_right_sidebar.png

      Direction

      Direction describes the way the auto layout frame will flow.

      • Choose Vertical to add, remove, and reorder objects along the y axis. For example: objects within a list, or posts within a newsfeed or timeline.
      • Choose Horizontal 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, horizontal or vertical. To build designs that use both directions, you will need to combine or nest Auto Layout frames. In the example below, we've nested a horizontal Auto Layout frame within a vertical Auto Layout frame to create a card with a title, description, and showtimes.

      AL_multi_direction_frame.gif

      Spacing between items

      You can control the spacing between items in an Auto Layout frame.

      Unlike smart selection, there isn't a way to adjust the spacing on the canvas. Instead, use the spacing field in the Auto Layout section of the right sidebar:

      1. Use the field to adjust spacing between items.
      2. Enter a number in the field, nudge the values using your arrow keys, or scrub the field using your cursor.

      AL_item_spacing.gif

      Padding

      Padding controls the empty or white space between the child objects and boundary of an Auto Layout frame. You can set padding uniformly, or have different values for top, right, bottom, and left padding.

      • Enter a single value in the field to set equal padding on all sides, or use CSS shorthand to set individual values. For example, entering 1,2,3,4 sets the values to top: 1, right: 2, bottom: 3, and left: 4 respectively. Or entering 1,2 sets the values to top/bottom: 1 and left/right: 2.
      • To manually set unique padding for each side, click to open the alignment and distribution settings and adjust each value individually.

      Note: Negative padding values are not supported.

      AL_padding.gif

      Tip! Press the tab key to navigate between the top, right, bottom, and left input fields.

      Alignment

      Choose how to align child objects within an Auto Layout frame. Both the direction of the Auto Layout frame and the distribution will determine what alignment options you have available.

      Unlike objects in a regular frame, you can't control the alignment of the objects individually. For that reason, you set the alignment of the child objects on the parent Auto Layout frame.

      Use the interactive grid to select from nine layout options for the children in a frame.

      AL_Alignment_tool.gif

      If your distribution is set to Space between, you have three options for each direction:

      • vertical Auto Layout: Left, Center, Right
      • horizontal Auto Layout: Top, Center, Bottom

      If your distribution is set to Packed, you have the same nine options for each direction:

      • Top Left
      • Top Center
      • Top Right
      • Left
      • Center
      • Right
      • Bottom Left
      • Bottom Center
      • Bottom Right

      Note: When one or more resizing properties are set to hug contents, some selections won't result in visually different layouts on the canvas. This is because hug contents removes any extra space around the child objects.

      Distribution

      Once you've set alignment rules for child objects in a frame, choose how those objects will be distributed within that frame.

      In the alignment panel, click the arrow to select between:

      • Packed: Objects in a frame will be grouped together. Use this option to keep objects in a frame as close as possible and aligned together.
      • Space between: Objects in a frame have the space between them equally distributed along the direction and alignment set for the frame. Use this option to stretch objects across a frame.

      AL_Distribution.gif

      Resizing

      One of the most powerful functions of Auto Layout is its ability to control the dimensions of the objects in an Auto Layout frame.

      Set resizing behavior for parent Auto Layout frames to adapt to changes to their children objects. Resizing settings can be applied for objects on both the X and Y axes individually using the dropdown menus and the resizing panel.

      Resizing_panel_of_the_right_sidebar.png

      Note: Text layers also have their own resizing properties. Within an Auto Layout frame, this may produce some useful results.

      If you want your Auto Layout frames to be completely fluid, we advise against using fixed size text boxes in your Auto Layout. Fixed size text layers won't resize to accommodate your text, which may cause overlap between layers in an Auto Layout frame.

      Learn more about text resizing →

      Fixed width or height

      When an Auto Layout frame is set to Fixed width or height, the values of the frame's dimensions remain the same regardless of the content within them. The size of the frame doesn't respond to changes in the objects within them, like a string of text that changes in length.

      Hug content

      Set an Auto Layout frame to Hug content to resize itself according to its child objects. The frame will keep the smallest possible dimensions to surround the objects within it, while respecting the padding value.

      Note: If any child objects within an Auto Layout frame are set to Fill container, the parent frame will no longer hug contents and become Fixed for the axis.

      Fill container

      Objects in an Auto Layout frame set to Fill container stretch to the width and/or height of their parent frame.

      Constraints and resizing

      You can't apply constraints to child objects within an Auto Layout frame. Instead, you can use the resizing property to define how objects respond as the frame, or the objects in the frame, are resized.

      You can still apply constraints to an Auto Layout frame if it's nested within a regular frame. You will see a Constraints and resizing section, which allows you to set both the constraints for the Auto Layout frame and the resizing behavior for any objects within it.

      For example: if you created a navigation bar using Auto Layout, you may want it to adjust to different screen sizes. You can use constraints to make sure the navigation bar responds correctly when its parent frame is resized, and resizing to control how the objects within the navigation bar respond to those changes.

      AL_Constraints.gif

      Learn more about constraints →

      Add, edit, and remove objects

      Add objects to an Auto Layout frame

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

      1. Click and drag an object over an Auto Layout frame.
      2. Use the blue indicator to choose where to place the object.

      AL_drag_nested_frame.gif

      Note: The object's size determines if it can be added to the Auto Layout frame. If any of the object's dimensions are larger than the parent frame, you won't see the option to add it to the Auto Layout.

      Use the modifier key to bypass Figma's default behavior and add larger objects to an Auto Layout. Or, to add objects to a nested Auto Layout.

      Mac: ⌘ Command Windows: Ctrl

      Learn more about parent, child, and sibling relationships →

      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.

      https://d33v4339jhl8k0.cloudfront.net/docs/assets/5aa962fe2c7d3a2c4983093d/images/5de860a304286364bc928229/file-jlSCx6rH8w.png

      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 frame, and the other layers you'd like to include.
      2. Use the keyboard shortcut Shift + A to add Auto Layout.
      3. Figma will create a frame around your selection, and add Auto Layout.

      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 parent, child, and sibling relationships →

      Duplicate objects in an Auto Layout frame

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

      1. Select a child object in an Auto Layout frame.
      2. Duplicate it by using the keyboard shortcut:
        • Mac: ⌘ Command - D
        • Windows: Ctrl + D

      Arrange or reorder objects in an Auto Layout frame

      Note: You can't reorder objects in an instance. You will need to change the object's order in the main component, or detach the instance to reorder objects.

      Learn more about using Auto Layout with components →

      You can change the order that objects appear in an Auto Layout frame. This is only supported on main components, or Auto Layout frames outside of a component.

      1. Select the child object. If the layer is nested, you'll need to use the modifier key to deep select:
        • Mac: ⌘ Command
        • Windows: Ctrl
      2. There are a few ways to reorder objects:
        • Use the arrow keys on your keyboard the object to a new position.
        • Click-and-drag the object to a new position.

      Remove objects from an Auto Layout frame

      To remove an object from a main component or Auto Layout frame:

      • Drag the object outside of the Auto Layout frame.
      • Click the to toggle the layer visibility.
      • Select the object and press the Delete or Backspace key

      You can't delete a layer or object from an instance. If you try, Figma will only toggle the layer's visibility instead of removing it.

      Tip! Toggling a layer or object's visibility will hide it from an Auto Layout frame. If you want to create a gap in where the object should be, you can adjust the opacity of the object instead. In the right sidebar, update the Layer settings to 0%.

      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 right sidebar, click the 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.

      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 Slide in and Move in transitions →

      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.

      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.

      Main 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 main component. You can then swap out the icon for another component in your library.

      Updates to Auto Layout

      Note: The following updates were released November, 2020.

      Update alignment for older Auto Layout frames

      In previous versions of Auto Layout, alignment was controlled at the child object level. This meant you could have different alignments for different child objects in an Auto Layout frame. We found the behavior uncommon among users, so in November 2020 we moved alignment controls to the parent frame to simplify how auto layout works. With the latest update, all child objects have to be aligned the same way.

      If you already have Auto Layout frames with children of different alignments that were created before November 2020, you may see the following:

      Update_Auto_Layout_notice.png

      In order to make adjustments to your Auto Layout values, you first need to update the frame in order to remove the individual child alignment.

      After updating your frame:

      Auto_Layout_Alignment.png

      • We will try to maintain your original design visually. In many cases, this means we will add intermediate frames to allow for differing alignments. These frames will be named Auto-added frame.
      • You can immediately undo this change, however, if you click away from the window or refresh the page, you will not be able to undo the update in the future.
      • If you’ve updated a main component, confirm its instances updated correctly.

      To create a design with child items with different alignment:

      1. Select the item you want to align differently.
      2. Add Auto Layout to the item using the keyboard shortcut Shift + A.
      3. Set the newly created frame to Fill container in the axis you want the alignment to be in.
      4. Set the alignment as needed.