Download practice file
With Scroll Groups in Adobe XD, large data tables and charts don’t have to stop at static representations, they can now include rich scrolling interactions to communicate a more complete story. In this tutorial, Designer Advocate Matte Rae will teach you how to integrate scroll groups into your own charts and tables within XD. Follow along with the included starter file and transform a dashboard design into a rich interactive prototype.
Starting with a complex line chart with a scale larger than the available chart space, scroll groups will be applied to horizontally scroll the graph, making the extra data points visible. You’ll also learn how to create vertically scrolling tables with fixed headers by converting a repeat grid into a scrolling group. A horizontal and vertical scroll group can be applied to map areas to create scrolling maps as well, paired with scrollable list views for showing associated location data.
Finally this tutorial will explore more complex chart designs by creating a fixed column scrolling table which is helpful in robust analytics and admin dashboard designs. Using scroll groups, bring a large dataset to life with a horizontally scrolling table that can be interacted with using the scroll of a mouse wheel or panning on a multi-touch track pad. The best part is, all of these interactions are contained within a single artboard and can be stored in reusable components allowing charts and tables to be reuse across many artboards.
Steer away from static table and chart designs by making use of the power of Adobe XD’s Scroll Groups feature nested within tables and charts in a dashboard design. Scroll groups also support component state functionality making it easy to add interactivity like hovers and click actions directly in the scrolling areas of charts and tables. Bring your charts and tables to life in Adobe XD.