Skip to main content
3nd Grafica
3nd Grafica
Participating Frequently
March 24, 2017
Answered

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

  • March 24, 2017
  • 2 replies
  • 6451 views

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!

This topic has been closed for replies.
Correct answer elainecc

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

2 replies

S
soxfreak22
Participant
March 26, 2017

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
    3nd GraficaAuthor
    Participating Frequently
    March 27, 2017

    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
    elaineccCorrect answer
    Participating Frequently
    April 7, 2017

    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

      Chris W. Griffith
      Community Expert
      Chris W. GriffithCommunity Expert
      Community Expert
      March 24, 2017

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

      3nd Grafica
      3nd GraficaAuthor
      Participating Frequently
      March 24, 2017

      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...

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices