I want to create a list of buttons, showing one of the buttons in an active state.
I would like to be able to use a repeat grid and override the style of one of the buttons to show it as active.
Is this possible? Or is there a different way to achieve the same result?
I guess you can create the folder of images for the buttons of your list, they can be the similar images, just named differently, e.g. 01_b.png, 02_b.png with one image of a button in an active state. After that, you'll create the repeated grid with one image of the button and drag multiple selected images from the folder to the first image placeholder in your grid.
Thank you for your creative idea for a solution to this, however I do want to keep things vector and within the drawing tools of XD if possible. Otherwise I would have to create a new image in a separate application, each time I edit the text or change the font size of the buttons (to deal with width / height changes).
Edit: I just found this on the feature requests...
Thanks for your reply. I must admit that my solution is only a very complicated workaround and we need to have the option to make it easier. Also, I am struggling with similar problems and using a layer with icons over the text repeated grid to simulate the menu with icons. I do believe that XD developers must provide us with the easy way to create interactive menus and lists.
Unfortunately there's no official way to do this yet. Please upvote Exceptions in repeat grid (make one item different from all the rest) – Adobe XD Feedback to help move this up the priority list!
In the meantime, here are a few workarounds you could use:
Draw selected state on top of the Repeat Grid content
If the Repeat Grid is over a solid-color background, you can draw a rectangle over one grid cell with the same color as the background to "erase" it, then copy-paste everything from that grid cell to give you the freedom to completely change everything in that one cell.
Use Repeat Grid just for the initial layout
The downside is that if your design changes later and you need to edit all the grid cells, you'll have to manually redo your edits in each cell separately (or delete all of them and recreate them by cloning one cell that you're edited).
Use Symbols laid out manually
This takes a little more work to lay out the symbols, so if your Repeat Grid is huge it might not be ideal. But otherwise it's sort of the best of both worlds -- all the "default"-looking grid cells stay in sync if you edit them later, but you have total flexibility to change the one cell that needs to look different.
Hope that helps!
I found this video and it shows how we can override the style of a repeated grid element BY make component inside the repeated grid element