Adobe XD: Layout and Grids

Name: Adobe XD: Layout and Grids
Author: Alyssa Galganov

Learn how to create dynamic layouts in Adobe XD

Preview the first lesson free — get full access to all 5 lessons.

Course: On-Demand

Hello! My name is Alyssa, and in these lessons, we are going to go over working with Adobe XD's layout and grids. Defining a grid system will help your design stay in alignment and can save valuable time measuring pixels and spacing between elements. Two options exist in Adobe XD to provide guidance when setting up your design: layout and square. Let's explore the layout grid. I'm going to just create a new file by clicking over here on my home screen on the new file button, and the default screen of 1920 pixels wide by 1080 pixels high is selected. I'm just gonna click over here in the gray space to deselect it because I just wanna show you that if you click on the name, we can select the art board. When we select the art board, you can see over here in the property inspector that there is a grid panel at the bottom. Currently, it says layout for the grid type, and if we click on the chevron, you can see that there's a choice between layout and square. I'm going to leave it on layout, and I'm gonna go ahead and click right here in this little box, and what that lets us do is toggle on the layout grid. Currently, it is the cyan color, and it is 12 columns, but you can change this however you like. We can go ahead here, and I'll go in here and type in 16, and I'll press the return key to commit it. Now you see 16 columns. I could go ahead and change the gutter width as well. I'll change that to something like 24, and you can see that now there's a little wider gap between those 16 cyan vertical columns. If that is not your color, you could always change it by clicking on this checkerboard over here, which is the layout grade column color, and you can pick whatever color you want here. I can go ahead and just move this slider up and down and until I get the color I like. If you think that you would like them darker, you can go ahead and change the alpha here in the percentage. Currently, the default is 25%. You can go ahead and change it to something like 10. Press the tab key or the return key to commit it, and you can see that it's much lighter now. If this was something that I really liked and wanted to use in several projects, I can go ahead and click and make it my default. If I've made all these changes and decide that this is not what I like, we can go ahead and click on the use default button, and we go back to where we started. Thank you for watching. Stay tuned for the next video where we will go over the square grid.

Beginner Provider : Alyssa Galganov 5 Lessons · 16m in Arabic, German, English, Spanish, French, Portuguese, Chinese

Course Description

In this course, you will learn how to create dynamic layouts in Adobe XD with the assistance of grids, guides, alignment, distribution, and repetition. When working on your designs, you can use guides to line up objects or manage spacing between elements on an artboard. Grids serve as a framework on which you can organize your design elements and ensure the symmetry of the layout.

Defining a grid system can help you ensure your design stays in alignment and can save valuable time measuring pixels and spacing between elements. You will learn about the two grid options in Adobe XD that provide guidance when setting up your design: layout and square.

What You'll Learn

Create and adjust layout grids in Adobe XD to structure your design elements
Create and adjust square grids to maintain symmetry across an artboard
Create and manage guides to line up objects and control spacing between elements
Align and distribute design elements for consistent, organized layouts
Use the Repeat Grid button to replicate elements efficiently

Key Takeaways

Grids serve as a framework for organizing design elements and ensuring the symmetry of a layout.
Defining a grid system helps keep a design in alignment and saves time spent measuring pixels and spacing between elements.
Adobe XD offers two grid options that provide guidance when setting up a design: layout and square.
Guides can be used to line up objects or manage the spacing between elements on an artboard.

Frequently Asked Questions

What will I learn in this course?

You will learn how to create dynamic layouts in Adobe XD using grids, guides, alignment, distribution, and repetition, including how to create and adjust both layout and square grids and how to create and manage guides.

What grid options does this course cover in Adobe XD?

The course covers the two grid options in Adobe XD that provide guidance when setting up your design: layout and square.

What topics are included in the lessons?

The lessons cover Layout Grids, Square Grids, Creating Guides, Aligning and Distributing Design Elements, and the Repeat Grid Button.

Why are grids useful when designing in Adobe XD?

Grids serve as a framework for organizing design elements and ensuring symmetry, helping keep your design in alignment and saving valuable time measuring pixels and spacing between elements.