See how to use the Repeat Grid in Adobe XD for a star rating system.
- [Voiceover] I wanna show another creative use…of the Repeat Grid,…and that's when you're using a rating system.…And first thing I need to do is grab an element…from the IOS UI kit,…so opening that up.…I actually wanna grab this star…because this is going to be used for the ratings,…is this star right in here.…All I need to do is Copy it…and then I can close that and then pasting it right in.…So this is what I want to use for my rating system.…
Here is this star.…I will Ungroup it and you can see I can change the color.…Let's just go with a white, just like that.…And now I can turn this into a repeated grid.…I can select Repeat Grid,…and now all of the sudden I have, say for instance,…a five star rating system,…and I can just decrease the column spacing, if you will.…And I can center that right under there.…In fact I might make the stars a little smaller…'cause they seem a little large.…
Something like that.…So I always have control over my elements, as expected.…Let's dive into this 'cause right now I've given it,…
Learn how to lay out a screen design with graphics and text and import vector and raster images. See how easy it is to create complex screen designs, complete with repeated lists and grids that are as simple to change as they are to create. This goes for any mobile screen type: iOS or Android, tablet or smartphone. Once the design is done, author Paul Trani shows how to add interactions and transitions to see how the app will "work" from one screen to the next. The end result is a full-featured prototype that can be shared with designers, developers, and clients, and broken down and exported as assets for use in development.
- Creating your first Adobe XD project
- Working with graphics and text in Adobe XD
- Importing assets
- Building additional screens for different display sizes and platforms
- Creating UI elements
- Using Repeat Grid for easy prototyping of lists and recurring elements
- Adding interactions to elements
- Creating transitions between screens
- Publishing and sharing a prototype
- Exporting artboards and assets