Make a micro interactions with variant interactive components Figma
First Impression
About several weeks ago I have been trying and exploring the new feature of Figma called “Interactive Components” to my Final Project. First time i see and watching a demo about this feature is really really good because its shorten the time when im designing especially for making Micro Interaction, beside that this new feature is offers a possibilities to doing an many interaction in my design.
Having this feature is good but..
Im a bit surpriced because this feature is Beta and some of my friend cannot use this feature for a while until this feature released. Another problem what i found is when im giving my prototye to my friend and inside that prototype is using interactive components Beta, that prototype is cannot running well, but several weeks later that problem is fixed and one by one my friends started getting invitations and try a interactive component to, im so happy to hear that. If this feature is released i have no reason to fear that my prototype will not perform well again.
In this post I show some of the explorations that I have been doing lately, mostly to make micro interactions with Tokopedia Mascot and other object.
My Explorations
- Slider Animation: First of all I started explore with a simple slider from left to the right or otherwise, does not stop there i try to make a teks that can move up and down following the togle. The way of prototyping is similar if we are designing a Micro Interaction like this but using the frame not combine a variant, maybe its a look simple but this simple different is having a big impact when designing .
2. Drop Down: this micro-interactions is common if the design needs an option more than 2 or more, im commonly use this to on my project.
3. Upload and Delete Button: In this step is very interesting because im going to use 3 different object to make 1 variant and make it looks good.
4. Upload Button Until Finish: This process is more complicated for me in the beginning, but after that im trying to figure it out one by one, and finnaly im make an Upload Process looks very good to me, but I’m still wondering to make more possibilities in the future with this Interactive Component.
5. Information: This time I played with the information looks to make it more attractive to user.
6. Loader: Now playing with loader before move to another screen, im combine 2 variant and trying to add a logo to the loading screen, and the result is awesome.
7. Banner Animation: This is my exploration that combines many object interactions to become animation still using Interactive Components. But i think this is still need more improvement and still far from good.
Im always try to remind myself that a feature is just a feature, what can make a difference is ourselves, whether we want to continue learning and adapt or not.
Finally, let me say thanks! for reading my first article, if there are any mistakes im sorry.
