Home App Docs Blog Github

Import animations from figma?

Hey there folks :slight_smile:
I was wondering if it’s possible to import animations generated with figma?

thanks in advance

Linda

Hey Linda,

While there’s not currently a way to import an animated file from Figma into Builder, you can still import the other elements on the page and add other content in Builder directly. Our plugin is currently in beta, so I’ll pass that feedback along to the team!

Feel free to check out our guide here

thanks a mil Kara :slight_smile: i think it’s the best thing since sliced bread that we can import figma files and then export to something super cool like vue or react and even next…so cool so hope you will continue the integration work with figma then we can virtually have our cake and eat it too :slight_smile:

2 Likes

hey @creativemac - what kind of animation do you do in Figma? we’re taking a look at what support what entail and realizing there are a few different ways to do animation in Figma, can you elaborate on what kind of animations you create and use?

soooooooooooooo infinately sorry for this terribly long wait :confused: As I have worked a bit more with builder I realize now that it would just be plain silly business to import animations, so much eaiser just to do them in builder, which is why builder is so phenomenal :slight_smile: not much I cannot do in here :slight_smile: on that note though I dragged in a hero template with a button in the middle and I am going for a bottom border on the button, which displays on hover, but I cannot find any good way to just display a bottom border only, can only find ways to give the button a full border all around. is there a way to achieve this? Also, I tried giving the button in the middle a border which appears on hover but that made the background image grow on hover too which I dont want…is there a way to prevent this from happening?

Linda

Hi @creativemac!

Once you create a hover animation on the button via the animate tab you can select edit next to “hover state”. This will open the styles tab and from here you can open the CSS Properties and add something like border-bottom: 1px solid black. Can you share a link to the Builder entry that you’ve added an animation to the button? I’d be happy to take a closer look!

thanks @maddy :slight_smile: unfortunately I deleted it but will try and recreate what I am going for. I have found the tab to create custom animations but I am not quite sure how to use it. I would like to create a scale animation on hover so tried:
transform: scale(2, 0.5);
but it gave me an error and didnt save. do I need to add a selector? if yes where can I find it?

Hi @creativemac!

What error occurred? I tested out adding this animation on my account and it was successful, here is how I added the style in the animate tab.

@maddy hey there Maddy :slight_smile: I just cannot figure out where in the editor I might find the custom css section for custom css and css animations. when I press animation => hover => I have various GUI options but I don’t see a place where I can add css? might you be able to generate a screencast or something that shows how you add custom css?

thanks in advance
Linda