Figma to After Effects with AEUX

hey everyone welcome back this is motion ux and  i'm Ivan Witteborg today we're going to be diving   in how do we take our designs from figma and bring  them into after effects using a tool called ae   ux so let's dive in now aux is a plug-in for figma  and a plug-in for after effects that allows us to   seamlessly send our designs from figma into  after effects and start to animate them there   so this is amazing right because we're able to  design in the tool that's best fitted for ui   and ux design which is figma and yet we're still  able to leverage after effects to do our animation   redesigning all of those screens that  we've beautifully designed in figma   in after effects would be such a high level of  effort and so this cuts out that middle process   and just allows us to import our designs very  seamlessly into after effects so if we go to   aux we can go ahead and we can download the  latest version if we go ahead and open up   aux we see that we have stuff for sketch we got  stuff for figma we have stuff for after effects   so let's go ahead and do the after effects  one as you can see here it's using a dot zxp   extension and so if we actually use our zxp  installer which you can get from ae scripts   so all you do is drag and drop and it installs it  into the appropriate application so you can see   in after effects now i have aeux for all of these  different versions of after effects shows me the   version of the plugin and so on now after effects  is up and running we got that figured out next is   figma so we get this manifest.json file format and  if you're familiar with figma typically you would   go into figma you go to home and you search the  community and you'd be able to download a plugin   and install it directly into figma like with one  click because this is this plugin is not published   in that environment yet we have to add it as  if we are the developer of the plugin we just   right click when we're inside of a document  we go down to development and import plugin   from manifest then we just navigate to that figma  folder and open up that manifest.json file and now   aux has been imported and if you go back to the  plugins development you see we have aeux as our   new plugin and if we actually go ahead and click  that we get this nifty panel right here to launch   it this plugin is still in development so you'll  definitely run into some bugs here and there and   usually just closing it and opening it back back  up fixes a lot of those bugs and so i actually   went ahead and created a keyboard shortcut using  our system preferences just in the mac going to   keyboard and creating an app shortcut specifically  for ae ux but i just set it to this hotkey here   and so whenever i'm not using it i can just do  control option shift a and it will relaunch that   plugin and if i do it while it's already launched  and i hit it again it will just refresh the   plugin so as you can see this plugin is very very  simple we got three options right here and so one   is whatever you have selected you click it and it  sends it over to after effects then we have export   reference image what that will do is that will  be essentially a png of what you have right here   sometimes things get misaligned especially with  text layers sometimes vector logos and things like   that and so it's nice to have that reference if we  need to kind of like piece things back together if   things break over the transfer and then we have  rasterize layer on export and what this does it's   really wonderful for things like logos that are  heavy with a lot of different vectors and paths   and masks and things like that a good rule of  thumb of using this is asking yourself do you need   full control over animating this specific element  on your design and so for me do i need to do like   a logo animation here and in this case i don't and  so what i'm going to do is select this logo layer   and click rasterize layer on export and you see  it adds a little asterisk right here and so what   will happen is when i actually send the selection  over over to after effects it will create it will   basically create a png of this entire logo with  its with its type right here and that really helps   limit the amount of resources needed to to render  all the things that are happening in after effects   typically you won't be working in an isolated  environment like this with just one screen like   you'll be working within your entire flow of a  bigger project sometimes you need to break up   the groups in specific ways depending on like  the bugs that you run in during the transfer   uh sometimes you may need to rasterize specific  layers and all those sorts of things and so what   i find is helpful if i only need to animate one  or two screens i'll just copy the screens make   a new figma file and dump things over there as  my like animation export type of space so that   i don't mess with the actual designs that the  rest of the team is working on another thing   that you will notice is we have all these auto  layout groups here when we import this selection   to after effects it will basically convert all  of those groups into comps within comps within   comp and there is a specific tool in the after  effects plugin that allows you to ungroup all of   those comps but if it's something that you want  to avoid here you can go ahead and like ungroup   some of these things but if it breaks your design  using auto layout then just keep it the same here   and when we get into after effects we'll actually  deal with ungrouping things that we don't need to   be comped up now that our designs are ready in  figma let's hop over to after effects and see   what we need to do there so now that we're here  in after effects you'll see if we go under window   and extensions we'll have aeux here so right  here off the bat we have new comp or current   comp and so what that will do this is basically  the settings that a eux and figma will look at   as it's importing all those designs and  so if i select new comp every time i'm in   figma and i click send selection to after effects  it will create a brand new composition to put all   of those designs in sometimes you already have  a composition set up and you just need to like   bring this one little element maybe this one  button into where you're currently working and so   that's where current will be more helpful and so  it will import everything that you're working on   into the current comp position that you have open  then we have image saved paths if there are images   already in your design or if you're going to be  rasterizing any of the layers it needs to save   those images somewhere we'll go ahead and we will  go into a ux and we'll go to assets and we'll do   new folder and we'll do a ux and so i understand  that these are things that aux is using to import   uh into my designs and you can see every time i  do that it will save it to that place for this   specific after effects project now we have comp  size of multiplier so in figma we can see that   we're working at 320 pixels and so if i send  this selection to after effects at 1x comp size   it will be a 320 pixel wide composition that's  fine but if we actually go to export that we're   going to be exporting a 320 pixel wide composition  and if we really want to blow this up so that we   can see it at a high resolution maybe we want  to multiply that by like two or three so that   we can make sure that we're having high resolution  video comps at the end of this animation process   typically i stick with about 2x comp size  multiplier when i'm working on mobile designs   when i'm working on desktop uh size designs 1x  comp size usually is okay but it depends on kind   of where that video uh spec or that animation is  going to live at the end of the day then we have   the frame rate you can change this to whatever  you need typically i stick to 60 frames per second   because that's a good balance of it's being really  really smooth i'm able to set my like millisecond   durations very easily with 60 frames per second  then we have the comp size duration and so we   can change that from five seconds is the default  and we can change it to all the way up to whatever   you want and you can actually come in here and  and type in however long you want it to be this   is really dependent on what you're going for if  it's really just like showing a small little micro   interaction five seconds usually there's plenty  of time if you're trying to show an entire flow   maybe you want like a minute two minutes or  something like that so when we have this selected   detect parametric shapes if you have a square or  a circle it will detect those shapes and after   effects as a square or circle layer and if you're  familiar with after effects you have a few more   options in the properties of those shapes  otherwise it will just detect it as a path   layer so precomp groups if in figma we  have anything that is an actual group   so apparently we just have auto layout groups  and we have frames but if we actually have a   command g group it will detect this as a group  and it will make this into its own precomp   otherwise if it is a group and you do not have  that selected it will just parent those to a null   object then in here we have some group controls  so we can pre-cop things if we select a group   of layers we can pre-comp on we can un-pre-comp  things that have already been pre-comp we can   toggle guide visibility layers and we can delete  all the group layers and so deleting the group   layers sometimes there's just extra stuff that's  imported from uh from this process so you may see   some null objects some guide layers it will just  kind of clean up all of those things that you   don't necessarily need for animating and then you  have the versioning here below and that is it so   let's go ahead and import our designs at 2x comp  size multiplier for 5 seconds 60 frames per second   from sigma we're going to select our login screen  and we're going to send selection to after effects   and it's building the layers everything's  popped in it already saved the images to where i   told it to earlier and now we are good to go we  can see that we have a comp called login screen   we have this auto layout group as a comp the cta  group as a comp and if we click into this we can   see that the logo has been replaced with an image  if we look back over at our figma we can see that   it all is still it's live uh vector groups and all  of those sorts of things so nothing in the figma   has been affected except for it out of this little  asterisk to let it know that this is going to be a   raster layer so now that everything's in after  effects we really want to go ahead and clean   things up and make sure everything's set up  in the way that we want to start animating   deleting layers that we don't need and so  on here you can see we have the toggle guide   layer visibility in any time a layer has this  little blue hash mark that is a guide layer   and you can see this right here is actually the  login screen reference layer that we selected   within our figma file so this export reference  image that's what that is and it's automatically   imported as a guide layer that has a slight bit  of transparency on it and so we're able to see   um what has lined up correctly and what has not  i also want to mention that you see that there   is a blue background here that matches what we  have in our figma file however that background   color is not an actual physical layer and so  if we were to export this from after effects   it would export with a transparent background  you can actually see the transparency here   this is just the background color of the  actual composition but not an actual background   solid and so if we want to have that background  solid we need to actually select what that color   is going to be you can't actually uh eye drop  or pick this and so you can just come back   back into figma and see what that fill color is  uh copy it and paste that into this as a hex code   and so now if we send that to the background  with command shift left bracket it will send   it to the bottom and now we have an actual  background layer we really want to have   the ability to move this logo around as well  as the subtitle but i don't want to have to   keep on going back into this precomp every single  time and so i'm going to go ahead and unprecomp   that and you can see now we have the subtitle  we have the logo and then you see this here   is a shape layer that's over the entire thing and  the reason that this has been created is because   this is essentially the bounding box of our auto  layout group and so you can see this is there   and it it matches the same thing here so these  are just extra layers created in this import   process sometimes you could find them helpful  if you wanted to do a quick mask of the content   that's inside of here but typically i go ahead  and delete those right now i don't really need   to have a use for them and then down here at the  cta precomp i want to go ahead and unprecomp that   and you can see i have another group guide  here i'm going to delete that because it's   not necessary and we have the sign in cta over  here we have the auto layout group thing that's   been imported as well we don't need that so let's  go ahead and delete that and then we have the sign   up and i'm just going to go ahead and reorder this  to reflect the order that's actually here visually   um just as a way to organize things as i'm going  through we're just going to go ahead and apply a   very simple animation to this and then say that  we are done so we're going to go ahead and do   maybe a position in opacity i'm doing that by  pressing p to open up position holding shift t   and then that opens up opacity now i'm just going  to do a real simple fade in on all of these and   so i have all of the keyframes turned on i'm going  to do command shift right arrow right arrow right   arrow to move 30 frames to the right and add  another keyframe this is where i want them to   be when the animation is done so we're gonna go  back to the beginning of the timeline and we're   gonna move everything down a few pixels by holding  shift and pressing down and then the opacity is   gonna go to zero and then we're gonna go ahead and  add some easing and you can do that by doing f9   and that will go ahead and do a default easy ease  otherwise i use a plug-in called flow and i'll do   another video on this specifically and how we use  it uh to keep our animations consistent but i'll   go ahead and add my easing there and you can  see that now everything fades in really nice   and now i want to add a slight offset and so  i want the top to go in first and the bottom   to come in last and this is one reason why i  organize my layers like this so i can easily   at a glance be able to offset some of  my layers so if i go ahead and tap u   we'll hide all those keyframes grab this move it  two grab this move it four grab this move it six   and if i play it now you can see things  come in a little bit more staggered and   we have a nice little animation of our login  screen alright everyone so we just went through   the entire workflow of how do we get our  designs from figma into after effects using   aeux the goal is always how do we get quicker  in our motion design workflow and this allows   us to get to animating as quickly as we  possibly can catch you guys next time you

Channel: Motion UX

Views: 1,057

Keywords: Ux, Motion, Ux motion, Design, Adobe, After effects, Lottie, Microanimations, Tutorial, Ui, Animation, Airbnb, Production, Experience design, Workflow, Tips, AEUX, Lottiefiles, ux animation, figma, import, designs, ui ux, how to, motion designer, microinteractions

Id: 7u77JmnqnUI

Length: 14min 35sec (875 seconds)

Published: Tue Oct 19 2021