Adding Smart Animated Bar Graph to webpage Frame?

All Hello All!

I am relatively new to Figma and I really need some help with how to add a smart animated bar graph sequence to a webpage mock-up Frame?

Here is a link to the animated bar graph that I want to include on the webpage…

Figma animated bar graph

Even though I have managed (of sorts) to get the bar graph fill animating as a standalone asset, I would like to add this to my webpage mock-up, but when I drop this Smart Animated sequence onto the webpage mock up all of the Prototype Interactions stop working and I can not work out why.

If anyone could get back to me, and explain what I am doing wrong I would be very much obliged.

Best Wishes,

Anyone, anyone, Bueller!, anyone?

I have edited your component and now you can place an instance of it on your page. It’s called the interactive component. Check out the Help Center article and any YouTube videos on interactive components.

1 Like

Many thanks Yury, still not sure I understand what you did. I will check out the Tutorials and try and rebuild the bargraph gauge so that I can fully understand how Interactive Components work. Many thanks once again for your help, much appreciated.

You used “Navigate to” actions to interact between different frames, and I added “Change to” actions to interact between variants of the same component.

Click on the Prototype tab in the right panel to see the connections.

Hello Andrew,

wrong thread, but I was wondering if you learned anything on your post about figma → QML