This week Ronan took us for a Figma session to help expand our technical skillset.
We started out the session with a quick introduction into smart animate. Smart animate is a transitional feature when prototyping in figma. It allows users to essentially animate elements within frames. We started by simply animating a moving circle. Here is how that looks.
1FE97F8A-9388-4662-BEE3-65E5E00DFF11.mov
We then added colour to this simple animation to help demonstrate how smart animate really works. As you can see the colour almost blends mid way as to ensure the animation is smooth.
3FEE13BA-6404-49FB-B496-80096A332E72.mov
We took it up a level by creating an interactive carousel. We started by creating components for each of the images. This means when triggered they will switch variant between clear and blurry , whilst also altering their rotation depending on their space in queue. We proceeded to animate it with smart animate, here is how that turned out.
D27E978C-6C56-4CD6-ABF6-A7E646754AB9.mov
We then moved on to a user interface. We added the ability for the shopping cart amount to increase by the price each time it is clicked. We did so using variables again but this time in a different way. As well as this we also prototyped the profile page to auto populate when clicked. You can see this below.
BAB23E1E-7E15-4E17-9ECA-BE7004BD8B40.mov
This was an interesting class, we’ve done a few sessions with Ronan now and I am certainly learning things I would’ve otherwise not known. That being said it can be easy to get lost during these classes but I am happy to be made aware of what is possible in figma. It means going forward I can really level up my prototyping game going forward. Again, I will revisit prototyping some more in my own time just to really cement what was covered today.