Bar Graph Animation | Adobe XD Tutorial
In this Adobe XD tutorial, I share how to design and animate a bar graph. The UI design and prototype are inspired by the Apple Health app. First, I show you how to design the bar graph, including adding linear gradients, dashed line indicators, adding text, and more. Once the design is complete, we turn each bar into a component, add a new hover state, and use auto-animate to create an animated hover effect as you scroll over the bar graph.
WATCH NEXT
How to create a reflection in Adobe XD: • How to create a reflection in Adobe X...
How to create a glass effect in Adobe XD: • How to create a glass effect in Adobe...
Search bar animation in Adobe XD: • Search bar animation in Adobe XD | Ea...
More Adobe XD tutorials: • Adobe XD
---
LINKS
Want 10% off Field Notes? Use code MONICA10 https://fieldnotesbrand.com
Present your designs and artwork in a professional way, check out the Modern Frame Mockup Bundle: https://monicagalvan.co/mockups
Need help wireframing? Check out the Wireframe Kit: https://monicagalvan.co/wireframes
Try Skillshare free for 1 month: https://www.skillshare.com/r/user/mon...
---
ABOUT ME
Hello! I'm Monica, a designer living in San Francisco, California. This channel is a place where I share all my design and creative side projects. By sharing my process, I hope to help you learn more about design!
---
SOCIAL
Instagram – / themonicagalvan
Pinterest – / themonicagalvan
Website – https://monicagalvan.co/
