Cara Animasi Vector Simple pada Vector Illustration di Figma

Summary

This tutorial demonstrates how to create animated vector illustrations using Figma. The video walks through the process of downloading Halloween-themed illustrations, extracting and modifying them within Figma, and grouping elements like the arm and legs. It explains how to adjust rotation, scaling, and positioning of the elements. The tutorial also covers creating components, setting up interactions for animation, and using the Smart Animate feature. Finally, it shows how to design a landing page by adding a gradient and patterns before previewing the animated illustration. The tutorial is perfect for users looking to create dynamic and engaging vector animations in Figma.

Takeaways

• 😀 Download Halloween-themed illustrations from DrawKit, available through a provided link.
• 😀 Extract the downloaded file and select illustration number 6 for use in Figma.
• 😀 Ungroup the illustration, remove unnecessary background elements, and organize the parts into a cleaner structure.
• 😀 Group and label individual parts of the illustration, such as arms, legs, and head, to make editing easier.
• 😀 Rearrange and send specific elements like the arms and legs to the back for proper layering.
• 😀 Separate and group elements like the radio and head, naming them accordingly for better organization.
• 😀 Use the 'Bring to Front' feature for the head and adjust the placement of the radio and other elements.
• 😀 Convert the design into a Figma component, and create variants for animation, such as different rotations and movements.
• 😀 Adjust the size and rotation of different elements like the eyes and other body parts for more dynamic animation.
• 😀 Set interactions and animations using Figma's Smart Animate feature, with smooth transitions and timed delays.
• 😀 Finalize the design by adding a gradient background to the landing page and adjusting opacity settings for visual refinement.

Q & A

What is the first step in creating an animated vector illustration in Figma?

The first step is to download the Halloween-themed illustration from DrawKit. The link for this can be found in the description.

How do you prepare the illustration after downloading it?

After extracting the downloaded files, you'll find 11 illustrations. You need to import the specific illustration you want to use (in this case, number 6) into Figma.

What actions are performed to clean up the illustration before working with it?

You ungroup the illustration, remove the background, and delete unnecessary parts, such as the left section of the illustration.

How do you group and name parts of the illustration?

You group related parts, such as the arms and legs, and give them specific names like 'lengan' for arms and 'kaki' for legs.

What do you do to organize the layers in Figma?

You send the grouped arm and leg layers to the back and bring other important parts, like the head, to the front to ensure the proper layering order.

How do you deal with the radio element in the illustration?

You separate and group the radio parts, deleting the remaining unnecessary parts. Afterward, you can label them accordingly.

What is the process to convert the grouped illustration into a component?

After organizing the parts, you select everything and create a component. You can rename this component to 'vector illustration' and convert it into a variant.

How do you animate the vector illustration in Figma?

You adjust the rotation of different parts (head, eyes, etc.) and set them for interaction. Using 'Smart Animate' allows smooth transitions between different states.

How do you set up interactions in Figma for the animation?

In the prototype mode, you set the interactions to 'on click' or 'after delay' with a 1-second delay and apply the 'Smart Animate' effect for smooth transitions.

How do you enhance the landing page design where the animation is placed?

You add a gradient effect to the landing page's background, adjust the opacity of the pattern, and position the illustration to fit properly on the page.