In Adobe XD see how to use the Repeat Grid for content that goes on an About page.
- [Instructor] Anytime you find yourself doing…the same steps over and over…and sort of copying and pasting elements,…think about using the repeat grid.…And that's what I wanna do right now,…perfect for an about page, and that's what I wanna make.…So I'm gonna select this Real Estate page, or art board,…and I will Duplicate it.…So it's duplicated, in this case…this is going to be the About,…type in About on the side there…for this About page.…That's actually where I wanna add in various pictures…of people on the team.…
So I can do this pretty easily,…I'll delete that one right there…and I can draw out a larger box,…that's gonna be about half the size, right there.…There's what's going to be my image placeholder,…so I can change that color just to anything,…to like a red and turn off the border.…And then I'll add some text.…So this'll be the name.…Name of the person, right there.…I'll make sure this is legible,…I'm using the font Lato,…I'll make sure this is nice and bold…so it's easy to read.…
Let's make it black, text is going to be white,…
This course shows everything you need to know to design your first website with Adobe's new prototyping app. Learn how to lay out a design, import graphics, and add headers and body copy. See how to create complex screen designs with repeating lists and grids that are as easy to change as they are to create. Then find out how to add new pages and use screen elements from the iOS, Android, and Windows UI kits that are built right into Adobe XD. Once the design is done, author Paul Trani shows how to add interactions and transitions to demonstrate how the website will "work" from one screen to the next. Plus, learn how to share a fully interactive prototype with other designers and clients, and export artboards and other assets to use in site development.
- Creating and importing graphics
- Adding text and effects
- Creating new pages
- Using Repeat Grid for easy prototyping of lists and recurring elements
- Adding interactions to elements
- Prototyping an entire website
- Sharing and exporting prototypes