Copy link to clipboard
Copied
Hi.
In the included example I have a horizontal navigation below the header.
How to make it scrollable? When I create a prototype it is not scrollable from left to right!
Thank you
With Adobe XD 30.0, you can easily prototype Horizontal, Vertical, and Multi-dimensional scrolls. For more information, see https://helpx.adobe.com/xd/help/create-scroll-groups.html
Copy link to clipboard
Copied
Hi Nikola,
Thanks for using Adobe XD and sharing your feedback about this feature. I would request you to check this feature request: -https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/13616781-carousel-... and upvote this discussion and share your comments as well.
Please update this discussion in case you need further assistance.
Thanks,
Atul_Saini
Copy link to clipboard
Copied
In the time that the feature makes it to Adobe XD, see the workaround solution in this forum post Make it share it : Horizontal Scrolling in Adobe XD
Copy link to clipboard
Copied
I was able to achieve this result by using 2 artboards, the drag trigger, and auto-animate in Adobe Xd v28.
See the demo: https://xd.adobe.com/view/43adb5d0-5103-45cf-643f-98f1b1dbb412-359c/?fullscreen
Setup
The key uses a feature of Adobe Xd drag triggers called "auto-animate". It works a bit like keyframe animation where you have the starting position of the menu on artboard 1, and a duplicate of the menu dragged all the way to the left on artboard 2.
1. Make an artboard with a group of menu links as separate text objects in a line. Make so many menu links that they overflow the right side of the artboard.
2. Duplicate the artboard, and move the group of menu links left, until the last one appears in the middle of the screen.
3. In prototype view, select the menu group on artboard 1 and drag a new transtion to artboard 2. Set the trigger to drag, and the action type to "auto-animate"
4. Preview. You should now have a menu bar along the top for tabbed navigation on mobile.
Additionally, I found you can add a unique link and transition to each of your menu items:
5. Create a new empty artboard for your first page of content. Leave it empty of give it a "1" so you can recognize it when you preview.
5. Doubleclick your menu to access the group of text links it contains. Add a tap trigger from the first menu text to this new page it will link to.
6. Change the action type to transition and animation to slide left
8. Preview: clicking your first menu item should display your empty 1 page.
Limitations:
1. The overall width of the menu is important. Extra wide menus may not allow the user to select the middle items as it scrolls by too fast. POssible workaround is to create interim artboards to stop in the middle, but I haven't explored this.
2. For sublinks, after you add them to artboard 1 they will need to be added to artboard 2 as well. A bit of duplication that could perhaps be removed by making the menu a component - not sure.
For more info consult this intro to the drag trigger from Adobe: https://letsxd.com/videos/drag-trigger
Hope this helps!
Rick
Copy link to clipboard
Copied
Hi Rick,
Thanks, for sharing the steps on how to do that, It will surely help other community members.
Regards
Rishabh
Copy link to clipboard
Copied
With Adobe XD 30.0, you can easily prototype Horizontal, Vertical, and Multi-dimensional scrolls. For more information, see https://helpx.adobe.com/xd/help/create-scroll-groups.html
Copy link to clipboard
Copied
Horizontal scroll group issues in Adobe XD
Unfortunately, I'm having trouble with the new horizontal scroll group feature. After grouping some objects as a horizontal scroll group, I click on the page and trigger the preview, nothing happens. It doesn't move, it doesn't roll, nothing.
I expanded the scroll group marker to the edge of the screen, but still, nothing happened.
What could be happening?
Copy link to clipboard
Copied
Apparently, doesn't work with mouse...
Just trackpad and tactil. I hope it's a joke.
Copy link to clipboard
Copied
The limitation will be addressed very soon in a future update. Stay tuned.
Copy link to clipboard
Copied
I was able to view Adobe's step-by-step demonstrating this new feature, and according to Howard Pinsky it is possible to apply this task (vertical, horizontal and both), without any problem and limitation.
I can't understand why Adobe takes so many years to implement one of the most requested features on the Forum.
https://www.youtube.com/watch?v=UV4YKibuCKg&feature=youtu.be
Copy link to clipboard
Copied
It's true how can he maker this with his mouse?
Copy link to clipboard
Copied
In the video, the instructor demonstrates that it can be through the mouse (scroll and drag).
See another example:
https://www.youtube.com/watch?v=7FuL2BosGr0
Copy link to clipboard
Copied
Ok so what's the problem? Just Windows Problem?
Copy link to clipboard
Copied
@Preran Have you an idea when?
Copy link to clipboard
Copied
But now there's a drawback: once you share something like this, or a layout more complicated (this is my case), you can't copy the text that are hidden from the main screen. The Adobe XD inspector doesn't allow reviewers to copy the text from elements that are supposed to be scrollable.
My client just complained about the lack of this feature and I answered I wasn't aware of this. But this little feature would surely help us a lot!