Home > User Experience > How to create a download button micro-interaction? | by Vikalp Kaushik | Jun, 2021

How to create a download button micro-interaction? | by Vikalp Kaushik | Jun, 2021

How to create a download button micro-interaction? | by Vikalp Kaushik | Jun, 2021

Micro-interaction 1

Also provided the Figma file at the end.

One of the significant fun of using technology comes through user engagement. An extraordinary experience means more than just usability, it needs to be engaging, and that’s where micro-interactions can play a major role, by honestly contributing to the look and feel of a product or benefit.

When you click on the download button you have to wait for the response which is coming from the server. So you see a process of downloading taking place through an animation. Here, in this long process micro-interaction helps the user to engage themselves so that they do not get frustrated with the amount of time the downloading takes place.

I have seen a few download button micro-interactions and I got inspired by one of the “Download Button Micro Interaction by Aashish Kumar”.

So, I decided to create one.

First of all, creating the button with a linear gradient. The color used is #60D77A and #05A127. A text with typeface Montserrat and download icon with #F6F6F6 color. A little bit corner radius and drop shadow of primary color with 25% opacity and blur 25.

Create a frame of it.

Create a simple button

Now, duplicate the first frame and remove the icon. Change the position of text “download” upwards and make it transparent. And replace with a new text “downloading”.

Also, reduce the height of the button and change the color to #CFFFDA. And place a new rectangle with the same height, color and corner radius at the start with 20px width.

Create a frame of it.

Transform button into a progress bar

Now, duplicate the second frame and increase the width of the new rectangle. Starting with 20px to 100px, 250px up to width of button (which transform into progress bar).

Also placing the small circles of color #64DE80. And changes the position and opacity with every frame. So, it should look better.

Create a frame of it

Increase the width

In the prototype, the first frame has a “one-click” interaction which navigates to frame 2 and all other frames have an “after delay” interaction with “1ms”.

Also, every frame has a “smart animate” animation with “400ms”.

Smart animate

In the final step, change the position of “downloading” text upwards and then transparent and replace it with the “downloaded” text. With check icon or made up of rectangles. I used 2 rectangles for making a check icon.

Download button micro-interaction

If you have confused or stuck at some part, I have also provided the Figma file of this download button micro-interaction. Which you can easily download from here.

Stay tuned for more micro-interactions.

Source link