Video

Thank you for the feedback! However no all people are Pro like you😉 so they need to watch all the process …

Hi!👋 Currently this is the only live channel.

Thank you!

Hey! Sure, see delay transition feature to auto slide the variants, then add next/previous button interaction that will link to a particular slide by a click. This will create an effect of moving between slides. To stop slider you need to duplicate each slide variant and remove delay transition feature, so that when you click to stop it will link to the “static” slide. To play again, link the button to the “active” slide variant.

@@Sergei-Chyrkov Ur the best ! I

thanks!😇

Good question! Depending on the project. If it is a small one page, that styles are enough. But I prefer to use variables as a system in corporate website with more than 3 pages, it really saves me lots of time.

Glad you enjoyed it!🫶

You should make a conditional to show disable state of the component when a variable equals to 1.

@@Sergei-Chyrkov I've already implemented a counter for each product catalog, but when I change one counter, all counters change as well. How do I fix this?

@@Sergei-Chyrkov I am creating a product catalog. When the cart is clicked, it changes to a counter, and every product that is clicked shows the same counter number

Hi!👋 Actually you can apply it to any Ecommerce module like Shopify inside of the framer. But keep in mind that Framer doesn't have native Ecommerce functionality under the hood yet. You can also use this button with different icons for some other functionality besides Ecommerce. Here it's just an idea 😉

@@Sergei-ChyrkovI see. But do you have any real life examples? Which shop is that?

This tutorial is about making the button animation in Framer. It is not actually a shop. But as I said earlier, you can apply it to any website on Framer and add Ecommerce module and third-party service.

@@Sergei-Chyrkov ok. Thank you for an answer ☺️ спасибо ☺️

you are welcome!☺️

hi!👋 you can create a file with sort of like a design system. Apply variables there to all elements, e.g. make spacing with rectangles. Then you can copy and paste these elements to your new design file and variables should also be transferred to a new file automatically. Let me know if that works!

Sure, duration needs to be adjusted in the code override of the component. You can adjust the duration of the effect by changing the default value of the `duration` prop in the `ConfettiComponent.defaultProps` section. Specifically, you need to set `duration: 2`. By setting `duration: 2` in the `defaultProps`, you ensure that the effect lasts for 2 seconds.

Thanks for feedback!☺️ I recommend doing on the separate “Thank you” page as show in the video.

You’re welcome 😊

Thank you so much for this lovely feedback!☺️ I’m glad you like!

Please check your layers and smart animation settings

Ah, just saw another comment about adding another variable and using the new one for each counter. THANK YOU!!!!!

Thanks for the feedback! It is correct. This happens because both counters are using the same variables. Try to make different variables for each counter.

@@Sergei-Chyrkov Thanks! I have 2 counters. Top one starts at 2 and bottom one starts at 0. They can both be adjusted either way. I added a reset button but I cant figure out what interaction will reset the counters to their respective numbers, 2 and 0.

hi! try to use variables as a starting point and set the conditional to equal these variables so that number will not go lower than the number.

Thank you for your feedback!😊

Glad you like it!☺️

You are welcome, my friend!😉

Thank you for feedback! I’m glad it helped!

Thanks for feedback! Sure, you need to make a separate “disabled” variant of the component and than add a conditional in prototype to activate “disabled” variant when it hits 1. I hope this helps!😌

That’s correct because you use the same component and variables. Try to use different variables for each component.

Thank you! 😊

Thank you so much for your feedback! I’m glad you like it.

totally agree with you!🤝

😅 thank you!!

Glad it was helpful!

thanks for feedback! I think on a free plan you can only use one mode.

Hey! Correct, you need to make different variables for each case, because Figma sees it like one same component.

You can try to use plugin To HTML, or copy css properties and code manually

Glad you like it!

Glad you like it! ☺️

Thanks ☺️

Thank you too!

Are you still using free version!?😱😱

Modes and Variables are available in paid plans

Glad you enjoyed it!

Thanks! I worked for many years with Webflow and wordpress for complex websites. But last year I switched from webflow to framer completely because it much easier and faster to work with. It is much more intuitive for me as a designer. The time for building a website on framer is super fast.

@@Sergei-Chyrkov thanks.

You are welcome! Good luck!

Yes, try “absolute position” of the element inside the auto layout

I’m happy you like it!

Hey! I guess this happens because you are using Figma in your browser. Try to do it in Figma App, it should work.

Hi! Are you using auto layout? Try to set background rectangle to absolute positioning. Or try to build the button from a regular frame with text.

Thanks for feedback and idea!