Getting Started with Your Animated Button

If you're a designer who frequently visits my YouTube channel, you've likely encountered a video tutorial about creating a creative animation for an "Add to Cart" button in Figma. As requested by multiple viewers, I'll be showing you how to design this button and implement the animation using Framer. With this knowledge, you'll be able to add this button to your website. If you find this tutorial helpful, please like the video and subscribe to my channel.

Constructing Your Animated Button

To begin, prepare two icons using the hero component in Framer. Also, prepare a text layer for your button. You can get these icons from the hero component too. Next, create a frame using the F key and create a rectangle - dimensions 80 by 240. Make sure to duplicate this rectangle and nest one inside the other, removing the fill from the top frame. Appropriately naming your frames will keep you organized; consider labeling the outer frame 'button' and the inner frame 'fill'. Feel free to play around with color, maybe go for a gradient green!

Morphing Your Button into a Component

After you've set your fill and button up, start assembling your assets inside the fill. The next step is to convert your button into a component. Once done, tidy up your layers. You should ideally separate the layers representing the success check and the 'Add to cart' action. To do this, rename them 'check' and 'card' respectively. You'd want the card icon to sit to the left of the text layer. Keep in mind that this tutorial does not use Stacks due to the need for manual arrangement of assets. Place the check icon on top, and align the 'Add to Cart' text and the card icon in the center of your button.

Adding Shadows and Opacity

To make your button visually striking, add shadows and opacity. Begin by making the overflow visible and selecting 'fill'. Add green shadows for a cohesive look with the fill color. Use the blur feature to add depth and lower the position of the shadows slightly. Remember to adjust the opacity of your check and your card assets appropriately for visual clarity. Create another variant and adjust the fill layer to be the same size as your button's height. This will form a perfect round shape.

Perfecting Your Button Animation

Next, move the text to the side and lower its opacity. Perform similar steps for the card icon and place the check icon in the center of the circle. Be sure to adjust the opacity of the check icon to maximum, so it's visible. The relationship between the first and second variant is established through an interaction. Here, 'OnTap' is used after a delay of zero. For the transition, use a stiffness of 400 and a damping of around 40. Add a second interaction which takes you back from the second variant to the first. Here, 'Mouse leave' is used and a delay of 1 second is implemented.

Reviewing Your Animated Button

Once your interactions are all set, preview your button to make sure everything looks good. Look out for smooth animations and transitions. If there is room for improvement, do not hesitate to adjust the stiffness and damping until you achieve the desired flow. Once in play mode, click on your animated button to ensure it functions well. Congratulations on creating your own animated "Add to Cart" button!

Don't forget to check the Framer Remix link in the tutorial description for more inspiration. For those interested in the original Figma file from the previous video, you can also find the link in the tutorial description. If you have any topics or questions you want to be addressed, feel free to leave them in the comments section below. Looking forward to creating more of these Framer Tutorials!