Skip to main content
Solved

Adding Smart Animated Bar Graph to webpage Frame?

Andrew_Gray

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,
Andy

Best answer by tank666

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.

Figma Help Center
View original
This topic has been closed for comments

5 replies

Andrew_Gray

Anyone, anyone, Bueller!, anyone?

tank666
  • tank666
  • 4862 replies
  • Answer
  • August 31, 2022

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.

Figma Help Center
UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
Andrew_Gray
1 person likes this
  • Andrew_Gray
    Andrew_Gray
Andrew_Gray

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.

tank666
  • tank666
  • 4862 replies
  • August 31, 2022

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.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
Peter_Winston

Hello Andrew,

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

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings