Data Visualization - Animate Horizontally Scrollable Table in Figma
Вставка
- Опубліковано 22 вер 2023
- In this Figma tutorial, you'll learn how to create a functional horizontally scrollable table for your UI design projects. Whether you're designing a dashboard, data visualization, or any application that requires a table with horizontal scrolling, this step-by-step guide has got you covered.
Figma: www.figma.com/file/5LGDDoduaN...
This was really useful! I spent an hour looking into other videos/articles that didn’t had an actual solution to the problem. Thank you!
It helped 😅
Hey! Asif, Can you please show how to create "Table Grid" that you're showing in this video? It would really helpful to me.
I really grateful to you for horizontal scrolling. Actually this horizontal scrolling table I searched a bunch of videos but did not get. But Here i really happy.. Thanks a lot! 🙌
Hi, happy to help. Can you please check if the link of the design file answers your question? Feel free to make any comments inside the design file if you need any extra help. Thanks.
www.figma.com/file/5LGDDoduaNSlcAtBE8JnRB/Table-Eaxmple?type=design&node-id=0%3A1&mode=design&t=Cxl3WXDswqXAKBpc-1
Thank you 😇@@DesignwithAsif
NICEEE!!! Thank youuuu........
Asif, How to show the scrollbar line with above scrollable section?
Did you mean how can you show the scrollbar? Okay, so what I do is I design a static scrollbar, most of the time I use absolute positioning to place the scrollbar wherever it is needed or wherever it is placed as per the auto-layout. Now, while hading it over to the dev I show the animated UI with documentation. Does this help? Scrollbar will not come automatically because it is a canvas. Not actual web app. Even while developing you need to define it in the code in order to customise it.
but my table are done row wise, how to create frame out of that?
Select all the rows. Press "opt+cmd+G" to make a frame. Resize the new frame and clip the content. Easy. I hope it helps.
I can't make the first column fixed, how do I do that? The FIXED option is disabled in my figma file
There is a No Scrolling option in the prototype. This file might help: www.figma.com/design/5LGDDoduaNSlcAtBE8JnRB/Table-Eaxmple?node-id=0-1&t=2E5OTY2DNlVLakPT-1
But wouldn't that be hard to navigate with mouse and keyboard?
Think about spreadsheet. Is it hard to do horizontal scroll? In the design you might need a slider button which helps the accessible user to scroll. But according to WCAG 2.0 - "it is sufficient to lay out the content in such a way that horizontal scrolling is required to access content, but that it is not necessary to scroll horizontally in order to read a line of text."
Look for WCAG 2.0 - Technique G206, Success Criterion 1.4.8
Hope it answers your question. 🙂
There are good use cases to adopt this approach. There is no one solution for all.
Can you share the figma file please
Pardon! I missed your comment. If you still need the figma file, here it is: www.figma.com/file/5LGDDoduaNSlcAtBE8JnRB/Table-Eaxmple?type=design&node-id=1%3A9692&mode=design&t=0hP2TCO4me3N4wSF-1