Related Videos

• Select layers and objects

   

  Before you Start

  Who can use this feature

  Supported on any team or plan.

  Anyone with can view or can edit 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 or the top-level frame. Hold down the modifier key to select the top-level frame or a nested layer or object by clicking it on the canvas.

  • Mac: ⌘ Command
  • Windows: Control

  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:

  • Mac: 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 right sidebar.

  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!

  If you select a top-level frame, only other top-level layers will be selected.

  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
     • Mac: ⌘
     • Windows: Ctrl 
  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 ⌘ Command / 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 menu.

  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:

    Mac: ⌘ A Shift

    Windows:  Ctrl A Shift

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

  Select objects in view-only mode

  There are a few ways to select objects in a file, but for collaborators with can view access, the experience is a bit different.

  When you make your selection in the canvas, Figma will:

  1. Outline your selection using a solid purple box.
  2. Outline the parent of your current selection using a dashed purple box.
  3. Show the name of the selected layer(s) at the top of the Inspect panel in the right sidebar.
  4. Show the Parent Component underneath the selected layer in the Inspect panel. Click the in the Inspect panel to select the parent component.

  

• Measure distances between layers

  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

  

  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.

  

• Lock and unlock layers

  Before you start

  Who can use this feature

  Anyone on any team or plan has access to the layers Panel in the Editor.

  Only users with can edit access can lock and unlock layers.

  Lock layers to prevent them from being moved in the canvas, or protect them from accidental edits. When you lock a layer, you can't interact with or move it around in the canvas. You can still select a locked layer in the Layers Panel or adjust any properties of the layer.

  If you lock a parent frame or group, then any child layers of that frame or group will also be locked. It's not possible to unlock child layers without unlocking the parent. Learn about parent and child relationships →

  Note: It's possible to select locked layers via the right-click menu. Right-click on the layer, choose Select layer, then select the layer from the options. Locked layers have a padlock next to them.

  Keyboard shortcuts

  • Mac: ⌘ Command ⇧ Shift L
  • Windows: Ctrl Shift L

  Canvas

  1. Right-click on the layer in the canvas.
  2. Select Lock or Unlock from the options.

  Layers Panel

  1. Hover over the layer in the Layers Panel until the appears.
  2. Click the padlock to lock the layer. Figma will close the padlock next to the layer in the Layers Panel.
  3. If this is a frame or group, then any children of that frame/group will also be locked.
  4. You will no longer be able to edit the layer in the canvas.
  5. Click the padlock again to unlock the layer.

  Tip! You can lock/unlock multiple layers at once. Click on the or and drag across the layers you want to update.

• Toggle visibility to hide layers

  Before you Start

  Who can use this feature

  Supported on any team or plan.

  Anyone with can edit access can toggle layer visibility off and on.

  You can toggle a layer's visibility in the Layers panel. You can still change the position, or adjust the properties of a hidden layer.

  Visibility for layers (and properties) is shown with an icon.

  Tip! Press ⇧ ShiftO to view and select hidden layer outlines →

  Hide and show layers

  There are a few ways to toggle a layer's visibility.

  Keyboard shortcuts

  Toggle a layer's visibility off and on using the keyboard shortcut:

  • Mac:   Command Shift H
  • Windows:   Control Shift H

  Layers panel

  You can also toggle a layer's visibility in the Layers panel. You can toggle layers individually, or hide all child objects in a group or Frame.

  1. Hover over the layer, group or Frame in the Layers panel.
  2. Click on the visibility icon to toggle the layer's visibility off.
  3. The eye will close and the layer will be hidden in the canvas. It will also appear as inactive (greyed out) in the Layers panel.
  4. Click to toggle the layer's visibility on again. 

  Note: When you hide a layer, you won't be able to select it in the canvas. This includes using the Select layer option in the right-click menu. You can still select the layer in the Layers panel and by showing outlines.

• Rename Layers

  Before you Start

  Who can use this feature

  Supported on any team or plan.

  Anyone with can edit access to a file can rename layers

  Establishing a clear naming structure or hierarchy makes managing layers in your files much easier. The Rename layers function will allow you to quickly rename multiple layers at once.

  

  Rename layers modal

  You can access the Rename layers modal a number of different ways.

  1. Select the layers you want to rename from the canvas, or in the layers panel.
  2. To toggle the Rename Layers Modal you can then do one of the following:
     
     1. Right-click on the layers in the panel and choose Rename.
     2. Use the keyboard shortcuts:
        • Mac: Command ⌘ - R
        • Windows: Ctrl + R
  3. The Rename Layers Modal will open above the canvas:

  Tip! You can rename a single frame or flow starting point right from the canvas by double-clicking its current name.

  Rename layers in bulk

  If you're wanting to simply update the selected layers to the same name, you can add the desired name to the Rename to field and click Rename.

  However, it's more likely that you will want to update each layer to have a slightly different name, allowing you to better distinguish objects in the layers panel.

  Below the Rename to field you will see some buttons. When clicked, these buttons will add a special code to the Rename to field that allows you to generate slightly different names for each layer.

  • The Current name button represents the layer's current name. 
  • The Number ↑ button inserts a number into each layer's name, in an ascending order.
  • The Number ↓ button inserts a number into each layer's name, in an descending order.

  To better explain how this works, we'll show you some examples.

  Example 1: Rename every layer to the exact same name

  If you want to update all of your selected layers to have the same name (e.g. Icon):

  1. Select the layers you want to update.
  2. Use the keyboard shortcuts to open the Rename Layer Modal
     • Mac: Command ⌘ - R
     • Windows: Ctrl + R
  3. Enter the new name into the Rename to field.
  4. Click the Rename button to apply.
  5. The selected layers will be updated to that name.

  Example 2: Rename each layer with a numerical suffix

  If you have a bunch of similar layers that you want to have the same name, but still be distinguishable, you can add a number to the end (or beginning) of the layer's name (e.g. Icon_1).

  1. Select the layers you want to rename.
  2. Right-click on the layers and select Rename layers.
  3. Enter the name you want to call the layers in the Rename to field.
  4. Click the Number ↑ or Number ↓ button. This adds a code to the name, that tells Figma to add a different number to the end of each layer's name.
  5. If you like, you can set the Start ascending from / Stop descending at field.
  6. You will see a Preview of the updated names on the left. Click the Rename button to apply. 
  7. The selected layers will be updated to the new name, with a unique number at the end.

  Example 3: Add a prefix to every layer

  If you already have a unique name for each layer, but would like to group them for faster editing, you can add a prefix to the existing name (e.g. Icon_Home).

  1. Select the layers you want to rename.
  2. Right-click on the layers in the layers panel and select Rename layers.
  3. Enter the prefix you'd like to add to the layer name.
  4. Click the Current Name button to add the current layer name after the prefix.
  5. You will see a Preview of the updated names on the left. Click the Rename button to apply.
  6. The selected layers will be updated to start with the prefix, followed by the original name:

  Rename part of a layer's name

  While you were using the modal, you may have noticed a " Match" field. This allows you to identify which part of the layer's name you want to update.
  
  By leaving this blank you can update the entire name, but you can also use this field to remove or update part of the layer's name (e.g. change the " Icon/" part in the name "Icon/Home" to "Image/").

  1. Select the layers you want to rename.
  2. In the Match field, enter the part of the name you'd like to update.
  3. Enter what you'd like to replace that part of the name with. This will only replace the part of the layer's name identified in the Match field.
  4. You will see a Preview of the updated names on the left. Click the Rename button to apply.

  Use Regular Expressions (Advanced)

  If you're familiar with, or confident using regular expressions, then you can also use these in the Rename Layers Modal. This is particularly handy if you want to change the syntax of the name (e.g. change "Icon_003" to  "003_Icon").

  1. Select the layers you want to rename.
  2. Use the keyboard shortcuts to open the Rename Layer Modal:
     • Mac: Command ⌘ + R
     • Windows: Ctrl + R
  3. Type ([a-zA-Z]+)_(\d+) in the Match field.
  4. Type $2_$1 in the Replace field.
  5. You will see a preview of the updated names on the left. 
  6. Click the Rename button to apply.

  New to Regular Expressions or need a refresh? Mozilla have a handy reference guide on their website.

  Some common patterns to get you started are:

  • $1, $2, etc – the first, second, etc., match marked by parentheses.
  • $& – the entire thing that was matched.
  • $` – everything before the thing that was matched.
  • $’ – everything after the thing that was matched.
  • $n – an increasing counter. (nonstandard).
  • $nnn – an increasing counter with three digits. (nonstandard)
  • $NNN –  a decreasing counter with three digits. (nonstandard)

  If you want to test your regular expressions before entering them you can try them out here https://regexr.com/

• 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