0

I'm designing a website with a dropdown navigation. I'd like to export this to InVision to make it interactive. Therefore I need all elements separatly.

Right now I have the dropdown as a layer-group, that I toggle to invisible. I set the export option for this layer and for the whole artboard. However, when exporting the dropdown is just an empty file. When the layer is visible I don't have the navigation without the dropdown.

What's the best practice to design dropdown navigation or generally hover elements? Is there a way to export both in Sketch?

Thank you.

  • Hi Lena, why are you using InDesign to make the navigation bar? It is best to design the drop down using code (HTML,CSS and maybe JS or JQUERY if need-be). – AndrewH May 1 '15 at 16:17
  • I'm sorry, I meant inVision. It's a tool to present a design interactively to a client. But it needs all elements as separate png-files. – Lena May 1 '15 at 16:22
  • How are you exporting the artboards? I have not used InVision before, do you just upload different images to create the mockup? If that is the case, can you just toggle visibility and export as a jpg for each state of the navigation? – AndrewH May 1 '15 at 17:00
  • Thanks for your help! Yes, you upload images of all elements and then link them together. I could toggle visibility for the dropdown, but then the artboard is exported with the dropdown also. I would love to export the artboard without the open dropdown and the open dropwdown in a separate file with one click. – Lena May 1 '15 at 17:19
0

The easiest way to export multiple states of an image would be to use slices. You would duplicate the main structure of the navigation and then edit parts of the image to represent what state the nav is in and then export all of the slices.

  • Thank you, that really helped. I also had to change the layer hierarchy. Nesting the dropdown inside the navigation layer did not work for some reason even with slices. – Lena May 2 '15 at 9:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.