Repeater 🔥 (Auto-Layout evolution)

Share an idea
1

Hey guys,

Let’s be real. The main spectrum of work with UI, whether it’s an app, or a website, is displaying data or content (such as feed, lists, posts, comments, etc).

We can do a component of a post card, for example. Then duplicate instances, and wrap that in an auto layout.

It would be cool to have a repeater that shows right up after you’ve activated the auto-layout, where you can specify how many times to repeat the instance (component) and bind data to it.

Repeater
Repeater1600Ă—1600 79.8 KB

At the same time, it would be cool to have a centralized data location somewhere (i.e. when you click on the data, open a shared data set so that the same data can be accessed from different repeaters).

(Screenshot is just to deliver the idea, it’s far from the perfect UI, I didn’t spent much time of thinking it through since Figma has a great product team on board to elaborate it and deliver in an amazing simplified way)

It feels like it’s a very natural evolution of Auto-Layout feature.

So, what do you guys think?

(P.S. Sorry for my English, it’s my second language)

25 Likes
2

I agree. Since interface design is mostly about repeating elements, the repeater function would be appropriate for tables, lists, cards, and the like. A similar feature exists in Adobe XD (called Repeat Grid).

Only in the repeater settings it would be enough to indicate the number of repeating elements (for example, 5), and the content will change, as always, on the canvas.

7 Likes
3

Love it. Definitely needed. It would be great if it functioned like the Craft plugin for Sketch, where you can can set a repeating number and also import a json file or url. I know there are plenty of json plugins, but I haven’t found any that are really robust and work well with repeating objects or updating.

4

Much needed feature, for sure. I miss the Craft repeater, there are some substitutes as @Aalok_Trivedi wrote, but I had no chance to actually see how they work.

1 Like
5

Yes, the number of repeating elements is indeed necessary. I just forgot to add it lol, as I was trying to put the image together as I was writing the post. I thought the picture would be useful and quickly sketched it out and forgot about the number :slight_smile:

6

Yes that would be nice. As is Auto Layout and Repeat Grid (XD) are both kinda half-baked but each in different ways. Joining them would be very welcome.

3 Likes
7

In addition, now that interactive component are here:
i would love to have a “is active element” event inside repeaters.
that way, it would be easy to make generic radio-buttons.

8

I agree with multiples for auto layout. One issue I have with this is that in order for this to work well, any interactive component with images inside of them will have to keep the image after state change (I believe its still an issue).

9

I’ve seen a lot of discussion about creating dynamic components but having to break them when wanting to manipulate the number of nested children inside. I realize this is most likely already something that is in development or has been added on a post-it note in a backlog somewhere, but I wanted to throw my hat in the ring for a way in which this might be possible. Forgive me if someone has already made this solution but I have not seen it thus far and if you have already thought of this, then I’m glad that there are also like-minded folks out there.

Previous temporary solutions for this that I’ve seen are to use components that have a designated number of “slots” already included to add and remove nested children. This works but only to a limit and for some folks with large files, sometimes this always isn’t the most performant as data is still being loaded for these placeholder children.

My solution would designate an already predetermined child to be dynamic in number, so only that child could be repeated. There are limits to this of course but this could also encourage some creative shifting into the philosophies and models we use to compose components currently in Figma.

Would love to hear other folk’s thoughts on this too. Thanks for reading!

8 Likes
10

I think this solution have a lot of dependencies on components. it doesn’t solve the repeat grid issue; imagine we want a list that is not a component, it’s more common in designs. although I think it would be great to have a numeral property in variants.

1 Like
11

Totally, I am completely aware that there are limitations and that it is for a very specific use case. But I do feel that when creating more complex components, nesting children components/utility components allows for more flexibility and scalability.

FWIW, I wasn’t looking to solve the repeat grid issue. I actually had made this a separate topic but the mods lumped it in here. I honestly think it’s completely separate from that topic and would consider this a separate feature.

12

@ashygee, this is a really interesting concept, and thank you for making a video demo to go with it! Having a feature like this would jive so well with the way I work. I tend to make everything a component as a workaround for a lack of native content/data management, and I can see how this “dynamic child” concept could help greatly:

To use your Menu and MenuItem example for how I achieve the same results today: I would set it up exactly as you did, but when it came time to mockup a screen or prototype with real(istic) content, I’d to create a component that contains all the MenuItem instances I need in an auto-layout frame with overrides applied to the text, might name it “MenuItems / Content Overrides.” Then, in an instance of “Menu” I would swap the single nested “MenuItem” inside it for “MenuItems / Content Overrides”

So for files used to make mockups and prototypes, a feature like what you’ve suggested could drastically reduce the total number of components I’d need to make which would be great for file organization, and likely performance as well.

1 Like
13

Saw a new component properties video today that had like 10 toggles - show row 1, row 2, row 3, etc. Shows how silly things get when you can’t define a repeating portion of a component. Please consider this soon!

5 Likes
14

I was just doing a search today to see if the application had anything like this. We recently moved from Axure to Figma and it’s one of the components that Axure provided that I am definitely going to be missing.

1 Like
15

Would love to see this, with the recent property changes I’d hope this is another step closer to being a possibility. As described this would pretty much mirror the Repeater function in Axure, which I’d love to se in Figma.

Data heavy pages with tables or cards would be a breeze to mock up with this.

1 Like
16

@Figma_Team - please support repeater (like Invision Craft Data plugin for Sketch), XD Repeat Grid, or similar functionality. Please note that having pre-defined data as in Craft plugin is convenient, but having custom data source is essential for corporate/enterprise UX design. Data source can be a plain text file as in XD, Google Sheets data table or something else, as long as there is a way to map a specific column to the specific content container in your data template.

7 Likes
18

How could this not exist yet???

1 Like
19

This would be amazing. Please consider it.

20

Coming from sketch and Xd I feel missing this feature badly, I spend more time in tables duplicating rows than seeding on important stuff.

2 Likes
21

Bumping this - what a pain it is to create for example a table component in figma currently - impossible to duplicate rows and columns without detatching the component and losing all interactions.