Design one employee profile card in Adobe XD, and then use the Repeat Grid feature to quickly create an entire employee bio page.
design-an-employee-bio-page_1000x560

What you'll need

This sample file has Adobe Stock images you can use to practice what you learn in this tutorial. If you want to use the sample file beyond this tutorial, you can purchase a license on Adobe Stock. Check out the ReadMe file in the folder for the terms that apply to your use of this sample file.

Feel free to download the practice files or try these concepts on your own. Design the employee card layout — our employee card consists of a shape with an image fill, some text, and graphics. Select the entire card, and then click the Repeat Grid button in the Property Inspector on the right. Notice that a green dotted line with two handles appears around the element.

design-an-employee-bio-page_step1

Drag the green handles to repeat the employee card horizontally, then vertically. To adjust the distance between the cards, select the grid, then hover your cursor over the space between the cards. The cursor changes to a double arrow and XD highlights the space with pink. Click and drag to set the desired horizontal and vertical spacing between the cards.

design-an-employee-bio-page_step2

Change the color, style, and size of the Employee Name text to suit your design. You can adjust the style of any other elements in the card as well. Notice that style changes, such as color, size, and positioning, are global and affect all the elements of the same type in the grid.

design-an-employee-bio-page_step3

With the Select tool still chosen, replace the placeholder image by dragging multiple images from your computer onto the shape that includes the image fill. You should now have a variety of employee profile images in your grid. Use Control-click (Windows) or Command-click (macOS) to select an item inside a grouped object.

design-an-employee-bio-page_step4

Add employee names by dragging a return-separated plain text file with no formatting, saved with a .txt extension, onto the Employee Name object. You should now see unique employee names in your grid. You can change an individual name by double-clicking the name and typing over it.

design-an-employee-bio-page_step5

Repeat the process for employee titles and phone numbers. See how fast and easy it is to create an employee bio page from the one element you designed.

design-an-employee-bio-page_step6

Use Repeat Grid to quickly lay out lists, galleries, and other elements in your web and app designs.
 

With Adobe Stock, you have access to more than 100 million high-quality, royalty-free images including photos, graphics, videos, and templates to jump-start your creative projects. Try Adobe Stock and get 10 free images.

02/13/2019

Adobe Stock contributors: vectorfusionartFarknot Architect

Was this page helpful?