Control Multiple XD Artboards with Nested Symbols
Design by Codify Design Studio.
by Chris Converse
posted on 02-22-2019
Symbols provide an excellent way to create reusable artwork and text that can be applied multiple times across artboards in your project. However, did you know that symbols can be placed inside of other symbols? This nesting technique can be used to create layouts that can be applied and modified across a series of artboards.
Creating symbols in XD
Any element in XD, including images, text, or artwork, can be converted into a symbol to be used throughout your project. To create a symbol, simply select the item(s) you’d like to be able to reuse, go to the Object menu and select Make Symbol.
Once you have some symbols created, select and convert them to a new symbol. This new symbol will contain the symbols that were previously created, thus making them nested symbols.
Nested symbols retain their layout properties, both in relation to each other and the original artboard they appeared on. The layout symbol (containing the nested symbols) can now be used as a template.
Update multiple artboard layouts from a single symbol
The layout symbol can now be placed across multiple artboards within the XD project to ensure a consistent layout throughout the student gallery.
With this structure in place, changes made to the layout symbol are immediately applied to every instance of that symbol. It is worth noting that images and text can be customized across instances of the symbol, or nested symbols. In the example above, each artboard uses a different photo while maintaining other attributes of the layout symbol.
Check out the final mobile web design
The mobile web design used in this article was designed and developed for Russell Brown’s pre-conference session at Adobe MAX 2018 entitled Forward Into the Past.
Be sure to check out the poster and lunchbox galleries, featuring work created by the attendees of this pre-conference session. There’s also a video, on the AR Projects page, that features attendee projects created with Project Aero!
Learn more layout and prototyping techniques in this e-learning webinar recording
XD allows you to prototype advanced interactive experiences with ease. Fixed elements, varied-sized artboards, overlays, and a built-in cloud service provide you with the tools you need to create, experience, and share your vision with anyone around the world.
Join us online and get a first-hand look at some advanced techniques that will help you bring your interactive visions to life.
In the Advanced Prototyping Techniques with Adobe XD webinar you’ll learn to:
- Go beyond the basics with the Repeat Grid.
- Control your navigation with a Google spreadsheet.
- Nest symbols to control layouts across artboards.
- Use Auto-Animate to create engaging prototypes.
- Create voice-driven prototypes.
Products: Photoshop, Creative Cloud, XD