Recently I have been using figma alot more. I've been finding it super hard to create stuff in figma and then start creating them again in Illustrator. Imagine the joy on my face when I found out I could just export straight outta figma. Thank you so much!🤟
thanks man. all other tutorials were very confusing to me. But your tutorial was well explanatory and ive got the job done, as this was the first time im using figma because of a motion design project
Amazing to hear. Glad it was helpful. If there’s anything in your process that you have questions about let me know and maybe it can become a future video’
That was helpful to get me started and show the usefulness of using AEUX in the Figma --> After Effects workflow. It's such a pain to go through and convert everything in Illustrator first before pulling assets into After Effects, so this makes my life a whole lot easier! Now I can save money on not buying Overlord too. Cheers!!
Hey, awesome tool but for some reason I can't get it to work the issue i'm facing is firstly, the plugin when opened on figma shows very broken text instead of what it's supposed to say like "qflkp" instead of "actions" and secondly, when clicking the button that supposed to send things to after effects it doesnt do anything any help here would be greatly appreciated
Check out this Latest video and see if it fixes anything for you Figma To After Effects With AEUX Failed Until I Tried This ua-cam.com/video/c9Oaq7yYLSQ/v-deo.html
Thanks for the video - very handy. From my initial tests, Am I correct in saying you must flatten text before importing it to AE? I used the Figma plugin to send a frame with standard type to AE, but the text broke and ended up stacking on top of each other. Would be good for text to be imported cleanly....
Appreciate it! Not necessarily with the text import. There are sometimes minor alignment issues but for the most part should import correctly. Check out this video for more context 3 Advanced Tips for Figma to After Effects using AEUX ua-cam.com/video/LiV4GqyVPCo/v-deo.html
Great question. If the animation needs to be put back into Figma for some reason then you can do that with a video or gif export and some prototyping linking. Typically the workflow is that you would create a motion spec write up from your animation in after effects. See my video covering that here: Creating Motion Specs for UX Design. ua-cam.com/video/iw5eLAt7yzw/v-deo.html
Ahh I’m seeing that issue on my end as well. Try googling “AEUX after effects GitHub” And you should be able to download it from a repo that way. Not sure if it’s the most up to date but worth a try.
Absolutely. Check out my other video to see one simple way that it’s possible Lottie Interactive Navigation Icons from design to development ua-cam.com/video/fYIsRyEMBmo/v-deo.html
This happens from time to time with odd updates or things getting glitchy. Best fix is to remove and reinstall AEUX for AE using ZXP installer. And / or resetting AEUX AE plug-in preferences via ZXP Installer And always make sure you’re running the latest plug-in on Figma and AEUX.
@@MotionUX I already know what was going on. When exporting figma windows with AEUX, After Effects must be open, otherwise it will tell us that we have a connection error and will not let us export the windows ♥ gracias por tu respuesta
I always have trouble when following this process, Im not sure if its the way the Figma file layers are organized when they send them to me but I am always missing assets (Specifically images), text shifts position and everything its in bad quality. Does anyone have any suggestions? I tried everything and nothing works, feeling a bit frustrated at this point
Yup it's not 100% perfect which is why the reference image feature is helpful. For images not transferring check out my other comment replies for a potential fix
I followed every instruction, yet It won't do anything... I click on 'send selection to AE' and After effects window will pop-up but nothing else... what could I be doing wrong? thanks for the tutorial anyways!
Are you getting any error message? Make sure AEUX is the most up to date on AE and Figma. And that you're running the latest version of AE In the AE plugin make sure you've set a save path for your image assets. Hope that helps!
@@MotionUX I have both the latest versions. I don't get any error, after effects simply pops up, as if it's going to import the figma material, but nothing happens, no error code, nada. It worked before, a few months ago, though it never imported the images or the proper font for the texts. And yes, I made sure I've set a save path. Thanks so much for your reply and help anyways!
thank you for the video, but I am using a certain font in figma, and when I import it into ae all of the fonts get defaulted to times new roman, any fixes?
Yeah that happens for me all the time as well. Not quite sure of a full fix… but it’s an easy manual change to make within AE to update all type layers. Usually will import everything I don’t need live layers as pngs via AEUX
Yeah AEUX isn't perfect all the time. depending on the font used, and layer groupings etc.. some things can shift slightly. Using the "export reference image" in Figma AEUX helps get things back in place.
Beautiful simple explanation. Curious once a stakeholder says awesome! Let’s do this! What’s your process of getting a developer to actually make this real? I mean easing curves alone can be very nuanced. I can’t imagine they just eyeball it?
Will be creating a video hitting on this soon. Easings are actually pretty simple, just provide your dev / eng partner with bezier values that match their platform.
Thank you for the video! It appears that some fonts I export AE defines automaticly, some fonts doesn't. Maybe someone knows how to solve this problem or in what direction to dig?
AEUX can be buggy from time to time. I would just go through all the routine set up steps and troubleshooting. Reinstall. Ensure save path is set in AE for AEUX and try to simplify the grouping in Figma before exporting.
I'm having trouble with the download to even begin... I cant even see "Development" from right click>plugins>(doesnt say development).... Thanks for the video anyways, wish I could just get past this part
When i try to export to AE it says layers must be inside a frame ? Can somebody help with that since I am new to figma and putting a rectangle with my assets and grouping does not work..
This can be for a variety of reasons. - color space in AE is different than figma - monitor color space is different than AE - compression when exporting images could change things slightly I would test this by exporting videos from AE and comparing on multiple screens / devices to get an understanding of how much the color is being effected
@@MotionUX Do you have any insight on how to match the color spaces between AE and figma. I can't find a lot of information on what figma is doing internally. It seems like it uses an sRGB color space. AE has a lot of options about how to set and control color, but I can't get the colors to match between the two programs.
@@willsummers648 Yeah it is most likely due to the color space within AE / Figma. As well when you export the compression will also alter the colors slightly. However in my experience the color differences are negligible for 99% of use cases. Not really a solution but I don't tend to worry about it. Specifically in the UX Motion world the video you produce from AE Is never directly used in an app or website (with the exception of Lottie, which this issue isn't present) With that in mind, the assets you create are usually a reference for a developer / engineer to build on their end in code. At that point its a combo of referencing a motion mock and a static design to ensure all pieces are correct. Hope that helps.
Not able to replicate on my end. I'd try troubleshooting with a new basic figma file and see what you can figure out from there. 🙏 Hope you're able to resolve it!
It sometimes happens. Just weird stuff during the import process. I usually use an anchor point repositioning plugin in after effects and fix all of that as I start animating.
It can totally be finicky sometimes. Make sure the basics are covered, everything is up to date, try reinstalling plugins in Figma and After Effects. If that doesn't cut it, it might be something in the specific figma frame, create a new frame with just a basic shape and see if it imports. If that's successful then start breaking apart your design until you figure out what the problem is or just pull out what you need and rasterize everything else.
Recently I have been using figma alot more. I've been finding it super hard to create stuff in figma and then start creating them again in Illustrator. Imagine the joy on my face when I found out I could just export straight outta figma. Thank you so much!🤟
thanks man. all other tutorials were very confusing to me. But your tutorial was well explanatory and ive got the job done, as this was the first time im using figma because of a motion design project
Amazing to hear. Glad it was helpful. If there’s anything in your process that you have questions about let me know and maybe it can become a future video’
Thank You
Mr Iven Witterborg and friends!
Boy, this sure makes me want to learn figma now.... Awesome tuts👍👍
Very grateful for this! Blessings :D
That was helpful to get me started and show the usefulness of using AEUX in the Figma --> After Effects workflow. It's such a pain to go through and convert everything in Illustrator first before pulling assets into After Effects, so this makes my life a whole lot easier! Now I can save money on not buying Overlord too. Cheers!!
🎉 Awesome to hear this was helpful for your workflow!
Thanks for this incredible video.Greetings from Argentina.
Thank you! The video is so useful and easily understand
Appreciate it!
Thanks. This is pretty cool pluging. I would pay for it when 1.0 is released. Time saver
Yup it’s a must have for this type of work.
Great, thank you for this video!
Thanks for the tutorial and the plugin.
Hey, awesome tool but for some reason I can't get it to work
the issue i'm facing is firstly, the plugin when opened on figma shows very broken text instead of what it's supposed to say like "qflkp" instead of "actions"
and secondly, when clicking the button that supposed to send things to after effects it doesnt do anything
any help here would be greatly appreciated
Check out this Latest video and see if it fixes anything for you
Figma To After Effects With AEUX Failed Until I Tried This
ua-cam.com/video/c9Oaq7yYLSQ/v-deo.html
Bro Really Helpful video and easily understand...... Keep more videos about UI/UX
great video, what wonderful plugin, good explanation. One question: how i import the animation back to figma?
Going from Figma > After effects > figma would mean you would need to export the animation as a gif or video and play it back in figma.
is the developer tab only available in the paid version of Figma? I can't install the plugin inside figma for some reason.
Make sure you're using the desktop version, It should work regardless of paid or not.
I have a JPG image that doesn't appear on the app screen when I transfer to After Effects. Do you know why that would be?
Sometimes AEUX can be goofy, buggy. Just group the JPG in Figma and Rasterize that group on import. Something like that should fix it.
Thanks for the video - very handy.
From my initial tests, Am I correct in saying you must flatten text before importing it to AE?
I used the Figma plugin to send a frame with standard type to AE, but the text broke and ended up stacking on top of each other.
Would be good for text to be imported cleanly....
Appreciate it!
Not necessarily with the text import. There are sometimes minor alignment issues but for the most part should import correctly.
Check out this video for more context
3 Advanced Tips for Figma to After Effects using AEUX
ua-cam.com/video/LiV4GqyVPCo/v-deo.html
That was very helpful thank you!!
This video is super helpful! Thank you a lot!
another why is use "Convertify', but it's too expensive
Super - thanks!!
Cool video but how do you export the animation back into Figma and How do you add it to your code as a frontend developer?
Great question.
If the animation needs to be put back into Figma for some reason then you can do that with a video or gif export and some prototyping linking.
Typically the workflow is that you would create a motion spec write up from your animation in after effects.
See my video covering that here: Creating Motion Specs for UX Design.
ua-cam.com/video/iw5eLAt7yzw/v-deo.html
cannot access aeux io website, does anyone else have the same problem?
Ahh I’m seeing that issue on my end as well.
Try googling “AEUX after effects GitHub”
And you should be able to download it from a repo that way.
Not sure if it’s the most up to date but worth a try.
@@MotionUX will do, thank you!)
how do i import my complete animation back into figma?
cuando intento exportar un after me sale un error que dice: failed to connect to AE
alguien por favor puede ayudarme
after making the animation , can this be showcased in the website in an interactive way too ?
Absolutely. Check out my other video to see one simple way that it’s possible
Lottie Interactive Navigation Icons from design to development
ua-cam.com/video/fYIsRyEMBmo/v-deo.html
when i try to export an after i get an error saying: failed to connect to AE
can someone please help me
This happens from time to time with odd updates or things getting glitchy.
Best fix is to remove and reinstall AEUX for AE using ZXP installer.
And / or resetting AEUX AE plug-in preferences via ZXP Installer
And always make sure you’re running the latest plug-in on Figma and AEUX.
@@MotionUX
I already know what was going on.
When exporting figma windows with AEUX, After Effects must be open, otherwise it will tell us that we have a connection error and will not let us export the windows ♥ gracias por tu respuesta
very helpfull thanks a lot.
Appreciate it!
I always have trouble when following this process, Im not sure if its the way the Figma file layers are organized when they send them to me but I am always missing assets (Specifically images), text shifts position and everything its in bad quality. Does anyone have any suggestions? I tried everything and nothing works, feeling a bit frustrated at this point
Yup it's not 100% perfect which is why the reference image feature is helpful. For images not transferring check out my other comment replies for a potential fix
Thankyou for the video! It was super helpful. Could you tell us about your handoff to the developer for the very same animation please?
Be on the look out for a video covering that soon!
Thanks for making this, it looks great! Better than exporting to XD and then to AE lol
I followed every instruction, yet It won't do anything... I click on 'send selection to AE' and After effects window will pop-up but nothing else... what could I be doing wrong? thanks for the tutorial anyways!
Are you getting any error message?
Make sure AEUX is the most up to date on AE and Figma. And that you're running the latest version of AE
In the AE plugin make sure you've set a save path for your image assets.
Hope that helps!
@@MotionUX I have both the latest versions. I don't get any error, after effects simply pops up, as if it's going to import the figma material, but nothing happens, no error code, nada. It worked before, a few months ago, though it never imported the images or the proper font for the texts. And yes, I made sure I've set a save path. Thanks so much for your reply and help anyways!
@@galejandro2003 the same... have you a resolve this problem ? thanks bro
Are you on Mac or windows?
@@MotionUX windows
thank you for the video, but I am using a certain font in figma, and when I import it into ae all of the fonts get defaulted to times new roman, any fixes?
Yeah that happens for me all the time as well. Not quite sure of a full fix… but it’s an easy manual change to make within AE to update all type layers. Usually will import everything I don’t need live layers as pngs via AEUX
Thanks dude!
Thank you so so much
Thanks fo this, but my design is messed up inside AE. icons and texts move a bit upwards etc. Any thoughts?
Yeah AEUX isn't perfect all the time. depending on the font used, and layer groupings etc.. some things can shift slightly. Using the "export reference image" in Figma AEUX helps get things back in place.
somehow when it ry to add it to AE, it doesnt transfer any rectangel with a Photo, and it comes out with blank, any fix for that?
Please check out the other comments I responded to for a potential fix
Beautiful simple explanation. Curious once a stakeholder says awesome! Let’s do this!
What’s your process of getting a developer to actually make this real? I mean easing curves alone can be very nuanced. I can’t imagine they just eyeball it?
Will be creating a video hitting on this soon. Easings are actually pretty simple, just provide your dev / eng partner with bezier values that match their platform.
Thank you for the video!
It appears that some fonts I export AE defines automaticly, some fonts doesn't.
Maybe someone knows how to solve this problem or in what direction to dig?
did a little dig and the problem has solved
What ended up being the solution for ya?
I am having issues where AEUX is not bringing in any of the images to AE. Anyone else have this issue?
AEUX can be buggy from time to time. I would just go through all the routine set up steps and troubleshooting. Reinstall. Ensure save path is set in AE for AEUX and try to simplify the grouping in Figma before exporting.
👍 👏 Thanks
I'm having trouble with the download to even begin... I cant even see "Development" from right click>plugins>(doesnt say development).... Thanks for the video anyways, wish I could just get past this part
I'm silly... You can only see development if Figma is on desktop.. not on brower oops!
Yup! Glad you figured that out.
When i try to export to AE it says layers must be inside a frame ?
Can somebody help with that since I am new to figma and putting a rectangle with my assets and grouping does not work..
Just right click the group of layer and click “frame” and then do the export.
The colours become less saturated after importing to Ae. Any help please?
This can be for a variety of reasons.
- color space in AE is different than figma
- monitor color space is different than AE
- compression when exporting images could change things slightly
I would test this by exporting videos from AE and comparing on multiple screens / devices to get an understanding of how much the color is being effected
@@MotionUX Do you have any insight on how to match the color spaces between AE and figma. I can't find a lot of information on what figma is doing internally. It seems like it uses an sRGB color space. AE has a lot of options about how to set and control color, but I can't get the colors to match between the two programs.
@@willsummers648 Yeah it is most likely due to the color space within AE / Figma. As well when you export the compression will also alter the colors slightly.
However in my experience the color differences are negligible for 99% of use cases. Not really a solution but I don't tend to worry about it.
Specifically in the UX Motion world the video you produce from AE Is never directly used in an app or website (with the exception of Lottie, which this issue isn't present) With that in mind, the assets you create are usually a reference for a developer / engineer to build on their end in code. At that point its a combo of referencing a motion mock and a static design to ensure all pieces are correct.
Hope that helps.
Guys, Am I only have the problem with exporting png images from figma to ae with AEUX? If somebody know the solution, share please)
The latest ae update, the latest aeux update. The images just export to ae as an empty placeholders after clicking on send selection to ae
Not able to replicate on my end. I'd try troubleshooting with a new basic figma file and see what you can figure out from there. 🙏 Hope you're able to resolve it!
@@MotionUX thanks, hope it too
Same thing happens to me. I dont have a solution but if you found one please let me know :)
@@lucilaconen2194 yes, my art director told me, it's because of the weak internet connection. Just get a better provider.
Why do my anchor points shift in after effects when exporting from Figma?
It sometimes happens. Just weird stuff during the import process. I usually use an anchor point repositioning plugin in after effects and fix all of that as I start animating.
I dont know why my ae is not doing that... i am wasted hours and hours. not getting this shit imported.
It can totally be finicky sometimes. Make sure the basics are covered, everything is up to date, try reinstalling plugins in Figma and After Effects.
If that doesn't cut it, it might be something in the specific figma frame, create a new frame with just a basic shape and see if it imports. If that's successful then start breaking apart your design until you figure out what the problem is or just pull out what you need and rasterize everything else.