Establishing a clear naming structure or hierarchy makes managing layers in your files much easier. This becomes especially important when using Figma's Team Library and/or Styles features.

When it comes to tidying things up in Figma, we've got you covered. The Rename Layers function will allow you to quickly rename multiple layers at once.

This comes in handy when you want to quickly switch between related components in your Team Library.

In this guide we'll cover how to:

  1. Open the Rename Layers modal.
  2. Rename layers in bulk.
  3. Rename part of the layer's name.
  4. Use Regular Expressions (Advanced).

Open the 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:
    - Right-click on the layers in the canvas and choose Rename Layers.
    - Right-click on the layers in the panel and choose Rename Layers.
    - Use the Keyboard Shortcuts:
      Mac: [⌘] + [R]
      Windows: [ Ctrl] + [R]  
  3. The Rename Layers modal will open above the canvas:

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: [⌘] + [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 which 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: [⌘] + [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: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

Regular expressions follow the standard JavaScript syntax:

  • [a-zA-Z]+ – Match any string of alphabet characters.
  • \d+ – Match any string of numeric characters (digits).
  • \w+ – Match any string of alphanumeric characters (alphabet and/or digit), or an underscore.
  • \s+ – Match any string of whitespace characters (a space).
  • \<punctuation> - Match the punctuation. For example, type "\(" to match an open bracket.
  • ([a-zA-Z]+) – Match any string of alphabet characters and remember them for later.

Replacement patterns also follow standard JavaScript replacement patterns, with a few additions.

  • $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/

Did this answer your question?