Skip to main content

Duplicate Bar (handle for repeating auto-layout content)

  • February 26, 2025
  • 3 replies
  • 194 views
Peter_Villevoye

In Figma’s playground file for the (beta) AI features, there’s a hands-on example for the AI feature called Replace Content. It sports a (vertical) auto-layout frame with two similar objects. When you select the frame, a wide handle appears on its bottom edge (in the instruction called the Duplicate Bar) , offering the option do drag up and down and add multiple instances of the same object(s).

It looks and works a lot like the Repeat Grid of Adobe XD – the only featured I missed now and then in Figma, so I’m a happy camper now ! 😄

The feature works very well, and the obvious next task of replacing the repetitive texts for uniquely generated dummy texts, also works very nicely BTW.

But how did they get this Duplicate Bar to appear ?
I can’t find anything about it in any Figma Help resources. Just this tidbit in the beta AI example.

So I tried and tested it a bit, and it seems to me that you need at least 2 by 2 elements: 2 elements in one group or auto-layout, copied or duplicated into 2 sets, and combined again into an auto-layout. This might be a bit overly complex to get it started.

And the term “Duplicate Bar” is also a bit misleading, because it’s not required to use the Duplicate command. Granted, it duplicates stuff, but maybe it’s better to call it the “Repeat Bar” or “Handle”, also to please former XD users ?

And while we’re on it: the Replace Content command should also be renamed into Replace Text, because it leaves image content untouched.

3 replies

Thomas_Fischer
Peter_Villevoye wrote:

...

But how did they get this Duplicate Bar to appear ?
I can’t find anything about it in any Figma Help resources. Just this tidbit in the beta AI example.

So I tried and tested it a bit, and it seems to me that you need at least 2 by 2 elements: 2 elements in one group or auto-layout, copied or duplicated into 2 sets, and combined again into an auto-layout. This might be a bit overly complex to get it started…

 

So, I did some experimenting myself. It appears to me that the repeating components must have text in them. 

As best I can tell, this feature is entirely for rapid layout of buttons, tabs, or other components with text values. AI will not only duplicate the component, it will attempt to provide text variations. 

Peter_Villevoye

You’re correct ! There needs to be indeed one textual element.
How long did it take you to figure out that extra requirement ?

It’s still a bit cumbersome method to invoke a nice feature...

Thomas_Fischer
Peter_Villevoye wrote:

How long did it take you to figure out that extra requirement ?

Well, I discovered this new feature by accident. I was just trying to increase the size of an auto-layout frame and this “duplicate bar” was actually getting in the way. Once I saw what it was doing, I decided it would be a great way to recreate the old Repeat Grid from my XD days. I instantly tried to create something with drawing objects and couldn’t understand why the little bar-thingy wouldn’t show up on what I thought was an identical auto-layout frame.

Then, I came here and saw your post which, at the very least, gave me a text string to search on. Like yourself, I found nothing. So, I went back to comparing the 2 frames and the only difference I could spot was the existence of a text element.

From there, I added a single character to the component I wanted to repeat and set the opacity to 0%.

Success!
I guess the whole process took about an hour.

As for cumbersome. Here’s my current process:

  1. Drop a component.
  2. ctrl+D to duplicate the component.
  3. Space and select both.
  4. shift+A to bind them into an auto-layout.
  5. Begin dragging.
Peter_Villevoye
1 person likes this
  • Peter_Villevoye
    Peter_Villevoye

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings