Use guides and grids in XD

  1. Adobe XD User Guide
  2. Introduction
    1. What's new in Adobe XD
    2. Common questions
    3. Design, prototype, and share with Adobe XD
    4. System requirements
      1. Hardware and software requirements
      2. Adobe XD, Big Sur, and Apple silicon | macOS 11
    5. Workspace basics
    6. Change app language in Adobe XD
    7. Access UI design kits
    8. Accessibility in Adobe XD
    9. Keyboard shortcuts
    10. Tips and tricks
    11. Changes to XD Starter Plan
  3. Design
    1. Artboards, guides, and layers
      1. Get started with artboards
      2. Use guides and grids in XD
      3. Create scrollable artboards
      4. Work with layers
      5. Create scroll groups in XD
    2. Shapes, objects, and path
      1. Select, resize, and rotate objects
      2. Move, align, distribute, and arrange objects
      3. Group, lock, duplicate, copy, and flip objects
      4. Set stroke, fill, and drop shadow for objects
      5. Create repeating elements
      6. Create perspective designs with 3D transforms
      7. Edit objects using Boolean operations
    3. Text and fonts
      1. Work with drawing and text tools
      2. Fonts in Adobe XD
    4. Components and states
      1. Work with components
      2. Work with nested components in Adobe XD
      3. Add multiple states to components
    5. Masking and effects
      1. Create a mask with shapes
      2. Work with blur effects in XD
      3. Create and modify gradients
      4. Apply blend effects
    6. Layout
      1. Responsive resize and constraints
      2. Set fixed padding for components and groups
      3. Create dynamic designs with stacks
    7. Videos and Lotties
      1. Work with videos in XD
      2. Work with Lottie animations in XD
  4. Prototype
    1. Create interactive prototypes
    2. Animate prototypes
    3. Object properties supported for auto-animate
    4. Create prototypes with keyboard and gamepad
    5. Create prototypes using voice commands and playback
    6. Create timed transitions
    7. Add overlays
    8. Design voice prototypes
    9. Create anchor links in Adobe XD
    10. Preview designs and prototypes
    11. Create prototypes with videos in XD
  5. Share and export
    1. Share selected artboards
    2. Share designs and prototypes
    3. Work with prototypes in XD
    4. Coedit documents shared with you
    5. Create shareable links
    6. Review prototypes
    7. Work with design specs
    8. Share design specs
    9. Inspect design specs
    10. Navigate design specs
    11. Review and comment design specs
    12. Export design assets
    13. Export and download assets from design specs
  6. Design systems
    1. Design systems with Creative Cloud Libraries
    2. Work with document assets in Adobe XD
    3. Work with Creative Cloud Libraries in Adobe XD
    4. Migrate from linked assets to Creative Cloud Libraries
    5. Work with design tokens 
    6. Use assets from Creative Cloud Libraries
  7. Cloud documents
    1. Cloud documents in Adobe XD
    2. Collaborate and coedit designs
  8. Integrations and plugins
    1. Work with external assets
    2. Work with design assets from Photoshop
    3. Copy and paste assets from Photoshop
    4. Import or open Photoshop designs
    5. Work with Illustrator assets in Adobe XD
    6. Open or import Illustrator designs
    7. Copy vectors from Illustrator to XD
    8. Plugins for Adobe XD
    9. Create and manage plugins
    10. Jira integration for XD
    11. Slack plugin for XD
    12. Zoom plug-in for XD
    13. Share prototype from XD to Behance
  9. XD for iOS and Android
    1. Preview on mobile devices
    2. Adobe XD on mobile FAQ
  10. Troubleshooting
    1. Known and fixed issues
      1. Known issues
      2. Fixed issues
    2. Installation and updates
      1. XD appears as not compatible on Windows
      2. Error code 191
      3. Error code 183
      4. Issues installing XD plugins
      5.  Prompt to uninstall and reinstall XD on Windows 10
      6. Issues with preferences migration
    3. Launch and crash
      1.  XD crashes when launched on Windows 10
      2.  XD quits when you sign out of Creative Cloud
      3. Issue with subscription status on Windows
      4. Blocked-app warning when launching  XD on Windows
      5. Crash dump generation on Windows
      6. Crash log collection and sharing
    4. Cloud documents
      1. Issues with XD cloud documents
    5. Prototype, publish, and review
      1. Unable to record prototype interactions on macOS Catalina
      2. Issues with publish workflows
      3. Published  links do not appear in browsers
      4. Prototypes do not render correctly in browsers
      5. Commenting panel suddenly showing up on shared links
      6. Unable to publish libraries
    6. Import, export, and working with other apps
      1. Import and export in XD
      2. Photoshop files in XD
      3. Illustrator files in XD
      4. Export to After Effects from XD
      5. Sketch files in XD
      6. Third-party apps not visible in Export

Looking for information on aligning design assets using guides and grids? You have come to the right place!

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 (images, glyphs, paragraphs) and ensure the symmetry of the layout.

What are guides?
Guides in XD

What are grids?
Layout and square grids in XD

Hello, I'm Jeanee! A lead visual designer working on a UX design project in XD that has multiple artboards and objects.

 
  • She is looking for resources to quickly layout and position objects using guides.

 

  • She needs help in aligning and defining the object structure within the design project using grids.

Does this sound familiar? If you're facing such challenges, read on to learn how to create and use guides and grids within your artboards.

New to Adobe XD?

Get Free Trial App

Learn app basics.

Try it yourself

Get Sample File

.xd;  7 MB

Before you proceed

Create and manage guides

Once your artboards are laid out on design canvas,, an area is added to the top and left of your artboards that allow you to drag out guides. You can quickly snap to the horizontal and vertical centers, copy, and paste them across multiple artboards, remove them, and toggle their visibility.

Read on to learn how to create and manage guides.

Add guides

Copy-paste guides

Remove guides

Clear, hide, and lock guides

Create guides

Do you want to align and position objects within your artboards from top to bottom? Use vertical guides. If you want to align and position objects from left to right, use horizontal guides. 

Vertical guides

Add guides within your artboards

To create a vertical guide, hover the pointer over the left border of the artboard until the  icon appears. Click and hold the icon and then drag it to the desired position.

Horizontal guides

Add guides within your artboards

To create a horizontal guide, hover over the top border of the artboard until the  icon appears. Drag-and-drop to the desired position.

Copy and paste guides

Now that you have created guides, you can use the Copy/Paste Guides option to quickly duplicate the them.

Copy guides

Copy guides within an artboard

To copy guides from an artboard, select the artboard, click View > Guides > Copy Guides.

Paste guides

Paste guides within an artboard

To paste the copied guides, click View or right-click on the artboard > Guides > Paste Guides.

Remove guides

You can choose to remove one or more guides at a time.

To remove a guide, click and drag the guide out of the artboard.

To remove multiple guides on an artboard, select the artboard and click View option right-click on the artboard. Select Guides > Clear Guides.

Clear guides added to an artboard

Hide and lock guides

Do you want to temporarily hide guides and turn them on when needed? Use the Hide All Guides option.

You can also choose to lock guides across all the artboards to prevent them from being accidentally moved or adjusted.

To hide and lock guides on macOS and Windows:

Hide guides

Hide guides

  • Click View > Hide All Guides option from the top menu bar. You can also use Command + ; to hide guides in macOS.
  • Right-click on the artboard and select Guides > Hide All Guides. You can also use Ctrl + ; to hide guides in Windows.

Lock guides

Lock all the guides across artboards

  • Click View > Lock All Guides option from the top menu bar. You can also use Command + Shift + ; to lock guides in macOS.
  • Right-click on the artboard and select Guides > Lock All Guides. You can also use Ctrl + Shift + ; to lock guides in Windows.

Snap-align objects using Smart guides

Now that you are done with the basics of how to create and manage guides, you can use smart guides to temporarily snap the guides when you create or manipulate objects or artboards. 

Smart guides

Smart guides are enabled by default. When you move an object or artboard, smart guides let you align, edit, and transform objects or artboards relative to the other objects, artboards, or both by snap-aligning.

Position objects using grids

Now that you know the basics of guides in XD, go ahead and learn how to define the design structure and align objects within your artboard using Layout or Square grids. 

To add layout or square grids, select one or more artboards. Navigate to the Grid section in the Property Inspector and choose either Layout or Square.

Layout grids

Position objects within layout grids

Layout grids are column grids that are useful when aligning design objects or designing for different screen sizes. You can easily and quickly adjust them based on your needs.

Square grids

Position sqaure grids

Square grids have horizontal and vertical lines for precise sizing and aligning objects when designing mobile apps or icons.

Set grid preferences

Once layout and square grids are added to artboards, you can personalize the display options for your grids by adjusting the preferences in the Grid section of the Property Inspector. Read on to learn how to change the grid size, number of columns, gutter properties, and margins for your grids.

Square grid preferences

Based on your design needs, you can change the grid size for square grids.

Change sqaure grid size

Grid size is the distance between the gridlines in the square grid. To edit the grid size value, enter the required number in the Square Size field of the Property Inspector.

Layout grid preferences

With a layout grid applied to an artboard, you can set the number of columns, column width, gutter properties, and margin sizes from the Grid section of the Property Inspector.

Change number of columns

Change number of columns in layout grid

Enter the value in the Columns field. For web designs, 12 or 16-column grids are commonly used. 

Change column width and gutter properties

Change gutter properties in layout grid

To change the width of the columns, enter the value in the Column Width field. To define your own gutter width, edit the default Gutter Width field. 

Now that you've modified the number of columns, gutter width, and column width, learn how to adjust the margins of the artboard. Margins are the distance between the layout grid and the edge of the artboard. Read on to learn how to adjust margins on all sides.

Change linked left or right margin

Change linked left or right margin

To adjust the linked margin on left and right side, click the  icon and edit the value.

Change margin of each side

Change margin of all sides

To adjust the left, right, top, and bottom margins individually, click the  icon, and then enter the values.

Do more with grids

Now that you know how to set preferences for your grids, read on to learn how to add grid colors and control their visibility.

Add colors

Show or hide grids

Add colors

Do you want to modify the appearance of grids? Use the color picker in the Property Inspector to add and change the grid color.

Add colors to layout and square grids

A. Color field B. Color slider C. Eyedropper 

Click the box next to Square Size for square grids and Columns for layout grids. 

From the color picker, you can:

  • Adjust the color using the color field and color slider.
  • Use the Eyedropper tool to select a color from an artboard.
  • Set the opacity of the fill by using the color slider or typing a value in percentage. If you set the value to 0, the layout grid switches to outline view.

Hide and show grids

You can control the visibility of layout and square grids using the Hide Layout/Square Grids or Show Layout/Square Grids option.

Hide layout grid

Show or hide layout grids

  • Choose View > Hide Layout Grid. You can also use Command + Shift + ' to hide layout grids in macOS.
  • In the Property Inspector, select a grid type from the Grid drop-down list, and select the check box next to the drop-down list. You can also use Ctrl + Shift + " to hide layout grids in Windows.

Show square grid

Show or hide square grids

  • Choose View > Show Square Grid. You can also use Command + ' to show square grids in macOS.
  • In the Property Inspector, select a grid type from the Grid drop-down list, and select the check box next to the drop-down list. You can also use Ctrl + " to show square grids in Windows.

Video: How do I add guides and layout grids?

"When working on design projects, lay out guides to better assist you when lining up objects or to make sure that the elements are spaced properly"- says Howard Pinsky, Senior XD Evangelist.

Tips and tricks

  • To snap an object to a layout or square grid, drag an object toward the grid until one of the object’s edges is within the grid’s snap-to zone.
  • Guides snap to selected objects or top-level objects drawn on the canvas. To disable the snapping behavior, press  (on macOS) or Ctrl (on Windows). 
  • To position the guide in increments of 10 px on the canvas, press Shift.
  • To revert to the default square or layout grid appearance, click Use Default option on the Grid section of the Property Inspector.

What's next?

We've got you started with how to position and align objects within artboards using guides, and grids. Take a step forward and learn how to use repeat grids to create objects with repeatable elements.

Have a question or an idea?

Ask the Community

If you have a question to ask or an idea to share, come and participate in Adobe XD Community. We would love to hear from you and see your creations.

شعار Adobe

تسجيل الدخول إلى حسابك