Published in · 14 min read · Jan 16, 2023
--
Depending on your target audience and what your employer expects of you as a designer, adding animations to the UI (user interface) of an app or a website could give it a more professional feel.
Nevertheless, it’s crucial to make sure animations are smooth and lightweight since too many or heavy animations can frustrate users and slow them down.
To achieve the desired user experience, I will elaborate more on how the user interface of an app or website, as the case may be, can be enhanced with the help of smooth and lightweight animation in this article.
Jump ahead:
The use of motion to improve the user experience and guide users through the interface is referred to as animation in user interface (UI) design. It may be used to give feedback on user activities like button pushes or screen swipes or to direct the user’s focus to certain screen objects.
In order to develop a user-friendly interface, it is highly advised to incorporate animations into your designs. In reality, users would prefer a stress-free experience when dealing with an app or website.
There are many examples of animations used by various designers to improve the user interface (UI) of an app or a website.
Here are some examples of lightweight animations that can be used for creating a seamless website or application design, just to mention a few, and how to create them using Figma;
Splash screen with lazy loading Effect
A smooth and dynamic user experience can be created by using seamless transitions between pages or screens. This can be accomplished by using straightforward animations like ease-in and ease-out or even by exploring the custom animation feature offered by Figma on the Figma web app. I do this frequently, and surprisingly, it produces excellent results.
The Loading effect is one of the essentials to consider while designing the layout of an application and web. To achieve a splash screen with a lazy loading effect to enhance the user interface (UI) of an app by using the Figma-provided custom animation option, follow these steps:
Create the first Screen
To create the first screen, select frame and it should provide you with different frame options. You can select any frame of your choice, but for the purpose of this tutorial, I will be using the iPhone 14 pro frame.
Choose a fill of your choice.
You can make this change to the frame by highlighting it and selecting the fill option just as shown in the image above.
Make a brand logo
Make an ellipse of ‘100’ by ‘100’ in height and width, just as shown in the image below;
Change its fill to white, so as to make the logo visible
Centre your logo in the ellipse and change its fill to that of the background used in your design. The colour code used to fill the background of the design image below is EDB480.
Create and prototype the loader spinner
To create the loader spinner, take note of the ring measurement in the image below
For an insight on how to go about the creation of the moving rings using the component and variant option check out this video by Product Meow where he explains how to create and prototype responsive spinners on Figma.
After prototyping the rings, go to the Assets option and add the default ring to the centre of the frame. Just like this;
And there you have your spinner created.
Create and design more screens
To create more screens, simply duplicate the first screen into 5 different screens by selecting the screen and clicking ‘Ctrl + D’ on your pc keyboard.
Remove the ring effect from the new screens as we won’t be needing it.
The second screen does not require you to make any major changes after the ring might have been taken off.
To design the third screen;
Create an ellipse and expand the ellipse to completely cover the screen and change its fill to white.
To design the Fourth screen, simply change the background fill to white and add the brand’s name to the centre of the screen.
On the Fifth screen, move the brand name to the top part of the screen.
To illustrate the tutorial, I chose to use a signup page for my Sixth screen, but you have the flexibility to customize yours to fit your needs or preferences.
Prototype the screens
In order to achieve a satisfactory outcome for your prototype, check the gif below to make sure your screen interaction settings are in order.
Button hover effects
The smooth movement users experience on a website or application when they directly interact with the button with their cursor, leads to a wonderful user experience, which is why the button hover effect has gained a widespread reputation.
This effect, in my opinion, may be very effective when added to designs, this is because it will help enhance the interaction of the user with the app or website in question.
I’ll be sharing with you a tutorial for creating a button hover effect in Figma in this section of the article. In this way, you can incorporate it into your designs and add it to your collection of design animations.
Design a static version of your button
You need a static design or page, that includes a button in order to generate a button hover effect in Figma.
The registration page from the sample below serves as an illustration.
Make a new button component
You can now make a button with a different element than the one you made when you prepared the static page. Depending on how you want it, the element that has to be modified may be either the text that appears on the button or the button’s colour.
Duplicate the main button to make the new button, but be careful to keep it out of the frame. Change the element that has to be changed, for instance in my design, I removed the stroke, changed the fill of the text and changed the fill of the button.
Once the element has been modified, right-click and choose “Create Component” and give the new component a new name to differentiate it from the old button.
Prototype the buttons
Follow these 3 easy steps to prototype the buttons and land a button hover effect;
- Select the prototype menu, drag the interaction line from the main button to the hover button and select while hovering in the interaction section.
- When choosing an interaction type, choose Open Overlay.
- Lastly, choose Manual for the overlay option.
Progress bar
A progress bar is a visual feature that displays how well an activity or process is going. It is frequently used to display the progression of activity to give users visual feedback while they wait for content to load.
Progress bars can be crafted in various ways, including horizontally or vertically, and can be given distinct meanings using various colour schemes or design elements. A green progress bar, for instance, might show that the task is finished, while a red progress bar might show a mistake or delay.
In order to enhance the user experience and give consumers visual feedback, progress bars are frequently utilized in UI design. Users may use them to determine how much of a task or process has been finished.
To design a smooth and animated progress bar using Figma follow these few steps;
Create a new frame
A frame needs to be in place for the creation of the progress bar. Yours may be a static design that you have already prepared, depending on how you want it; either way, it is OK.
I’ll be using a blank frame for the tutorial’s purpose.
Create the progress bar
Now make a rectangle by selecting the rectangle option or simply clicking R on your PC keyboard.
For the construction of my rectangle I used;
Width: 313
Height: 25
Radius: 60
Duplicate the rectangle and place the new rectangle on the first one. Go to the fill and change its fill to any colour of your choice, but make sure it is a different one compared to the first one. Or you could change the fill effect to linear and flex with the settings just like I did here;
Duplicate your frame
Simply duplicate your static design or blank frame and now you should have two screens holding progress bars each.
Edit the first progress bar
To edit the first progress bar, reduce the coloured rectangle to a level that seems low enough to describe a ‘10’ on a loading page, but take note that there would only be a change in the rectangle’s width while the height will remain the same;
Width change: 40
Create the number animation
To create the number animation for the progress bar, first, make a rectangle that will take the same height and radius as the previously made rectangles and a width that is slightly less than that of the reduced rectangle on the first frame.
Width: 35
Now, have numbers written in tens vertically till it gets to 100 (e.g 10,20,..…100) and make sure they are aligned in the centre. You can achieve this by using the text align centre option.
Place the numbers aligned vertically with the rectangle and mask them together.
Add the number animation to the progress bar
Drop the masked group on the progress bar of the first design screen. An illustration is what we have below;
The next step is to duplicate the masked group and add it to the progress bar of the second screen just as done on the first screen. But the only difference will be, the change in the number that would be shown, instead of 10 it should be 100.
Prototype the screens
To prototype the screens, follow the simple steps as seen in the image below after selecting the prototype menu, for the interaction setting;
Splash screen effect
A splash screen is a component of the visual user interface that appears when a program first launches.
While the application loads in the background, it often shows a logo or other graphic, a progress indication, or both. The application’s splash screen, which typically appears before the main window, gives the appearance that it is opening swiftly. Some splash screens will also show the user how much of the application has loaded via a progress bar or other indicator. Prior to the main window appearing, the splash screen is often shown for a few seconds, though the exact amount of time depends on the complexity of the application and the processing power of the computer it is running on.
So let’s discuss how to construct a splash screen animation in Figma quickly.
Prepare a design
For the purpose of this guide, I’ll presume you already have a prepared design as this example would be based on one I’ve already created.
Duplicate the screen
Duplicate the screen of your static design into two and delete their contents as we won’t be needing them.
Design the duplicated screens
To design the first frame of the duplicate;
- Copy your logo from the original frame and have it centred on the new frame
- Create a circle that would hold the logo. It should take a width and height of ‘150’ and make sure its fill is similar to the brand colour of the website or application.
- You could also add some blur effect on your circle.
For the design of the second frame that was duplicated;
- Duplicate the circle used in the previous screen
- Move the circle to the second frame and enlarge it until it entirely covers the screen, making sure it is well-centred on the screen
- Add a fill that matches the brand colour
- Rename the circle.
Prototype
For the interaction setting of the frames, between the first and second screens;
- Select the After delay effect for the interaction section and set the timer to ‘400’
- For the interaction type, you can leave at Navigate to
- For the animation setting, set it to Smart animate with Custom animation and set its timer to ‘600’
- For setting the Custom animation you can use this input
or check out the image of the adjusted graph below.
For the interaction setting of the second and third screens;
- Again make a selection of the interaction section to be After delay, but change its time to ‘200’
- Leave the interaction type at Navigate to
- Choose Move in and Ease out for the animation. Select the arrow facing down to specify where the next screen will originate from and change its timer to ‘1200’
Tooltip
When a user moves the mouse pointer over an element in a user interface, a little window will likely pop up, this little pop-up window is known as a tooltip. A tooltip provides brief information about the element in question. They are frequently used in UI design to give consumers extra context for items that might not be immediately clear or to assist users to comprehend the purpose or function of an unfamiliar feature.
Tooltips are frequently incorporated in web design using JavaScript and are initiated by a mouse hover event. They are frequently used to give brief definitions or explanations of words or concepts, as well as to give further details about links or buttons.
I’ll share with you how to make a responsive tooltip using Figma in just a few simple steps.
Create a rectangle
On your prepared design, make a rectangle that would fit its purpose perfectly.
For the purpose of this design, I made a button and created a rectangle that is ‘310’ wide in width, ‘55’ in height and I added a radius of ‘10’.
Make a rectangle component
Create another rectangle holding a polygon downwards just as seen in the illustration below.
Add the information you want to pass along to the new rectangle, select all and group them into a component.
Prototype
Select the prototype menu and draw the interaction line between the rectangles for the interaction settings, go through the image below;
As a developing UI/UX designer interested in incorporating animations into his designs, you should be aware that Figma is not the only tool available for producing smooth and lightweight animations.
Other useful tools include;
Animations may be used in UI designs in a variety of ways, according to designers. Some designers choose to utilize simple animations, directing the user’s focus or giving them feedback. These movements are frequently subtle and basic, like a spinning loading indicator or a button that pulses.
Other designers utilize animations that are bolder and more expressive to create excitement and engagement. Transitions between screens or pages, interactive components like hover effects, or both can be incorporated into these animations just as discussed earlier.
No matter the approach or tools used, it’s crucial for designers to;
- Reflect on the animation’s objective.
- Make sure that it fulfils a certain purpose.
- It’s also essential to test the animation on several platforms to make sure it functions properly on all of them.
- Keep the animation’s length brief and relevant to its purpose.
The user experience of your app or website may be significantly improved by developing smooth and lightweight UI animations. You can make sure that your animations are both visually beautiful and effective by following the guidelines provided in this article.
Remember to keep it simple, test on different devices, and optimize for performance. You can create user interface animations that excite your users with a little skill and attention to detail.
Link up with me on Twitter 😃
