Best Practice for Repetitive Elements (header, footer, menu bar)

[3nd Grafica]

Hi everyone,

just been practicing with XD in the last few days.

I've been using Photoshop for frontend layout, but I'd like to swap to XD for better live prototyping with my team. Mostly web and mobile sites, no app.

However there's one thing I'd like to understand as best practice.

On my website I have elements like header and footer, which they're pretty much always in same position. In Photoshop I've created linked smart objects for them such as Header.psb Footer.psb Menu Bar.psb, pretty much every section which is repetitive I've save it into a single linked smart object, so when I need it, I just place linked the file, and if I modify that single linked it will apply to every artboard where it's showed. Boom, simple as that.

Long story short:

What's ideally the best practice to have this method applied in XD?

Should I use the Symbol panel for it?

But what should I prefer to save, the whole header as a single object, or into multiple elements (search bar, cta, logo, account icon etc.)?

PS

please give us glyphs panel to use fontawesome libraries and stylistic alternates, thanks!

[Chris W. Griffith]

Yes, use the Symbol panel to achieve this workflow. That is the idea behind it

[3nd Grafica]

Hi Chris,

thanks for answering.

But would you use as symbol the whole header, or split into sections? Like Logo (to go back to the homepage) search bar, cart button...etc etc.

I'm worried that my symbol panel will be packed with tons of elements soon...

[soxfreak22]

UI/UX design in Adobe Experience Design (XD) | Adobe Experience Design CC (Beta) tutorials

Last video on that page will explain to you exactly what you need :]

[3nd Grafica]

Hi Soxfreak22

thanks for answering.

Unfortunately I've already saw that tutorial video, but still not clear to me if with other repetitive elements, especially for web site, if I should save a whole section or split that sections into single elements for better prototyping. Still looking around for better explanation or ket technique.

[elainecc · Accepted solution]

Right now, you should split between separate symbols, as you can't link from within a symbol at the moment. We'll be fixing this soon, though! After that has been fixed, you might want to create a nested symbol (or a symbol within a symbol) so that you can link both the elements within a symbol as well as its placement within a bar, for instance.

Hope that helps,

-Elaine

[3nd Grafica]

Hi Elaine,

thanks for your kind answer. That seems to me too the best practice right now for XD and the symbol panel. Waiting for more update to come. Thanks!

[studiotarun]

Hi Eliane,

It depends on how detailed your header is. I'm using XD for low-fi wireframes and for me 1 symbol is enough. However when I go for detailed wireframing I may use multiple symbols for 1 header. Thanks!

[3nd Grafica]

I understand, your issues since it will happen every time, the develop starts from a wireframe to a realistic interface. I believe XD should take something from PS & AI with the upgrade of the live prototyping which is it's main core. Coming from PS i miss a lot the use of linked smart objects, which seems similar to the symbol panel. We'll see where this will head...it's still in beta though. Right now I'm always in the middle of choosing PS and then Invision App or just XD even if with some limitations...