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.
2 people found this helpful
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
- Select the button inside the Repeat Grid cell and copy it to the clipboard
- Exit the Repeat Grid's edit context and then paste -- the button copy outside the Repeat Grid will be lined up perfectly with the one inside the grid cell
- Edit this copy to show the selected state. It will cover up the original version of the button coming inside the Repeat Grid.
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
- Edit the Repeat Grid until you have the appearance of most of the cells set up the way you like it
- Select the entire Repeat Grid and choose Ungroup Grid.
- Each grid cell will now be a totally separate group -- you can edit each one to make individualized changes as needed.
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
- Create the content for the first grid cell
- Select all that content and choose Make Symbol
- Make copies for each grid cell and lay them out vertically (automatic snapping will help you keep them evenly spaced, or you can use the Distribute commands)
- For the one grid cell that you want to look different, Ungroup the symbol so you can make your edits without affecting the others.
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!