Master the art of animating real products with Figma

Table of Contents

1. Introduction
2. Cutting the Armchair from the background
3. Creating a shadow under the legs
4. Adding light cones
5. Creating a nice shadow under the chair
6. Resizing the armchair and adding buttons
7. Changing the color of the armchair
8. Handling the legs of the armchair
9. Creating a checkmark for color selection
10. Animating the color change

Animation Course: How to Animate Real World Objects and Change Colors

Welcome to the fourth part of my animation course where we're going to explore a practical technique that allows You to animate real world objects and change their colors. This technique is especially useful for ecommerce store owners who want to Create simple yet visually appealing animations. In this article, we will dive into the process step by step, covering everything from cutting the object from its background to animating the color change. So let's get started!

1. Cutting the Armchair from the Background

The first step in our animation process is to cut the armchair from its background. Although there are AI Tools available for this task, we will do it the old fashioned way by tracing the armchair using a pen tool. Once the armchair is traced, we can remove the stroke, add a fill, place it under the image, and then mask it. This will give us a clean and isolated armchair to work with.

2. Creating a Shadow Under the Legs

To make the armchair look more natural and realistic, we need to create a shadow under the legs. We'll start by creating a couple of ellipses and adding a layer blur to them. The shadow will be placed under each leg, with larger and blurrier ellipses on one side to account for the direction of the light. Additionally, we'll create light cones on top of the armchair to enhance the lighting effect.

3. Adding Light Cones

Using the pen tool, we'll create light cones that are clearly visible over the armchair. We'll remove the stroke and use a linear gradient for the fill, starting from one side and vanishing towards the other. The light cones will be placed under the armchair, and a layer blur will be applied to soften their edges. By duplicating the light cones and placing them under the legs as well, we can further enhance the lighting effect.

4. Creating a Nice Shadow Under the Chair

To complete the illusion of the armchair casting a shadow, we need to create a nice shadow under the chair itself. This can be achieved by shrinking some of the ellipses representing the shadow, adjusting their position, and decreasing the opacity of the main shadow ellipse. By carefully manipulating these elements, we can create a realistic shadow that adds depth to the animation.

5. Resizing the Armchair and Adding Buttons

Now that we have the armchair ready, we can resize it and add some buttons to create a more interactive animation. The buttons can be designed in different colors, such as Blue, orange, and green, and placed within the armchair's frame. To prevent the legs from being recolored, we'll create a separate group for the armchair legs and lock the recoloring elements within the armchair frame.

6. Changing the Color of the Armchair

To change the color of the armchair, we'll duplicate the armchair frame and Apply different color overlays to the buttons. By changing the blending mode of the buttons to "color," we can achieve the desired color effect on the armchair. Selecting a specific button will trigger the expansion and contraction of the color overlay, creating a visually appealing color change.

7. Handling the Legs of the Armchair

Since we don't want the legs of the armchair to be recolored along with the rest of the frame, we'll create a separate group for the legs. This will allow us to remove the color overlays from the legs and lock them within the armchair frame. By flattening the Shape and using it as a mask, we can ensure that the legs remain unaffected during the color change animation.

8. Creating a Checkmark for Color Selection

To indicate which color has been selected, we'll add a checkmark symbol in the center of each button. By adjusting the opacity of the checkmark, we can Show the selected color while hiding it for the unselected colors. This simple addition enhances the user experience and helps in visually confirming the chosen color.

9. Animating the Color Change

Now that all the elements are in place, it's time to animate the color change. Using prototyping tools, we'll create interactions that trigger the color change when a specific button is clicked. Smart animation and transition effects can be applied to smoothly transition from one color to another. Testing the animation ensures that it appears seamless and visually appealing to the user.

Conclusion

With the completion of this tutorial, you now have the knowledge to animate real world objects and change their colors. Feel free to explore and experiment with this technique to create your own unique animations. Whether you're designing an ecommerce store, a mobile app, or any other digital product, adding animated color changes can greatly enhance the user experience and make your designs come to life. Have fun animating!

Highlights

• Learn how to animate real world objects and change their colors.
• Create visually appealing and interactive animations.
• Master techniques for cutting objects from their backgrounds.
• Enhance realism with light cones and shadows.
• Customize the color change process with buttons and checkmarks.
• Utilize prototyping tools for seamless animation transitions.
• Boost user engagement and satisfaction.
• Apply animation principles to different design projects.
• Experiment with different color schemes and effects.
• Enjoy the process and let your creativity shine.

FAQ

Q: Can I apply this animation technique to other objects besides armchairs? A: Absolutely! The principles and techniques discussed in this article can be applied to animate any real world object and change its colors.

Q: Do I need any prior experience in animation to follow this tutorial? A: While some basic familiarity with animation software is helpful, this tutorial provides step-by-step instructions that are suitable for beginners.

Q: Are there any limitations to this color change animation? A: The only limitation is your creativity! Feel free to experiment and adapt the techniques to suit your specific project requirements.

Q: Can I use this technique for web design? A: Yes, definitely! Animated color changes can add visual interest and interactivity to websites, creating engaging user experiences.

Q: Is it possible to create more complex animations using this technique? A: Absolutely! Once you understand the fundamentals, you can build upon them and create more intricate animations with additional elements and effects.