Can you Insert animations into figma? | Friends of Figma | Page 1

lean bison Dec 7, 2023, 9:45 PM

#

I am pretty new to figma so i'm sorry if the answer seems obvious i jsut haven't seen a clear answer.

i wanted to animate a barchart in an advanced way but figmas animations capibility seems to be limited. so i wanted to animate the animation someway else and insert it into figma but i dont know how. is it even possible? and if yes how? alsothe animation is just the barchart going from 0 to 100 with some effects and then its supposed to stay there

hard turtle Dec 7, 2023, 9:49 PM

#

Hey @lean bison !on pro or edu plans you can insert videos and view them in prototype mode. However it also sounds like your animation could be done in figma also imo but i would need to understand a bit more about it i guess

#

I guess im not sure what effects you need so i cant really know

#

But going from 0 to a 100 and staying there should be possible

lean bison Dec 7, 2023, 9:50 PM

#

hard turtle I guess im not sure what effects you need so i cant really know

well it should go from left to rigth until its at a specific amount, then it should stop and pop out a speech bubble where the amount of money is represented

#

also thank you so much for helping me

hard turtle Dec 7, 2023, 9:56 PM

#

lean bison well it should go from left to rigth until its at a specific amount, then it sho...

I mean you should be able to do that using figma

#

Look into smart animation and component variants

lean bison Dec 7, 2023, 10:00 PM

#

oh really? i spent hours trying to do that rhough smart animations but it doesnt give me the left to rigth/ pop out animation. i can only do something like fade in or come from the rigth side of the screen. if it wouldnt take much effort from you, could you tell me how the settings need to be?

hard turtle Dec 7, 2023, 10:03 PM

#

The idea with smart animation is if you have eg a rectangle at x, y spot with width and a height , and other properties and is named rectangle-1. And then on another frame you have the same rectangle copied, and you change it slightly like you change the width of it. Then you have a smart animation connection between the two, then figma recognizes that the two rectangles on these two frames are the same (because both are named rectangle-1)

#

Then figma starts to think about what the difference between the two are

#

Are the colors the same? Is the position the same? Is the size the same? Etc

#

Then it realizes that oh the width changed, and then it smart animated to make the rectangle go drom the first width to the next one

#

When you do smart animate, fading is not needed

lean bison Dec 7, 2023, 10:05 PM

#

Oh thank you so much i'ma try that now

hard turtle Dec 7, 2023, 10:06 PM

#

You also just need to make sure that whatever u want to animate from one screen to another, it needs to be on both

lean bison Dec 7, 2023, 10:07 PM

#

yeah i see

#

btw

hard turtle Dec 7, 2023, 10:07 PM

#

Otherwise one has the element the other one doesnt so figma just thinks its a new thing added and has no way to know how to being it in

lean bison Dec 7, 2023, 10:07 PM

#

how do you remove the purple thing?

hard turtle Dec 7, 2023, 10:07 PM

#

What purple thing

lean bison Dec 7, 2023, 10:07 PM

#

i cant change the size of the rectangle

#

and there is this purple outline on it

hard turtle Dec 7, 2023, 10:08 PM

#

Oh so that is because it is a component maybe

lean bison Dec 7, 2023, 10:08 PM

#

ah

#

so how do i remove the component?

#

nvm i found it

#

still not working my friend it just doesnt recognise the rectangle. also i am not able to select after delay. idk why its just greyed out

hard turtle Dec 7, 2023, 10:28 PM

#

So after delay is only available in the main frame

#

thats why you might want to do component variants as i mentioned

#

https://www.figma.com/file/KCMRZL04jwReI3M39KAaxe/Untitled?type=design&node-id=0%3A1&mode=design&t=u7O6WcSdxhAYGkcb-1

Figma

Untitled

Created with Figma

#

After delay is not possible from inner frames like here:

#

Because what happens after delay changes the whole thing including the parent, and not just the inner one.

#

because of that, you probably want to use component variants like over here

#

the interaction is between the part that is actually changing without the parent having to change

#

And then you put an instance of that into the main frame

#

the reason whhy figma might not recognize it could be if the two of them dont have the same name, but that is just a possibility

lean bison Dec 7, 2023, 10:45 PM

#

bro i cant apprechiate you enough i'ma try that once i'm free

scarlet shadow Dec 9, 2023, 3:20 PM

#

@hard turtle thank you so much it worked i just i have 1 problem now. i am able to change it from left to rigth by clicking. but i cant do it with after delay. do you have any fix for that?

hard turtle Dec 9, 2023, 4:14 PM

#

scarlet shadow <@693155402136682507> thank you so much it worked i just i have 1 problem now. i...

Ad mentioned, you need to use component variants as i do in the example

scarlet shadow Dec 9, 2023, 4:25 PM

#

thank you so much bro. also why cant i preview my whole project? i am only able to preview my flows

hard turtle Dec 9, 2023, 4:47 PM

#

scarlet shadow thank you so much bro. also why cant i preview my whole project? i am only able ...

What do you mean by whole project?

scarlet shadow Dec 9, 2023, 4:48 PM

#

like the desktop application

hard turtle Dec 9, 2023, 4:48 PM

#

you probably wanna add a flow on it?

scarlet shadow Dec 9, 2023, 4:48 PM

#

like rn i am stuck previewing the chart

scarlet shadow Dec 9, 2023, 4:48 PM

#

hard turtle you probably wanna add a flow on it?

ah

#

how do you do that?

hard turtle Dec 9, 2023, 4:54 PM

#

click on the desktop thing, select the prototype tab on the right

#

and then add a flow

scarlet shadow Dec 9, 2023, 5:06 PM

#

i previewed it with mac book air but now its just a black screen?

#

i am so confused rn

hard turtle Dec 9, 2023, 5:14 PM

#

scarlet shadow i previewed it with mac book air but now its just a black screen?

could you send a link to your file with editing access?

scarlet shadow Dec 9, 2023, 5:16 PM

#

wait cant anyone just edit it now?

#

i'ma just delete it after we're done

hard turtle Dec 9, 2023, 5:16 PM

#

it doestn have editing access

#

i jsut requested it

scarlet shadow Dec 9, 2023, 5:17 PM

#

okay sorry i gace it to you

#

gave*

hard turtle Dec 9, 2023, 5:17 PM

#

So your whole desktop is a sections

#

sections are used for organizing

#

not for prototyping

#

I would also not use any rectangles and vector shapes

scarlet shadow Dec 9, 2023, 5:18 PM

#

oh?

#

ok what now?

hard turtle Dec 9, 2023, 5:19 PM

#

You wanna have the page setup in a frame

#

and stuff in frames

scarlet shadow Dec 9, 2023, 5:19 PM

#

aha

#

how do i set it up into a frame?

hard turtle Dec 9, 2023, 5:19 PM

#

You need to make a frame and move things over into a frame

scarlet shadow Dec 9, 2023, 5:22 PM

#

okay

#

why is everything white now?

hard turtle Dec 9, 2023, 5:23 PM

#

becasue your frame's background is white

scarlet shadow Dec 9, 2023, 5:26 PM

#

NICE THANK YOU SO MUCH

scarlet shadow Dec 9, 2023, 6:31 PM

#

bro i am so sorry for bothering you so much but could you help me 1 more time? now that the desktop is gone and the the main fraim joined, the animation is not working anymore. infact after day is completly gone again but i implemented everything you said. could you just fix real quick or atleast tell me my problem? if not i completly understand that

hard turtle Dec 9, 2023, 6:42 PM

#

scarlet shadow bro i am so sorry for bothering you so much but could you help me 1 more time? n...

could you share the link again

#

oh actually i think i have it

#

@scarlet shadow which one is the one that needs the animation?

#

i dont see any that is a component variant

#

and as mentioned you need a component variant to make that work

scarlet shadow Dec 9, 2023, 6:45 PM

#

i tried a coponent but then i couldn't change the chart

hard turtle Dec 9, 2023, 6:46 PM

#

yeah im not talking about just a component

#

im talking about component variants

scarlet shadow Dec 9, 2023, 6:46 PM

#

hard turtle im talking about component variants

component variants?

scarlet shadow Dec 9, 2023, 6:46 PM

#

hard turtle <@662577745099751444> which one is the one that needs the animation?

the one on the frame

#

it should expand its rect angle and after that the speech bubbles should appear

hard turtle Dec 9, 2023, 6:48 PM

#

scarlet shadow component variants?

yes

#

like the one i made in the example

#

you can see that there are two variants in a purple box

scarlet shadow Dec 9, 2023, 6:48 PM

#

how do you do that?

hard turtle Dec 9, 2023, 6:48 PM

#

basically its one component that has 2 versions

#

and the interaction goes between those two versions

scarlet shadow Dec 9, 2023, 6:48 PM

#

ah

hard turtle Dec 9, 2023, 6:49 PM

#

https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants

Figma Learn - Help Center

Create and use variants

Before you start
Who can use this feature

Variants are supported on any team or plan. Publishing component sets to a library is only supported Professional and Education teams, or Figma Organizat...

scarlet shadow Dec 9, 2023, 6:49 PM

#

ok thx

#

done but still not working?

#

when i preview it it jus tstays the same

#

also when i take it out the frame it just removes after delay

hard turtle Dec 9, 2023, 7:20 PM

#

i dont think u need that connection there

#

all animation interaction should come from the variant

#

i just pasted the variant in here without any additional interaction

#

and u can see it works

scarlet shadow Dec 9, 2023, 7:34 PM

#

WOW IT WORKED VOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO

#

THANK YOU SO MUCH

#

bro once i got some money i will buy you some uber eats

#

but now i got 70 cents on my bank account so yeah

hard turtle Dec 9, 2023, 7:39 PM

#

i would also suggest you to use component variants for all these hover states

#

that way you dont need to keep making them and it would all be setup in one spot

scarlet shadow Dec 9, 2023, 9:14 PM

#

got it will do my friend

scarlet shadow Dec 10, 2023, 8:19 PM

#

hey bro if you dont mind could you tell me how to set the after delay to only pop up when the screen htis the chart? i wasnt able to find out how the whole day. i dont want to bother you anymore once this is over, i just have to complete this project very soon

hard turtle Dec 10, 2023, 8:33 PM

#

scarlet shadow hey bro if you dont mind could you tell me how to set the after delay to only po...

Interactions happening based on scroll and stuff is not possible

#

You can try to make the animation set to start later on and kinda “hack” it by guessibg how long it might take for someone to get there

#

Another option is to hack it in a way that instead of scrolling its dragging between different screens. This way you be able to get it started when needed but it wont be correct setup wise realistically - how an actual website would be

scarlet shadow Dec 10, 2023, 9:02 PM

#

wait so all the hours i have put in this were pretty much useless is that what ur saying. like i cant even do that on the website wtf was the point on doing allat

hard turtle Dec 11, 2023, 12:46 AM

#

scarlet shadow wait so all the hours i have put in this were pretty much useless is that what u...

Figma is more just for prototyping, so i personally just like to use it for layout and to get ideas through

#

So for example for this one i might would make it so it would start when clicking on it, and i would leave a note for myself or the developer or whoever to make it start when it is in view instead

#Can you Insert animations into figma?