Figma to Protopie with figma plugin
2:00
What is Motion UX (MUX)
1:48
2 жыл бұрын
Пікірлер
@MohammedMADJIDI
@MohammedMADJIDI 4 күн бұрын
can u share the project file ?
@MotionUX
@MotionUX 4 күн бұрын
Hey there! Appreciate you reaching out! I don’t have anything set up for downloads or resources at the moment but hopefully someday soon I’ll get it up and running!
@CanberkSezer
@CanberkSezer 5 күн бұрын
you can do it without expressions just by using properties panel
@MotionUX
@MotionUX 5 күн бұрын
You can access the same properties that way, however it isn’t possible to animate them. Which is what this expression helps with. Especially helpful when using the essential graphics panel to make dynamic pre comps.
@CanberkSezer
@CanberkSezer 5 күн бұрын
Amazing! I’ve been using AE for years, and I just learned this now.
@MotionUX
@MotionUX 5 күн бұрын
Same here! Glad it was helpful.
@CanberkSezer
@CanberkSezer 5 күн бұрын
very helpfull thanks a lot.
@MotionUX
@MotionUX 5 күн бұрын
Appreciate it!
@christrim320
@christrim320 10 күн бұрын
I always seem to have an issue with colours remaining the same after export. Just tends to revert back to the original colour, and tips for said?
@christrim320
@christrim320 10 күн бұрын
this isnt using a png sequence tho.
@MotionUX
@MotionUX 10 күн бұрын
Check out this video where I dive into it! After Effects Gradient Lottie Animation Exports without errors kzbin.info/www/bejne/iXq9cmSQi5aCn7M TLDR save before export.
@martinzetta
@martinzetta 10 күн бұрын
How you open the panel option of AEUX plugin in After?
@peterpanic7019
@peterpanic7019 11 күн бұрын
Great content! Subscribed :)
@MotionUX
@MotionUX 11 күн бұрын
Appreciate it!
@lundjesper
@lundjesper 12 күн бұрын
Another crappy feature of LottieFiles plugin is that the free account does only allow 10 uploads. Doesn't help removing old uploads, you still only have 10 uploads and then you have to pay.
@Hangout-HQ
@Hangout-HQ 13 күн бұрын
Another cool vid!
@gossip_aunty
@gossip_aunty 17 күн бұрын
Awesome, thanks for this tutorial
@Andrew-tj2qh
@Andrew-tj2qh 19 күн бұрын
Thanks for the tips! How have your experiences been with keeping autolayouts in figma before using AEUX? I've been finding that unless i undo all of my Auto-Layouts, things will not import correctly or I get stuck loading forever Also I've been finding that my layers with AEUX imported things slow down my rendering time, even though they're at 1x. Any thoughts on why? Appreciate the video!
@MotionUX
@MotionUX 19 күн бұрын
Want to use this animation in an interactive Figma prototype? Check it out here: kzbin.info/www/bejne/aKeriWyJqbinnsk
@JakeInMotion
@JakeInMotion 20 күн бұрын
Straight to the point! I love it.
@TESPEZ
@TESPEZ 21 күн бұрын
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
@MotionUX
@MotionUX 20 күн бұрын
Check out this Latest video and see if it fixes anything for you Figma To After Effects With AEUX Failed Until I Tried This kzbin.info/www/bejne/mWqykqRtrr5_ibM
@feelcollins4358
@feelcollins4358 22 күн бұрын
Hello, can I have a copy of your preset for the Flow plugin?
@MotionUX
@MotionUX 20 күн бұрын
Hey there appreciate it! I don’t have a download at the moment but all of my curves are based on Google’s motion design system which can be found online and copied for free into flow.
@nartz5361
@nartz5361 24 күн бұрын
why i cant see my png sequence on the json?
@MotionUX
@MotionUX 23 күн бұрын
Tell me more about what you mean? In the code? During html preview? On device?
@nartz5361
@nartz5361 17 күн бұрын
@@MotionUX i mean the output of the json files just nothing, I cant see any keyframes and any visual from my png sequence. the size only 1 kb too. doesn't make any sense
@MotionUX
@MotionUX 17 күн бұрын
@@nartz5361 hmm… sounds like it’s not actually converting your animations. Make sure the render in/out is covering your project, Or Try a fresh project. Make sure your render settings in body moving are also the same as what’s shown in the tutorial.
@DipKumarGhosh-j7m
@DipKumarGhosh-j7m 26 күн бұрын
I have faced Errors like, Plugin TypeError: can not read property 'name' undefined. Do you happen to know what is wrong with it?
@DipKumarGhosh-j7m
@DipKumarGhosh-j7m 26 күн бұрын
Does anybody know how to solve it?
@MotionUX
@MotionUX 25 күн бұрын
Yup totally have gotten these types of errors before. Try running through the last tip in this video it’s usually a solve for all.
@LucidoMedia
@LucidoMedia 5 күн бұрын
@@DipKumarGhosh-j7m Did you mange to solve it? ( : have the same problem
@adarshgoldar
@adarshgoldar 27 күн бұрын
Would love to see more tutorials of mobile ui animation in AE ✌️
@MotionUX
@MotionUX 27 күн бұрын
Absolutely! Anything specific with mobile UI?
@lucylewis6985
@lucylewis6985 27 күн бұрын
Are you able to use this technique for a Lottie file on Webflow? We are having trouble linking the images and it's driving me bananas lol
@MotionUX
@MotionUX 27 күн бұрын
Absolutely, Wherever a Lottie is able to be played this technique will work!
@MbarekNafa
@MbarekNafa Ай бұрын
I can't find the AEUX plugin on figma anymore is htere any other tool?
@MotionUX
@MotionUX 27 күн бұрын
Check out my latest video for that answer! kzbin.info/www/bejne/mWqykqRtrr5_ibM&lc=Ugy7jayAxYFK-sL_YuF4AaABAg&ab_channel=MotionUX
@JakeInMotion
@JakeInMotion Ай бұрын
Excellent tutorial, thanks Ivan!
@MotionUX
@MotionUX 27 күн бұрын
Appreciate it Jake!
@melwinmanson
@melwinmanson Ай бұрын
Why the hell are you making this garbage animation? It’s a complete eyesore! A glow effect? Are you freaking insane? iOS has a completely different set of animation principle...
@melwinmanson
@melwinmanson Ай бұрын
Even Indians don't do such crap.
@mTechPenn
@mTechPenn Ай бұрын
Error 4: Nothing ever looks the way its supposed to. Shapes, gradients, colors, NOTHING
@MotionUX
@MotionUX 27 күн бұрын
Haha, Sometimes technology just doesn't do what we want it to, Hopefully these tips help with most issues!
@bharatsharma2446
@bharatsharma2446 Ай бұрын
Really useful!
@MotionUX
@MotionUX 27 күн бұрын
Appreciate ya!
@supersaucysupra
@supersaucysupra Ай бұрын
Great video! I had a question, how do we hand these off to the developers once we nail these designs on After Effects?
@MotionUX
@MotionUX Ай бұрын
Fantastic question. This type of animation would require a very a-typical motion spec, because this doesn’t have exact 1:1 values in how it would be built in swift. Creating a document revealing the “magic” behind the motion and close collaboration with Eng would be the best path forward. Keep on the lookout for a video diving into this speccing topic more!
@davadh
@davadh Ай бұрын
I really hate that LottieFiles forced everyone to subscribe now. Before they allow you to download without pushing it to their platform but now you need to push it over before you can download it. Just insane
@Kawwyke
@Kawwyke Ай бұрын
Started using AEUX ever since it came out. Crazy that there haven't been any meaningful progress in the Figma + AE workflow for ages. Maybe some day ...
@MotionUX
@MotionUX 27 күн бұрын
Don't give up hope, I've heard something great might be coming soon!
@newyorktoki
@newyorktoki Ай бұрын
I love these fundamental tutorials!
@MotionUX
@MotionUX 27 күн бұрын
Appreciate it, Let me know if there are specific questions you'd want me to dive into!
@bharatsharma2446
@bharatsharma2446 Ай бұрын
AEUX is buggy at times and it's so frustrating. I've heard Overlord 2 finally has the capability to move Fig files to Ae as layers.
@MotionUX
@MotionUX 27 күн бұрын
It definitely can be buggy, But following the tips I've shared with this video and previous ones I have no issues 99% of the time in my daily UX motion work. Hope its helpful for you! And I've heard there may be an update coming sometime soon!
@MotionbyMesh
@MotionbyMesh Ай бұрын
Great video, but it still doesn't fix it, it just keeps loading
@MotionUX
@MotionUX 27 күн бұрын
Dang, sorry to hear that, Tell me what specifically have you tried and what specifically are you trying to import? Latest Figma and Latest AE ?
@sengv1987
@sengv1987 Ай бұрын
Hey there, I am having some dificulties with this. I started by creating a text layer call Counter Within it, is number 0 to 9999 used the slider effect with expression Math.round(effect("Slider Control")("Slider")) Exported with a demo Opened the demo and it's blank trying to edit the json file but can implement the var. any help would be much appreciated. Thanks
@MotionUX
@MotionUX Ай бұрын
Appreciate the question. The issue is most likely happening due to lottie not supporting expressions. The best way to achieve what you’re looking for is by creating the animation with static text “9999” and then in code create a counter with JS or some other web language. And replace the text variable with the output of the counter.
@captainess
@captainess Ай бұрын
goddd you're a lifesaver, thanks a ton
@MotionUX
@MotionUX Ай бұрын
Appreciate it, glad it helped!
@sengv1987
@sengv1987 Ай бұрын
this is very valuable info, but with the amount of moving parts surrounding the dynamic text/animation in my design. it may cause issue or creates limitations. overall great stuff
@MotionUX
@MotionUX Ай бұрын
Yup for sure, this tutorial is focused on the technical aspect of how to do it. What you’re getting at is the visual design side of things and typical motion best practices. It’s always good rule of thumb to not have too many things moving at the same time. You want to be strategic on how you draw the users eye to a specific element on screen.
@TKanimacje
@TKanimacje Ай бұрын
Let's consider that in today's world of subscriptions, if we want to use many interesting features and programs, each one costs around $20. Multiply that by 5 subscriptions, and it adds up to a significant amount
@MotionUX
@MotionUX Ай бұрын
Absolutely. It gets to be a bit much…
@david_jay992
@david_jay992 Ай бұрын
I had to work on a very complex flag animation for my product some 2 years ago and it wasn't working. I made it into a GIF and split everything frame by frame, exported the PNG and stringed it together in AE. 😂 The file was super heavy but our mobile guy was able to make it work. This is a much more efficient method!
@MotionUX
@MotionUX Ай бұрын
Amazing. We’ve all had these moments haha happy to share a more efficient workflow!
@jorgeraaa
@jorgeraaa 2 ай бұрын
Noooice! Didn't know about the AEUX inside of After Effects options.
@jorgeraaa
@jorgeraaa 2 ай бұрын
Keep it up the content man. Hopefully you check some Im doing as well. Still very early.
@MotionUX
@MotionUX Ай бұрын
Appreciate it! Just saw your channel, looking great keep it up as well!
@Marie-pg8li
@Marie-pg8li 2 ай бұрын
Thank you so so much!
@MotionUX
@MotionUX Ай бұрын
Absolutely!
@andyrenton1962
@andyrenton1962 3 ай бұрын
IMG sequences aren't rendering.. how did you do it?
@MotionUX
@MotionUX Ай бұрын
In the video at about 2:05 I explain my process of how I export the png sequence.
@AndrejsGavrilkins
@AndrejsGavrilkins 3 ай бұрын
Thanks. This is pretty cool pluging. I would pay for it when 1.0 is released. Time saver
@MotionUX
@MotionUX 2 ай бұрын
Yup it’s a must have for this type of work.
@katume7156
@katume7156 3 ай бұрын
Hmm interesting, I think I have 2 options to get scalable animations with Figma files 1. Importing the figma files into Adobe Illustrator, converting the ai file in ae to shape layers and render with bodymovin 2. Export figma file as .svg and import it in lottiecreator browser, making the animation there but with many limitations and some extra costs Both have their advantages and disadvantages. Advantages for the first one are I can possibly use more effects and do some more complex animations but with the disadvantage that it won't handle gradients and blurs. Advantages for the second are I can handle the gradients and blurs but I can't animate everything as detailed as in AE Sadly that AE doesn't support svg files yet 😭 it could be way better lmao
@katume7156
@katume7156 3 ай бұрын
Actually I have a 3rd idea, I can export a svg file and put the animated layer that has no gradients over the svg file So then this could work in some cases
@MotionUX
@MotionUX 25 күн бұрын
You can acutally just export lottie SVG animations from AE, Firstly Importing from Figma > AE using AEUX plugin. This works great for 99% of things, however there are many effects and visuals that are not compatible with SVGs / Lottie which is what the focus of this video is for. Agreed its always better working with SVGs to keep things scalable but sometimes in the product design process you need to get hacky to ship things.
@shifatmasud
@shifatmasud 3 ай бұрын
❤❤❤
@MotionUX
@MotionUX 27 күн бұрын
Appreciate it!
@shifatmasud
@shifatmasud 27 күн бұрын
@@MotionUX your approach to figma is superb 👌. Thank you for showing me this amazing technique.
@titanmars9229
@titanmars9229 3 ай бұрын
would gradient animations work on a text layer in lottie?
@MotionUX
@MotionUX 27 күн бұрын
It does work, Mostly, Most of the time haha The best way to answer it is to give it a try, Lottie Web its much better, but Lottie iOS and Android its hit or miss.
@OK__ODT
@OK__ODT 3 ай бұрын
great video, what wonderful plugin, good explanation. One question: how i import the animation back to figma?
@MotionUX
@MotionUX 27 күн бұрын
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.
@abubakarqoreebullah895
@abubakarqoreebullah895 4 ай бұрын
Nice content. I'm having an issue with my AEUX, it's not working for my Figma
@MotionUX
@MotionUX 27 күн бұрын
Check out my latest and see if those fix any issues for ya! kzbin.info/www/bejne/mWqykqRtrr5_ibM&lc=UgxgIvOisQ8XYZGEVPN4AaABAg&ab_channel=MotionUX
@Bl1tzs
@Bl1tzs 4 ай бұрын
how do i import my complete animation back into figma?
@nearshoring
@nearshoring 4 ай бұрын
Great video, thanks for this. When I export my frames, all layers export but the frame with applied gradients doesn´t end up in AE. Any idea why? I see you have the same background color in AE as in Figma so it seems to work for you.
@mikeb1613
@mikeb1613 4 ай бұрын
This is very helpful. Do you happen to know how to fix the "Cannot unwrap symbol" error that comes up when sending certain text layers into AE? I haven't figured out why it happens on some text layers, but not all. Thanks!
@MotionUX
@MotionUX 2 ай бұрын
Yeah AEUX can be a bit buggy. I would try to simplify the layer grouping in Figma as much as possible before exporting to AE. Hope that helps.
@tiagopesce
@tiagopesce 4 ай бұрын
what AE version are you using?
@MotionUX
@MotionUX 4 ай бұрын
In all my videos it’s the latest version available at the time of posting.
@tiagopesce
@tiagopesce 4 ай бұрын
​@@MotionUX thank you.. i was having a lot of problems because it seems .ai layers render only as image to bodymotion, since i converted they in shapes AND deflag everthing on "rasterized asset settings" the pluggin starting working just fine.. that may be something someone else have trouble with
@pulgx
@pulgx 5 ай бұрын
Aeux not working on figma, it keeps loading and never starts U_U help
@MotionUX
@MotionUX 2 ай бұрын
Yeah AEUX can be a bit buggy. I would try to go through all the typical troubleshooting steps. Reinstall, ensure paths are set up correctly. Restart computer etc… hope this helps
@tiagopesce
@tiagopesce 5 ай бұрын
omg lottiefiles plugin is a paywall facade
@MotionUX
@MotionUX 5 ай бұрын
Seems to be that way…