This week, rather than having our usual lecture format, we participated in an interactive Figma tutorial session led by Ronan. The focus of this hands-on class was to enhance our understanding and proficiency in user interface design, while simultaneously developing our practical skills through direct application to our individual project work. This specialised tutorial was specifically structured to help us master the various tools and features within Figma, enabling us to create more sophisticated and polished designs as we progress through our own creative endeavours.
We advanced to creating an interactive carousel. First, we created components for each image. When triggered, these components switch between clear and blurry variants, while adjusting their rotation based on their position in the queue. We then animated the carousel using Smart Animate, and here's the result.
Next, we explored user interface functionality. We implemented a shopping cart feature where the total amount increases by the item's price with each click. This was accomplished using variables in a new way. We also created a profile page prototype that automatically populates with data when selected. You can see the result below.
https://www.figma.com/proto/tgj9M8Y7DIv91sme0pzMZS/music-app?page-id=0%3A1&node-id=49-743&viewport=1168%2C-3704%2C0.47&t=35e8UWc4ssCOhBUZ-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=49%3A743&show-proto-sidebar=1
<aside> đź’ˇ
This was an interesting class—after several sessions with Ronan, I've learned techniques I wouldn't have discovered otherwise. While it's sometimes challenging to keep up during the lessons, I'm grateful to learn what Figma can do. These skills will help me improve my prototyping abilities. I plan to practice more in my own time to reinforce today's concepts.
</aside>