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.

  

• Copy and paste objects in the canvas

  Before you start

  Who can use this feature

  Supported on any team or plan.

  Anyone with can view access can copy objects in a file

  Anyone with can edit access can paste objects in a file

  Hands-on learner? Check out our Copy and paste playground file.

  When you copy and paste an object in your canvas, Figma considers your intended placement of the object while keeping you aware of your location and view of the canvas.

  Paste placement

  Pasted objects try to maintain the same x and y positions within the destination frame relative to its position in the group or frame it was copied from. If the destination group or frame can't accommodate either of the object's x or y position in its previous container, Figma will paste the object in the center of the new frame.

  In the example below, Frame 1 contains a purple ellipse, red star, and green square located at the top left, bottom left, and bottom right corners respectively.

  When we copy the objects from Frame 1 to Frame 2:

  • the purple ellipse keeps its original position because both its x and y coordinates can be matched in Frame 2
  • the red star can only be matched with its original x coordinate and is centered on the y axis
  • the green square is centered on both axes because neither its original coordinates can be accommodated in Frame 2.

  

  When we copy the objects from Frame 1 to Frame 3 below:

  • the purple ellipse keeps its original position because both its x and y coordinates can be matched in Frame 3
  • the red star keeps its original position because both its x and y coordinates can be matched in Frame 3
  • the green square is centered along the x axis because it can only be matched to its y coordinate in Frame 1.

  

  Canvas view

  If you have a frame selected while pasting a copied object, Figma considers your current view of the canvas to determine where to paste the object and whether to adjust your viewing area.

  • If your current view of the canvas is far from the selected frame, Figma will paste the object in the center of your current view to avoid moving you too far from your intended paste area or disorienting you within the canvas.
  • If the selected frame is just outside your current view, Figma will paste the object into the selected frame and adjust your viewing area slightly to bring the pasted object into view.
  • If the object being pasted is larger than your current view of the canvas, Figma will adjust your view's zoom level so you can see the full pasted object.
  • If the object is being pasted into a selected frame larger than your view of the canvas, Figma will place it inside the frame in a centered position to keep you within your viewing area.

  Note: Figma considers an area 50% larger than your current view of the canvas to determine whether to adjust your view after pasting an object. If your pasted object is placed within that area, Figma will adjust your view. Otherwise, Figma will paste your object on the canvas, centered to your current view, and adjust your zoom level to depending on the object's size.

  Paste to replace

  Use the Paste to replace function to remove a selected object from your canvas or frame and replace it with the object copied to your clipboard. This is useful when you want to replace placeholder items in a frame or populate low fidelity wireframes with assets.

  

  1. Select and copy an object using the keyboard shortcut:
     • Mac: ⌘ CommandC
     • Windows: Control+C
  2. Select the objects you'd like to replace with the copied object.
  3. Right-click your selection and click Paste to replace from the menu. You can also use the keyboard shortcut:
     • Mac: ⇧ Shift ⌘ Command R
     • Windows: Control+Shift+R

  Note: The pasted object will adopt the constraints of the object it replaced. Learn more about constraints →

  Paste over selection

  The Paste over selection option will place a copied object on top of a selected frame, not inside it. The pasted object will match the x, y position of the selected object.

  1. Select and copy an object using the keyboard shortcut:
     • Mac: ⌘ CommandC
     • Windows: Control+C
  2. Select the frame you want to paste the copied object on top of.
  3. Click to open the file menu > Edit > Paste over selection. You can also use the keyboard shortcut:
     • Mac: ⌘ Command⇧ ShiftV
     • Windows: Control+Shift+V

  Multi-paste

  Multi-paste is useful when you want to add an object to multiple frames at the same time. For example, adding a navigation bar to multiple mobile wireframes or a footer to slides in a presentation deck.

  

  1. Select and copy an object using the keyboard shortcut:
     • Mac: ⌘ CommandC
     • Windows: Control+C
  2. Select the frames you want to paste your copied object to.
  3. Paste the object using the keyboard shortcut:
     • Mac: ⌘ CommandV
     • Windows: Control+V

  Paste here

  The Paste here option lets you choose the exact placement for a pasted object. The object is placed in the location of your cursor on the canvas or in a frame.

  

  1. Select and copy an object using the keyboard shortcut:
     • Mac: ⌘ CommandC
     • Windows: Control+C
  2. Position your cursor where you want the top left of your copied object to be placed.
  3. Right-click and select Paste here.

  Note: When you use Paste here with an auto layout frame, the object will be pasted on top of the frame, not inside it.

  Paste to clipped frames

  Copy pasting objects that are inside a frame, but visually outside the frame bounds will honor the outside position whether the destination frame is clipped or not.

  This is handy for placing objects outside of the frame that will be animated into or out of a frame in a prototype with smart animate.

  Copy as PNG

  You can copy a selected object as a PNG image to your clipboard to paste inside Figma or other applications. Images created using Copy as PNG will default to a 2× size image output.

  • Select an object.
  • Right-click the object and select Copy as PNG. You can also use the keyboard shortcut:
    • Mac: ⌘ Command⇧ShiftC
    • Windows: Control+Shift+C
  • Paste the image using the keyboard shortcut:
    • Mac: ⌘ Command⇧ShiftV
    • Windows: Control+Shift+V

  Copy and paste image fills

  Images in Figma behave as fills that can be layered and applied to shapes objects. You can select an image fill on a shape and copy paste it onto another shape.

  1. In the Fill section of the right sidebar, select the area just to the left of the image preview.
  2. Copy the fill using the keyboard shortcut:
     • Mac: ⌘ CommandC
     • Windows: Control+C
  3. Select the shape you want to add the copied fill to.
  4. Paste the copied image using the keyboard shortcut:
     • Mac: ⌘ CommandV
     • Windows: Control+V

  Learn more about how copy and paste works in our playground file →

• 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