• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

Can you override the style of a repeated grid element?

New Here ,
Nov 03, 2016 Nov 03, 2016

Copy link to clipboard

Copied

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?

Thanks

Views

8.6K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Employee , Nov 03, 2016 Nov 03, 2016

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

  1. Select the button inside the Repeat Grid cell and copy it to the clipboard
  2. Exit the Repeat Grid's edit context and then paste -- the button copy outside the Repeat Grid will be lined up perfe
...

Votes

Translate

Translate
Community Beginner ,
Nov 03, 2016 Nov 03, 2016

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 03, 2016 Nov 03, 2016

Copy link to clipboard

Copied

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...

Exceptions in repeat grid (make one item different from all the rest) – Adobe XD Feedback : Feature ...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 03, 2016 Nov 03, 2016

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Nov 03, 2016 Nov 03, 2016

Copy link to clipboard

Copied

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

  1. Select the button inside the Repeat Grid cell and copy it to the clipboard
  2. 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
  3. 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

  1. Edit the Repeat Grid until you have the appearance of most of the cells set up the way you like it
  2. Select the entire Repeat Grid and choose Ungroup Grid.
  3. 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

  1. Create the content for the first grid cell
  2. Select all that content and choose Make Symbol
  3. 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)
  4. 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!

- Peter

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 07, 2021 Jul 07, 2021

Copy link to clipboard

Copied

https://www.youtube.com/watch?v=HfXIJTUgJGc
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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 27, 2021 Aug 27, 2021

Copy link to clipboard

Copied

LATEST

Thank you!!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines