The grid feature of XD is great, but what about columns, margins and gutters? In this video learn how to use XD tools and a Repeat Grid to create a custom grid for an artboard.
- [Voiceover] You may have noticed that there are no rulers…or guides in Experience Design, so how would you create,…basically, a grid-based layout?…Well, there are a number of ways of doing it,…and I thought I'd show you one of them.…So, to get yourself started,…just open up a new iPad artboard.…So, what we've got here is a portrait iPad,…and what I want to do is, make a 12 column grid.…So I'm going to have a 24 pixel wide margin.…So I'm just going to draw a box here,…just top to bottom, okay, so just get the rectangle tool…and draw your box, and what you can do is,…no border, and we'll fill it with a light gray.…
We'll pick this gray here.…Over to the selection tool, and over we go,…and it's bumped right up against that left edge,…you can see that there with the X value of zero.…So it's in the proper place.…Now what we're going to do is, we're going to make a copy of this.…And you can copy and paste, you can duplicate it.…But one of the easiest ways of doing this…is to hold down your option or alt key,…click, hold, drag, and you can just drag a copy of it,…
- Navigating the XD interface
- Using artboards and grids
- Adding content to layers
- Using the Repeat Grid feature
- Adding interactivity to a project
- Exporting content
- Sharing your work
Skill Level Beginner
Q: This course was updated on 11/29/2017. What changed?
A: New videos were added that cover the XD Assets panel, Experience Design symbols, Creative Cloud Libraries, and pinning comments.
UX Foundations: Accessibilitywith Derek Featherstone1h 20m Beginner
User Experience for Web Designerswith Chris Nodder1h 49m Beginner
1. Getting Started with Adobe Experience Design
2. Going from Concept to Interactive Prototype
3. Working with Images and Vectors
4. Build Stuff in Experience Design
5. Publishing and Developer Handoff
Next steps1m 13s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.