Dynamic order button animation in Figma

Here’s how you do it:

Step 1: Start by selecting your frame. Add a subtle radius to give it that button feel. Then, insert a parcel icon and the text ‘Ship Order’ inside the frame.

Step 2: Duplicate the frame. Move the text slightly backward to indicate action. Add a cart image for that shopping vibe.

Step 3: Duplicate it again. This time, place the parcel inside the cart. Apply a dash stroke and fill the background with a dark color.

Step 4: Make another copy. Shift the dash stroke and the cart along with the parcel for a seamless motion effect.

Step 5: Duplicate once more. Add the text ‘Shipped’ with a tick icon. Remove the dash line for a final touch of completion.

Now, here’s the magic: Add a prototype. On the first frame, set up a click trigger with the Smart Animate option. For the subsequent frames, set them to trigger after a slight delay with Smart Animation.

Lastly, consolidate all these steps into one cohesive component.

And voila! Your result is a sleek, interactive order button ready to impress. Happy designing!

View om figma:- https://www.figma.com/file/fnehBNER1BDau2tRmKxs26/burger-app?type=design&node-id=608%3A208&mode=design&t=aBbZfgqtpuI1PdjF-1