#FigmaFridays: Animate your Figma Designs with Principle

given that it's a technically an international crowd right now so um let's be very respectful and mindful with what we're saying be thoughtful as well so um if you have anything that you want to talk about we can have a discussion later and hopefully it's something that's going to be helpful for everyone um also be cool this is a casual casual session so um hopefully everyone of you guys are chill with their uh whatever you're doing so yeah um if you want to check out uh the basis of what the stuff that we've shared here um please check out the figma code of conduct which is figma.com code of conduct code uh dash of dash conduct so you can check out uh the things that are happening here so okay i just want to officially thank everyone for being here and huge shout out for those who um who are attending as well from uh from other countries i think we have a couple of participants from who rsvp'd in this event so yeah since this is like the um first time that we're gonna be hosting amira apart from our traditional zoom calls here in bevi so i'm hoping that the first this first event would be would do good so yeah um i just want to introduce us for a little bit the group so if uh a few weeks ago it was still sigma philippines but since the community wanted to like push for more engagement in terms of figma as a whole we have rebranded figma the community of figma from sigma philippines to friends of figma philippines and it's actually a brand that is aligned to the global brand of friends of figma which is like the community brand for figma okay one shot for every word that i say figma okay um before we go to the actual program can we like give a huge shout out to miramark and like i just want to share yeah yeah just want to share like the inspiration for the logo because this is a very very cool um implementation of the logo so go ahead mira mark hi guys can you hear me yes yes yes yes uh yeah good evening good morning everyone so yeah uh yeah coming from the explanation from gel bin so basically the idea behind uh our community logo is is mostly inspired from our representation for our country so we put the three stars in the sun there which is very much iconic in terms of like saying filipino and then you can easily like visualize everything okay the flag there the three stars representing the ozone besides in mindanao which is the regions uh consists of the philippines and then we also add the jeepney so as we know it jeepney is one of the iconic public common transportation within the philippines and this is this is somehow to represent and to show that we as as community in the philippines are inclusive open and and we're fun kind of say it and and we are open and we're just here to learn and share so as we know writing jeepneys is very common within us within the philippines and there's a lot of kind of different variations of attitudes personalities that you can kind of meet within the the ride so we wanted to put that uh iconic jeepney to represent that within the community that's actually it yeah it's very straightforward that's awesome always oh i was about to cuss i apologize it's pretty awesome um so it's a pretty cool representation of the logo and it has all the elements that we have and hopefully this kind of solidifies our brand as figma philippines and friends of friends of figma philippines rather so yeah huge uh huge thanks to miramar for that um to quickly move on and i know that um everybody is excited to um to learn about the topic for tonight so just a quick uh introduction so the session tonight for figma fridays um i'm sorry if you've heard not crash a cat just well anyway um going back uh so the topic for tonight's figma fridays is anime animating your figma designs using principles so it's a combination of both tools and i hope that both of you uh and i hope that all of you know both of the tools so that you can utilize and learn something from this session and the person who is going to be sharing sigma uh uh the person who's gonna be sharing like the an animating of the figma designs to principle is nico incarnation yeah who is yes was the ux manager technology i'm not gonna go through the formal introduction that's let's just say that niko is one of the most awesome designers out there in the industry he started out as an illustrator actually and then transitioned to front-end design and development and eventually leading like a huge team of designers currently at make i was one of those people who have uh was blessed to work with him like for two years and that was pretty a pretty awesome experience so yeah huge shout out to nico i'm gonna be passing on the mic to him clap clap clap crap hello everyone let me share my screen so hello hello um so thanks jobs for that uh short but sweet introduction so i'm niko and karnashon uh and like what jordan mentioned um i'm currently a ux manager at make technology um just for everyone's background make us a digital design agency um we work with a very diverse set of clients like um civil pacific junior nba asia starbucks asia pacific um so we've touched a lot of industries so to speak uh from uh financial technology to airlines to uh food and beverage um so right now at nick yeah as i mentioned i'm the ux manager and uh currently i'm also leading the interaction design team um where we create wireframes for websites for mobile applications web applications and my favorite part actually is creating prototypes creating prototypes for client presentations for usability testing and that's what i'm going to talk about tonight so um just a background right uh what this workshop um isn't so this is not going to be a workshop about uh user interface design so i'm not going to teach you about um eight pixel grids i'm not going to teach you how to make components in sigma i'm not going to teach you how to um fix your typography um all of those things they serve as a separate session uh this is also not going to be a workshop about um designing or creating prototypes or basic prototyping using principle uh there's principle is a very um it it's a very complex tool um for prototyping and there's so much to learn about principle that we won't be able to fit it in this two-hour session so um so for the next uh 1 hour and 45 minutes um i want everyone to chill so this is going to be a very chill session just like what the gelding said earlier um so grab a cup of coffee or a glass of whiskey or beer so whatever makes you wake up this late in the evening or grab some chips i have i have some chips here beside me so tonight is i hope going to be awesome for everyone okay so uh moving on um figma in principle why use two different tools for creating prototypes or for designing right so when we at make at least when we visualize interactions on a page uh we always use prototypes whenever we never present just um pictures or jpegs to clients or developers whenever we're describing different animations or different interactions so as much as possible we present these things in the form of prototypes or moving images uh like what they always say if images are worth a thousand words uh prototypes are worth a thousand meetings believe it or not we've had uh clients or projects before where presenting prototypes instead of jpegs saved us around two to three hours of beating time so that's a lot of time saved um for someone who's working in an agency right so why two tools um figma let's start with sigma sigma is sigma's stigma has grown a lot figma is very different now compared to when i first used it back in 2017 or 2016 back then it was just a design tool um i was using sketch most of the time uh and uh these uh past couple of years prototyping has been introduced to big figma and just this here it has been improved a lot so a lot of animations were integrated um there there are already uh different transitions that you can use for your components for your pages so it has improved a lot but the problem that we have with vigma is um since since the lockdown started right so we we we've been presenting to clients uh through videos through video content video calls so what we noticed whenever we presented prototypes using vigma is it it's kind of laggy whenever we are sharing our screens to clients or to other members of the team so we resorted to recording our screens so that we can send them to clients and to developers or to everyone we work with but the screen recordings were also laggy so there's really no other way to send your animations or prototypes to uh developers without sharing the actual files which which is sometimes uh not practical because they find it hard especially clients they find it hard to uh figure out how to interact with sigma um i'm referring to the to the more old school clients that we work with so in order to in order to make things easier for them we send them videos that describes uh how this button is going to is going to behave whenever a user hovers on it how this carousel is going to animate okay so in terms of uh prototyping at least uh for our requirements um figma is not there yet hopefully in the next couple of months within the year they can improve their function even more but for now we are using principle for smoother animations so using principle allows you to present smoother animations even when you are sharing your screen and it allows you to easily record your animations for the entire team and these recordings can be exported in the form of mov files uh gifs and other formats that are needed by developers and even in different resolutions depending on your wifi's internet speed or something okay so um what we're going to design tonight this all right so so this is um a design that i quickly uh put together um earlier today actually okay so this is a mock-up of uh porsche uh horses uh web design so just a disclaimer we're not working with porsche porsche is not our it's not mixed giant um i sure wish they are but um the design here that i presented uh that i created is made for um animation uh so the content is going to be totally random and i created this design like i mentioned uh just a few hours ago just to simulate uh situations where it's really just your first time to encounter some components for animation for exporting so another disclaimer i will be making a few mistakes along the way in the next one or in 10 minutes so just bear with me because just like everyone else here it's going to be my first time to animate uh this design alright so um what i'm going to do next is i'm going to leave this design as is okay and i'm going to try to import it to i'm going to try to import it to principal okay right okay so this is principle okay so we have uh a blank project right now and let's go back to figma select this page go back to principle and the awesome thing about principle it is it lets you easily import layers from sigma so just select the document that we want getting documents okay then it can you you can actually import uh your currently selected frame so that you won't have to import everything else okay okay so this is my first time okay oh that's surprising 101 images believe it or not for for some designs this could reach up to around 300 images okay so this is uh clearly not optimized for animation so 100 images is a lot for a one-page design because you're not going to animate 100 elements in a design anyway okay so this is our design um in principle and when i click the layers panel here on the left side we're going to see a pretty disorganized layer structure okay so everything's everything's a mess okay so the icons are not flattened there's tons of layering here that i don't need for animation okay let's check out this section for the history oh man okay so there's a lot of nesting which we don't want when we want when we're going to animate uh prototypes or when we're going to build prototypes because this complicates things for you okay so this is something that we want to avoid and this this is what i want to teach you tonight okay uh what we're going to do is we're going to optimize um this workflow from figma to principal okay so what this workshop is about um it's it's going to be about the best practices for preparing your design or designing in figma with animating or prototyping in principle uh in mind okay so what i want you folks to learn um tonight is to build a set of habits that you can develop so that in the future it will be very easy for you to design in sigma with the prototyping in mind for principle so um with this with this workflow um you will find it very easy to fi to look for the layers that you're that you want to uh animate or or make a little bit interactive in principle so that when you get to this tool you know exactly what you're looking for and you know exactly what you want to animate all right so let's undo everything and let's go back to figma okay so the first thing that we usually do when we um prepare our prototypes for figma or for principle is we create a separate page for the prototype okay so if you're fond of using a lot of components for your principal designs which we should uh so i that's something that you need to break here so we need to detach all of our components in this uh prototype page okay so we because we we're going to be uh customizing some of the components here for it for different states for different scenes uh things like that so there so uh we are currently in the prototype right it's always separate your file in a prototyping page so next is you should identify all of the scenes or main scenes of your prototype so um scan all of your sections of your design so for example for this hero section what are the possible scenes here okay so always think what the client or what uh developers are going to ask you uh and uh these things most of the time are what happens when i click this or what happens when i scroll to the right or what happens when you slide to the right or to the left okay so you should prepare for all of those scenarios so for example for this hero section you can have a scenario where the hero image is different the hero text is also different as well as the subheading there could also be a scene or state here where the user hovers on the core models the core models model navigation link on the navigation bar okay so you should provide that here all right for the next for the next uh section so nothing special is going to happen here for this one we may want this uh this uh scene to have a different car when users click on a right button or something or when they swipe to the left or to the right okay so just prepare you should prepare for things like that so i prepared another image here of the car for the next few slides for the next few sections these are pretty straightforward for the history or for the milestone of porsche so this can be slide one this can be slide two and this can be slide three right and the next section is basically just a carousel so no need for special states here special scenes shopping tools very straightforward in the footer all right so so far those are the main scenes of the different sections or of our website for the carousel are for for the hero section for the milestones and for the featured car models okay so next um the next uh part of this uh uh discussion will be like the meat of the night's workshop so it's i i want everyone to take note of four four things whenever you're preparing files okay for whenever you're preparing sigma files for prototyping so number one while you're here in figma identify the different animations that you want for each layer for each scene for each for each component okay number two flatten and rename all those layers that you want to be animated so i want you to simplify all of those layers and take note no two layers should have the same name okay so um they can they can have the the same name structure and you can add uh different numbers at the end as a uh just as an identifier or modifier but take note no two components or no two layers should have the same name right so even your backgrounds even your buttons even your headings should have different layer names number three always prepare states as early as now while you're in figma prepare all of the states um for your components for your sections so that's what we did here for our sections and use as little nesting as possible so nesting can be minimized by using a flattening flattening trick that i will teach you later alright so let's get started okay so first let's identify all of the layers that we're going to animate okay so first this nav bar okay so what do we want to happen here in the nav bar okay so the nav bar is going to have two states so this default state where the user doesn't uh it's not hovering on any of the links and this active state where the cars uh the different models are visible okay so what we want to do here is i always arrange the layers in my prototypes according to how they are they are arranged on the screen itself so i'm going to put the main navigation player at the top part of our hero page and so what are the things that we don't need here okay so this utility bar this top part that contains links for download price list book a test drive login and register we're actually not going to animate that so let's go ahead and group that let's call it utility bar and this is the uh this is how you flatten layers in principle the principle add principle flatten at the end of the layer so when you export this to principle this is going to be one layer you're not going to see all of these sub layers anymore okay the logo that's we've got the porsche logo main navigation the main navigation is going to be the one um it's the one that's going to have two states all right so let's copy the active state here and place it here okay so it's on top it's on top of the other main navigation and let's name this so navigation active principle flat flatten and main navigation default principle pattern right so we have two states for the navigation let's hide this and what else do we need from here so this section so let's copy that and place it inside the main navigation component let's call this let's group this as models drop down and frame one we want this to be some sort of carousel later on in the prototype okay so what the developers usually ask us whenever we present them with designs like this is okay what happens when the when the screen is smaller so um are the cars here going to be compressed or are they going to scroll uh from the left to right so that's what we're going to do here okay so we don't want the cars to reach the edges of the screen we want them to have this to disappear somewhere here so the trick there is using by using a white gradient okay oh razor let's use a white gradient that will cover any car that goes beyond this point and let's use a linear gradient make it white adjust the colors and duplicate that put the same uh layer the right side and just rotate it okay so let's rename this um i can rename this left gradient and this one right this one should be car or model carson so it should be the background the model carousel um let's not put any interactions here so the model carousel will be a flattened layer okay that's it for the main navigation okay so it's okay uh it's okay to leave it like that um anyway we're going to transfer everything to principle later on what else do we need so we're going to have another state for the hero image so let's copy this place it on top of this hero image okay so hero 2 this is hero 1 this is hero text 1 and let's copy this here for this hero hero text so let's make sure everything we need in the hero is here so we have the main navigation and the different states okay we have the hero text two hero text one this rectangle um gradients are actually gradient very important bottom ingredient all right so it's clean we now have a cleaner layer or a group for the hero let's make this a frame okay that's it so we don't need actually don't need these things anymore we can delete that for the next section uh what do we want here um i can imagine um an animation here where this part the shaping the future of sports car gently animates from the bottom moving up once the user starts scrolling down so we need this to be a separate layer we don't want this flattened with the rest of the layers on this section so in let's call it intro heading or intro heading for this layer um all right we want this separate from the bottom uh from the bottom as well uh so let's make this description layer and for the button button we need to think of the interaction here what do we want the button to look like when users hover on it okay so let's make it simple let's make it let's make the colors inverted so let's add the fill and let's make the text white okay so this is a duplicated layer so button of on hover button default okay so we have two uh states for our buttons and let's group this into button component let's make this a frame um just take note uh as much as possible use frames for things that you are going to animate later in principle because uh sometimes principle tends to flatten some group layers some group layers right for this one background intro right now for this part here the featured let's call this featured car section featured ours section okay what do we want to happen here so we also want this we also want this a text group to animate in animate in from the bottom okay so as the users cross uh scrolls down the page i want this to sneak inside sneak up from zero zero percent opacity to fully uh visible okay so let's just move it down a little bit and okay let's make this uh featured of course each group i don't want to i don't want to flatten this because there's another button here and this button should also have a fill or another state all right so button white you see what i did there so i'm not i because i already have a button name uh somewhere uh in the in the previous sections i'm not using the name the same name for my button because this is totally different uh button type so button white on hover this is button quite hot right and let's group this white button component if that's data frame okay so that's the white button this one we can flatten this each group featured now when you're using longer and longer names for your layers you can actually use shortcuts so f of course each group um principle okay all right that's it i also want to have two cars later on that i can select so let's place it here exactly where the other car whether the first car is okay let's name that car two or f car two this one is f r one in this group so the two models that are we are featuring here are the cayenne and the cayenne coo models so we also i also want two different highlight components for each of the cars so let's call this cayenne highlights okay let's make this interesting okay what i want for this section is when users select um a different car this is going to be a carousel so when users switch from one car to the next i can imagine the animation here to be uh to be like this so instead of just moving up instead of all of the details here moving up together i want each of these details to animate individually okay so the horsepower detail is going to animate individually separately hp one the uh acceleration is also going to be different so acceleration oops ac one and the average speeds yeah i think this is the top speed sorry top speed also different top speed one nine time one one two i am right next let's duplicate this and for this one and what i'm going to do is i'm going to rename all of these things i'm going to look for all of the ones replace it with two there you have it you'll have you have a you have different titles or you have different layer names for this entire section okay so we have highlights for the cool we have highlights for the kind so i'm excited to animate that later i haven't tried that yet so forgive me if i commit mistakes later on okay so the rest of the uh sections here are going to be pretty easy let's try to finish uh polishing these in in around five minutes five or ten minutes okay so for these next uh for these next uh two sections again i'm thinking of the interaction as the user scrolls down right because we've already thought about the interactions for the two buttons here so no need to create separate um layers for that anymore so let's let's just delete those buttons because we have we already have the same components up there uh in the previous section so we just we're just going to copy and paste that later in principle this one you can actually flatten this so what section is this our hands principal satin this is our hands photo oh that was easier okay just just a neat trick that i want to share to everyone we actually use spacers for all of our pages in sigma so this allows us to uh dynamically adjust spaces between uh individual elements between sections all on the same page um so actually our entire page is has auto layout so let's just remove that so that i can safely remove the spacers we don't want the spacers to be imported okay so they're all there actually on the right side so same here um every detail see the thing here is just um to keep moving to keep renaming layers as you go down a page as you move down the page just think of the different interactions that you want to happen for those layers every detail principle pattern text every detail text we don't we don't need principles out in here so this is every detail section this is our hand section okay so what i want to happen for these two sections is as the user scrolls down these images are kind of are going to slide in from the left okay as they scroll down from zero percent opacity they're going to slide in very slowly they're going to stop once the section is at the center of the screen this is the same with this the same with this image here i want it to slide in from the right for the text let's make it uh different um so let's make it slide in from the bottom of the screen okay we're going to add a button to that later all right so clean layers let's go next for the milestones okay so for the milestones i created two other states so what we're going to do actually is just group these things here group that cut and paste it here oops so right sorry so mistake i should fix this layer first i should fix this uh section first so what do we need to fix here so this is the background this is the shadow and the timeline basically we don't want this to animate so the timeline can be a flattened layer okay and 1946 the year let's keep it as is and shadow okay arrow left okay this is right arrow just the left arrow and a heading this one the image and this background should be in the same group so let's name this milestone slide one okay and slide one okay everything's renamed good clean love it okay so next we paste the group from the previous section and slide two let's put it down here and this one cut that and paste it here okay so m slide three okay so we have slide one slide two and slide three all on the same group okay so this is the map porsche well that's okay this one is pretty straightforward each group looking each group looking background and another carousel okay so we want this flattened also so um looking carson principal satin and we also want the same effect here that we have on the on the navigation so let's copy these two layers the gradients let's face them here perfect all right then just let's just move it a little bit to the right make it softer i guess we don't want it to be very hard or sharp gradient something like that let's see how it looks okay let's copy the style and paste it here so that you don't have to duplicate the layer anymore so let's rename this to looking right gradient and this to looking left gradient all right so the the layer names don't make sense but as long as they are different as long as you uh know what they are when they get when you get the principle that's okay the entire footer will be flattened also okay and the shopping tools as well so we don't want to animate that thanks so what do we have okay so that took us around 30 minutes okay so it took us around 30 minutes to clean up a page and prepare them or prepare our layers for prototyping so what have we done so far let's delete these things so we now we now have a cleaner page so we have our um hero section at the top actually we want the main navigation to be outside the hero section so we have the hero section we have next the intro section and the featured car section and the about sections here why are you there the about sections every detail and on hands should be here footer should be down there as well as the shopping tools milestones should be before explorer all right so clean super clean layers everything that we uh have flattened um are those layers that we don't want to animate later on okay and uh one thing that we also did here is we identified all of the interactions that we want to happen in principle now let's go to principle okay so wait i'll first select this so home page i'll select this page in sigma i go to file import from pigma and let's wait for it okay if this is the correct file yes and import selected frames now let's see how many images are we importing 61 images so that's that's a big improvement from the 100 images that we imported earlier um that's 40 images less so that's a very big improvement not to mention uh big savings on the file size later on okay so we are here in principle let's say first we are here in principle and um the question that comes into mind of a lot of designers whenever they encounter a prototyping tool for the first time or whenever they import their files for the first time um is what to animate first right so where do we start here we have 41 images or we have 61 images ready to be animated where do we start okay so the way we do it at make is we start with the smallest components okay so we start with the micro interactions so if you're familiar with atomic design you can approach it that way but before i start animating let me just take a sip of my drink here all right go ahead yeah there are a couple of questions if you don't mind nico all right sure sure what is it um i already answered it a while ago but the question is uh just a summary like why why do you want to flatten and why do you want to keep it in frames like when do you decide to keep frames okay okay all right so for example here if you remember earlier i flattened this layer this download price this uh utility navigation with the download price list drive yada yada i flattened this because i don't i'm not go i'm not planning to animate any of those things inside this component right so i'm not going to add uh different states for these links this is just going to be another just another flat player in this prototype okay and uh for example another example is for example these numbers okay i flattened this because oh no actually it's not flattened i forgot to flatten it but that's okay okay this one i flattened uh this layer because i'm not going to move these two layers separately okay so i'm only planning to animate this as one uh as one element so there's no need for them to be two separate layers that that lessens the complexity of uh the layers that you have here in figma so i in principle so if you take a look at this uh at the layer structure of the every detail section here on the left side we only have two layers and that makes it so much easier for us to identify what we need to animate in this section and it allows us to just easily select the layers that we need to add interactions to okay so just a rule of thumb if you don't if you're not planning on animating anything inside of that component flatten it cool right thank you all right any other questions before we move the prototype to prototyping chips just justin has a question is there a way to paste the elements where the cursor is this is on figma uh uh do you have any is there one i usually just copy paste it currently no it's only pasting where your screen is and the layer selected depending on certain conditions i can share a helps article about this you can paste the element on the top left if you command or ctrl shift b but that's the deck that's the closest thing like it wouldn't it wouldn't be where the cursor is but um on the frame within the frame yeah i know better all right thanks everyone thanks ji and jose and andrew i'm really bad with shortcuts to be honest i i i find it very hard to remember shortcuts in design tools so i used to have this i used to have this wallpaper on my laptop that lists down all of the shortcuts and sigma all of the shortcuts in this tool in that tool anyway but shortcuts are very helpful thanks for that thanks for sharing guys all right so let's take things easy let's start with the components first okay so oh wait before i proceed so let's start with the components first start with the smallest interactions um next you uh you'd want to proceed to the sections to animate the interactions for the sections so these are the carousels these are the the sliders the big animations and lastly um save the uh the animations for entire pages for the last part okay so these are uh what you call the drivers and flows for uh when you're doing prototypes in principle so for those who are in who are seeing principle for the first time um uh don't get intimidated um if you've uh encountered uh other tools before like adobe premiere like uh flash sovereign old school like other animation tools uh it's very very um straightforward as you will see later on okay so let's start with uh what's the smallest component that they can work on okay so this one the buttons okay so a figma or principle actually allows you to create a create button uh create component so i'll just select this layer this folder and press this create button other create component button at the top left side of the screen and when you press that tada you have a component so this is the initial state of our component of our button just make sure so ah this is the hover state so let's hide this for a while okay and this is the default state so in order for us to make another state we just need to duplicate this layer and that's going to be automatically placed on the right side of the current layer then what we want to do on this duplicate layer is just make the active state appear so 100 percent opacity for this previous state let's make it zero percent opacity okay so when we transfer when we shift from one uh one state to another you will see the preview here on the top right corner also animating so how do we add interactions so we want users to hover on this first state on this default state hover inside and when they hover on that that's going to take them to this next state okay so let's try good perfect but it's not going back to the previous state so we need another interaction from this frame when they hover outside of this button there or the state is going to go back to the default state all right you guys get it so default state user hovers active state user hovers out goes back to default state so when we try it here perfect okay so back to parent we're not going to see it yet here because it's too small it's too small in the preview because we haven't set up our entire page yet but we'll get to that later on okay so that's it for our ghost or our white ghost button what about for our dark ghost button here so [Music] let's create a component also hit it here this is actually the active state so what i want to do is just make this disappear here add the same interactions hover inside goes to next state select the next state when you hover outside it goes back to the default state pretty straightforward right so there you go i just so there perfect just close that go back here next um what else okay let's go back to the top let's let's work on the bigger components so one of the bigger components is the main navigation so let's create a component for the main navigation so there are two states also for the main navigation that we prepared let's ungroup this for a second okay so the first state is the one without the drop down here okay so let's make a drop down this uh transparent in this state okay and let's duplicate this state this frame and for this frame we want the utility for the navigation oh no wait this is what i've been telling you guys ah okay all right so um one thing to be careful about when importing files into uh figma is you don't want to hide you you don't want to uh leave hidden elements here in um in entigma because those won't be imported to principle so so what should we do here so what i usually do for stuff like that is i'm going to duplicate this layer okay because i uh the the thing about the principle also is um all of your pages all of the pages in a flow should have the same size okay so for example i am inside my main navigation component and the size of my screens here are 1 280 by 120 pixels okay so whenever i import another page inside this component it should also be 120 1280 by 1 by 246 sorry 246 pixels okay so that's why i'm duplicating this uh frame here i'm going to remove all of the stuff that i don't need or i've already imported then i'm going to show this navigation item this active state of our navigation then i'll just select this go back to principal click file import from pigma and import that currently selected frame that what's that going to do is it's going to paste that on the right side of our flow and there you have it only this frame or only this layer is important so it's safe for us to copy this and paste it here right delete that now we also want this uh layer to be present in the previous screen but at zero percent opacity okay and in this state um it's kind of messed up because you can still see the default state at the back so let's remove that okay or let's make that transparent by setting it to zero percent opacity okay so what's the effect all right so when we shift from this state sorry from this state to the next so that's going to animate okay perfect so uh the only thing left for us is to add the actual interaction trigger so we want users to hover on all right let's make them hover on the entire main navigation so that it's safer so then when they hover inside that's going to take them to the next state and when they hover outside of the main navigation that's going to take them to the previous state pretty straightforward hover in power out over in our out okay next we also want the carousel to appear here so models drop down should be 100 okay let's try that perfect okay but we want it to be more interactive okay we just don't want it to appear all of a sudden right so we wanted to slightly move from the top and let's we can do that by moving it to the bottom of the page of the layers panel and in this first state let's just move it slightly to the top maybe 10 pixels something like that okay all right and what's missing here in the second state is this the white background for the main navigation so we can create we can just create a background here we i forgot to put this in jigma this should be in figma just make this white nav bg copy that paste it here make it transparent now let's see let's see okay now you you're seeing that weird line between the main navigation and the drop down the models drop down right so we don't want that to happen that's happening because their transparencies are animating at the same time so where there's this uh more transparent section um in the middle where the two where the two layers are meeting so what we want to happen is we want one of the layers animation to be slightly delayed so that they don't meet in that awkward space so we want this model's drop down to be slightly delayed so what we want to do is select that here in the timeline okay then just move the models drop down animation up to when the nav background stops animating okay so let's try that perfect okay so the same when it goes back to the previous state let's move it back a bit oh no we we wanted to animate first sorry trial and error so this is this is usually my process when animating stuff perfect okay um next up when animating don't leave it at the default animation um setting always use the easing settings so i'm i'm a fan of ease both and that's uh that's a smoother when you animate it in css so let's try that all right smoother animation so when we go back to our original design it's in the default state that our main navigation is in the default state now for the hero section um what what should we ah main application now for the hero section pretty straightforward again so create a component ungroup this duplicate okay then for this first frame uh we don't want the hero2 to appear so let's make it zero percent so i'll ask the hero text to zero percent over here we want the hero text one to disappear and slightly move down we want to slightly move down the screen the panamera text should also be down there so we have that slightly uh moving up animation when users hover so okay what's missing here is the carousel or the carousel buttons actually so let's create a circle what color should we use let's just use this color let's make it brighter all right ah a lot of these things are just impromptu guys sorry all right so let's make the other button white all right does that look good no it looks too big let's make it 24. okay now let's transfer these two buttons to here but this time this one is the red button and this one is the white button perfect so what's going to happen here is when i click on the white button it's going to animate here when i click on the white button on this state it's going to animate back to the previous state all right ah as you can see the the alignment is totally off the panamera is way back way way back there so we need both of the x-axis to be diff to be the same so hero text one has is 453 panamera should be 453 also four five three oh no no sorry 177 so hero text two is 177 177 and here on the next screen perfect but the animations are quite fast we don't want it we don't want users to um to be distracted by the very quick animation so i set animations usually to around 0.5 seconds and let's use the ease both for the second set same 0.5 and use both and what's great about principle is that when you uh begin using a 0.5 for example in these both for your animations a future interactions that you're going to add to this component are going to have or are going to use those animation settings so there's no need for you to apply is both in the 0.5 seconds for everything here so let's try that it's better super nice right that's it for our hero image for this next one uh what what did i want here uh okay so this is a bigger interaction so i'm going to animate this later when we're animating the page itself this one is quite challenging to be honest [Music] okay so let's start create component okay so for this one ah all right we don't want we don't want this entire thing to be a component okay so sorry so what i want to be a component only is this section i only need to focus on the this section here because uh this car this content is not going to change when the cars here are switching so this is going to be static content this is going to be the animating content so there's no need for me to make this entire section a component okay so i'm going to select the two cars and all right there's another mistake here i only need i only have the cool highlights so let's go back to figma there so you see when you when you have things really organized you know where to go when you have something missing and you know what to find you don't need to reorganize your files anymore so here i know that i'm should be looking for the cayenne highlights delete everything else that i don't want that i don't need select this frame go back to principal file import from figma and import selected frames so that's the advantage of having those super organized layers in figma when you have something missing um when you want to add another thing here it's going to be very lightning fast okay so you noticed that um what happened here i imported something that's 1280 by 720 pixels tall so that's why our my current layer or my current page in sigma or in principle was also adjusted okay so i don't want this to happen okay so i'll just cut the layer that i need here delete this page and restore this page to its previous height to show the next sections all right perfect and go back here all right okay so i have my cayenne highlights i have my highlights i have my cayenne and the cool car so let's move it a bit here ah i also need this button i also need that thank you okay so let's group this and make this a component make it slightly taller and add that carousel thingy that we took from the hero section thank you alright so what's our default car f car 2 f car 2 should be hidden okay and f 1 here should be hidden let's have a preview oh no is that the preview okay okay perfect so f car two as this disappears you want it to animate slowly to towards the left so we don't want it to immediately um disappear so tap this it goes here and here they should be switched okay and when they tap this it's going to go back to the previous previous state okay okay now the f card two should also be coming from the left side from here perfect all right so they're kind of switching from the left right and again see what see what principle i did here um it used the ease both in 0.5 seconds by default for things that i already copied so ease both same thing here select everything and ease both okay smooth smooth animation all right so the more challenging part here is actually animating this bottom um the the details here at the bottom okay so what do we want to happen um what do we want to happen here so we want um the cayenne so this is the cayenne pepco highlights should be visible iron highlights here should be invisible okay now for the cayenne coo highlights we want the cayenne cool highlights to come from the bottom one by one when we switch from this state to the state so we want to uh select them here let's hide the kai in highlights first and let's show the cool highlights we're seeing both cool highlights at two different states right so we want those to be 10 20 pixels down the screen and when we switch to the next state that they're going to be 20 pixels up higher in the screen yeah okay what happens when you tap you see okay so same thing here with the cayenne highlights on the left side under on the right side i mean so we want them to be 20 pixels down the screen okay and let's hide them again and let's show the cool highlights i don't know alright so let's try that oh no okay okay now this is going to be a bit challenging so so here ac ones all of the ones should animate together and all of the twos should animate right after the ones have animated so let's move them here one by one they're going to appear one after the other for this next state all of the ac ones are going to animate after the ac2 subanimated and they're going to animate one after the other uh ah also their opacity should be set okay so their opacities should also be set properly so currently ac2 should have zero percent opacity and ac ones sorry okay yeah okay so next let's leave it for now i'm not so sure about that animation it's quite complicated than any than i expected so for this one uh what's going to happen here is uh this picture is going to move from the left and this point this picture is going to move from the right so that's going to be taken care of later when we're animating the entire section for this one uh this is going to be an entire section uh this is this is going to be a component for the entire section so this is pretty straightforward compared to the rest of the things that we did before so um what we only need here is for m slides two and three to be invisible for now they we need this we need these things to be outside of the screen something like that okay and we want them to be slightly smaller so around 0.8 around 0.8 uh their original percentage of original size and zero percent opacity and when we uh duplicate this slide this is the one that we're going to move out of the frame we're going to make it 0.8 and we're going to make it disappear so for this next uh scene we want m slide two to take the stage with one scale and one hundred percent opacity and uh same thing we're going to do when uh it leaves this the stage zero point eight zero percent capacity and finally we want em uh slide three to uh take the stage 100 at one okay so what's going to be the interaction here so when they click on the arrow on the right side right arrow ah wait for this one why aren't you closing okay so right arrow takes them here again another right arrow this right arrow oh no this should take them to the next slide and this left arrow is going to take them to the previous slide now okay and the last arrow here in the previous slide all right let's preview this okay okay where's there's an m slide over here okay perfect so that's it for the slide and for this one uh principal actually has a feature for overflowing okay so we just want this section to overflow so uh there's a setting here on the left side where you can set the behavior of the page when there's a horizontal overflow so we can set the horizontal overflow to scroll let's preview that even though it's pretty small now that's not what we want to happen so undo let's make it static and let's group these things together okay and let's make this group the one with the overflows call for horizontal movement okay then this is where we want the scroll to happen and let's try to preview it here perfect okay now i made a mistake there the gradient should not be part of the overflowing uh feature shipping shopping tools is okay this is okay all right so the next part of the next part of this animation probably for the next 10 minutes we'll be animating um the way the different elements are going to move as users scroll down the screen all right so what we're going to do first is we're going to make this page a lot shorter okay so currently it's too tall for a web page so it's four thousand six hundred six pixels so let's set this to uh 720 pixels okay so let's group everything that we want to be inside that 720 pixel scrolling screen okay and let's clip all of the sub layers so we are only going to see this and let's make this uh let's make this a layer scroll so let's call this main content and let's also set the home page height to 720 so the reason why i group the main content i want to scroll uh inside the whole pages sometimes we may want some uh elements to stick on the screen while users are scrolling down the homepage right so for example if you have an avatar button here okay so what's going to happen is when user scroll down that avatar button is going to stick on the right side okay so um welcome to drivers so drivers are like drivers are like um triggers for certain actions that users do on the prototype so in this case our trigger is scrolling so we want certain things to happen when users are scrolling down the page okay so first we're okay with the home page with the hero screen so we want this part to animate when the user scroll down so before it enters the screen we want this thing here we want this text here to be slightly below where it is now and once it's animating up once it's animating up here we want it to move upwards what's going to be the effect so let's preview it here oh wait sorry sorry so i should add i should add a scroll why uh trigger here so before it enters the screen i'm i'll add a keyframe here basically then once it starts moving up i'm going to adjust its distance or its position on the y-axis so what's going to happen is you have that very very slight animation going on and why make it obvious there you go okay so you have that sort of parallax effect when the user starts scrolling down the screen right okay so uh we're going to do i'm going to do this to do the same um to some of the elements here and that's probably that's going to be the end of our prototyping session so for this state here [Music] let's move it down a bit let's add that trigger for the y scrolling and once it reaches the top of the screen we want it to be super high up here how does it look [Music] there you go so you have you have a 3d effector parallax effect so for this uh sections let's start where it's supposed to enter the screen okay move it to the right side to the left side adjust its opacity okay and adjust its opacity also make it transparent and once it reaches the middle or once the users reach the middle of the screen it should end where we want it to be which is here and the opacity should also be oh sorry this is this should be x capacity should be 0 100 should be the this should be x center x see that all right it's same with this next section okay so let's add an x axis tracker as well as opacity adjust the opacities to zero and to the left at the right then once it is called up we want it to be here and we want the opacity to be at 100 what else okay this is okay okay i think we have everything that we uh needed to prototype okay so what's the result of our prototype okay so from the home screen from the hero image what did we do here we added another state for the navigation right so when users hover on the nav screen they're going to see this okay awesome okay and when they tap on these buttons here the hero image is going to animate okay and when they start scrolling down um bits and pieces of the ui start scrolling up or start start moving up as if they're on 3d space okay the buttons are also working okay and now this is not perfect i'm so sorry for this this is going to take a lot uh this is going to take longer than expected but you get the point scrolling down um more animations that are triggered by the user scroll so from zero percent opacity the images from the left and from the right are animating towards the center where we want them to be once the users reach that part of the screen and for the milestones we have the carousel and for this part here we have the overflowing uh section that's really use really useful when you want to feature a lot of elements on one row and the rest of the sections now i forgot to animate something actually um this effect is cool but i forgot to put it here so let me just go back for a bit now the thing about drivers in principle is they're kind of like they kind of act like timelines within for your page when you're scrolling so if you're seeing this section of your website or your design you may need to go back to the zero timeline to the the zero spot on the timeline here in order for you to see the things at the top of your um at the top of your screen okay so what we want here is uh we want this to be scrolling we want this to end here somewhere there okay and for this group i'll clip the sub layers and i'll add a horizontal scrolling effect okay so as you can see there you go not perfectly there you go okay so that was easy and going back to the parent save the file show it in preview and there you have it a side scrolling drop down navigation for our car models okay ah that's it um [Music] do you have do you guys have any questions that's the workflow that uh you'd want to implement when uh going from an animating in principle from sigma so just a recap on uh what i i've discussed so far right um number one when you are designing in figma or when you are when you are preparing your prototypes in sigma separate your prototype or separate the files that you want to prototype in a different page in a separate page inside sigma so the reason why is you're going to break a lot of your layouts you're going to prepare a lot of states you're going to detach a lot of components from their masters so you don't want to mess with your design library so you want everything to be separated from your actual designs number two is you want to you you need to identify the main scenes of your prototype so for every section identify what the different states are identify uh what types of content are you going to show here when a user clicks on a on a specific button or or a navigation or what if it slides to the left or right okay um next is identify the different interactions that you want for your uh for your components okay so prepare your files uh with these animations in mind flatten all of the layers that you don't want or you don't need to animate um rename all of the layers so that um the layer organization is cleaner and you don't uh get confused once you're inside principle so flatten everything that you don't need animated or everything all of the components that have elements inside that you don't want animated prepare states as well um all of your buttons all over all of your navigations prepare all of the states as well as for the carousels and the bigger components and use as little nesting as possible as you have seen earlier in my workflow it was relatively easy for me to spot what i needed to fix because i had at most three levels or two levels of nesting in my layers okay and once you're in principle um once you have once you've got all of those things organized in figma once you're in principle it's very easy for you to spot things or to identify all of those elements that you need to animate so what do you need to animate first number one start with the smallest components start with the buttons start with the navigation start with a little interactions that you want for your carousels next focus on the animations for the bigger sections so those these are the these are the carousels these are the sliders these are um the bigger sections basically of your layout and lastly um you'd want to reserve the biggest animation which is the page animations last okay because once you have the driver set for your page for example it's pretty it's pretty difficult to go down to the uh rest of the sections of your website to animate the little components there right so approach it as you uh would approach designing with atomic design in mind so components first sections then pages all right so that's it um that's our workflow so far for animating using figma in principles the floor is open for questions okay can you can you hear me can you folks hear me yes okay so just a immediate question so is it possible to do the flattening on flattening on principle instead or do why do you prefer flattening on figma versus like moving into principle yeah i i prefer flattening my layers inside figma because once i get into principle i want to start animating immediately i don't want to get into the nitty gritty details of reorganizing my files because it's a lot easier to rename stuff in sigma it's a lot easier to find layers that you need in figma so as much as possible organize and flatten all of the all of the layers that you need in figma once in principle my mindset is in is uh or for animating already okay uh next question uh what if you've done already what's your workflow with um redoing an animation inside the specific question is what do you what if you've already done some animations to your file you have to change like the whole section so what's what's what's what's like the workflow that's going to happen in your head okay so yeah so for example uh navigation right hero yeah that hero or navigation so what if uh you came from figma there's a huge change that for example a client wants to um client wants to give or a client once happen wants to happen so how does that workflow workflow happened yeah all right okay so that's pretty easy and i think i've uh shown that earlier so what i usually do is go inside this component um identify what group this is in sigma so this is the main navigation group right so i'll go back to figma and spot that group duplicate it outside of the file and for example for some weird reason the client wants the utility bar to be dark so let's use a red color right not that red or something like that then he wants the text white and bold okay so i only need to import this thing here i remove everything else i don't need make sure that the this bar is flattened select it go back here import from figma import selected frames one image so it's just it's just one image and copy that layer through on top of this one delete the previous layer okay now figma has um has a feature that automatically detects uh layers that are already imported inside the page so we'll try that i don't use it i'm not a fan of it but it works sometimes so what i mean is for example here example um i want to change just this layout here or let's say i for some weird reason also client wants this drop down to be a darker gray all right so if you've changed a lot of layers in your file uh principle i think allows you to replace them once you've imported them in figma so i've changed the color of this background they've changed the color of the background the drop of the drop down so let's see what happens if i import this entire if this entire section to this uh component so file import from figma import selected frames uh what's going to happen here oh no this is why i don't trust that technique but uh there was there was a way for uh for example if if this if this entire page belongs to one file for example this file or this uh this frame figma is all uh principle is automatically going to detect what changed in the layers here and it's it it will just replace everything that you've done here so far as long as they're not inside components so it's tricky it gets kind of tricky if you miss something if you miss editing something from figma but that's my work around that's my work around just import that specific element that's a bit hard you know once you finalize uh once you finalize an element like moving into principle yeah so those questions where you were from ia and adiwali or adiwa hopefully i didn't pronounce hopefully i didn't put your pronunciation so a couple of more questions if you don't mind um is it it's possible to record in principle i think uh i think we've done that we'll record the animation in principle yeah yes okay so just uh you only need to uh view the preview here can you can see this and it has this little uh video icon here at the top when you press that it's going to start recording okay then when you stop stop so it allows you to choose the format of your record uh recording either video gif or progress then for the for the arrow or for the cursor you can choose from touch arrow or none you can also set the size and what's good about this is it actually has a setting for dribble so if you want to share your animation in dribble it's very easy for you to do so yeah that's how you that's how you share or record and share videos of your prototypes in principle something that's very tricky actually the next question sorry sorry uh all the follow-up questions can record it already right so how do you share that clients what's the process we send them we send them the video we sent we just send them the video uh that's usually the recording is a last resort for us as much as possible when we present these prototypes when we when we want to show these prototypes to clients we do so in um in an actual presentation because we want them to experience how it is to move around the website or move around the design when back when we back when we were still able to meet clients face to face so we used to have them uh interact with a prototype using the laptops or laptops and uh even the mobile phones yeah and actually principal has a mirror if you can see here it has a mirror feature for your device for your ios and it acts pretty much the same as the one for figma yeah a couple more questions uh so so what's your current workflow right now with um sharing principle and translating that to code so it's been a while since i last worked with you and what's like the process now with um sharing those to the developers in the team for switching out translating it to code what's the workflow so to speak um to be honest there's no easy way to translate the animations here to code it's a lot easier it's a lot easier when you're using framer but uh that's that's a different topic framer is a totally different beast um for principal it's pretty hard um that's what i could say um i've whenever i uh hand hand over uh animations to developers i need to i need to keep track of these things here all right these are these animation settings so but but it usually it's just one line of one or two lines of css right so you only need to identify the starting point what what's what's changing the opacity so that's one so from zero percent opacity to 100 opacity take note of that take note of the css then what's the animation speed so currently it's at 0.3 seconds so that's that and the the uh lin the animation type so is it a default linear animation or uh the ones with easing okay so these are the these are the things that i only share to developers so far i haven't encountered uh sharing super complex animations to developers usually when we do that um we just give them pegs the websites that we want that we want to copy instead of giving them um individual animations or animation settings from from principal but uh depending on the the type of team that you're working with um there are pretty talented developers front-end developers out there that whenever you're whenever you show them these animations they automatically get what type of animation they want they're going to set in css so they know that it's 0.5 seconds or it's uh in is is out they have this very good eye to detail when it comes to animation so when you're working with the developers like that it's pretty awesome but uh for others are you yeah but but uh for most of our workflow we tend to work closely with the with some developers and just share the css ourselves just to make sure that um the the animations are done correctly the timings everything especially if it's a slightly complicated so cool thanks for the question paul and amira from the recording uh question a while question if you don't mind so how different is the experience uh is there a prototyping experience if you're prototyping mobile screens and you need to switch from one screen to the next asks ask by red so like the mentality when it comes to prototyping something on mobile is it the same as something that you would do with web hope i hope i asked it right hmm so are we talking about the transitions here from one page to the next from one page to another i think uh i think overall prototyping ex yeah if you're mo if you're like uh prototyping mobile screens is the mentality this uh the mentality is quite the same there there's all there's just this added layer of interaction thinking when you're prototyping mobile screens because um you need to have you you need to specify more transitions when you're going from when you're transitioning from one screen to another right that's that's what usually happens when you're using mobile so for example when you when you tap on uh when you tap on one item on your navigation and it's going to take the user to the next screen how is the transition going to be is the screen going to slide from the left to the right are uh are the images going to be uh transparent are the is the previous page going to be darkened a bit and the next page going to be uh going going to slide over that previous page so you have those uh animations to keep in mind when you're transitioning or when you're thinking of transitions between uh mobile app screens when when you're when we're designing websites usually the transitions from between pages are pretty straightforward we just you just switch from one page to the next unless you're designing a highly interactive web page or web design where when a user clicks on a navigation item for example everything else on the page fades out and it's going to be replaced by uh the elements of the next page so if you're designing something like that i think the challenge is going to be on the same level as designing transitions for mobile apps all right um there was a question earlier uh i'll just go back to it back on my inside um was there is there a reason for preferring zero percent transparency rather than hiding the layer oh uh hiding the layer is not hidden layers are not animated you can't animate it in layers so for example if in state in the first state the layer is hidden and in the second state the layer is you switch the layer on to be visible the transition is going to be there's no basically there's there's there's no transition between those two states because on and off um layer settings are not animated so you need you need the opacity to be set for four to zero and one hundred percent for something to be animated from invisible to visible got it all right and then there was also a question about the timeline can you just show us how you brought that up because oh okay let's uh make something okay so when you go inside the component you're going to see different arrows here on the top of the screens so these arrows indicate the direction of the interactions when you trigger something on the first state or when you trigger something on the second state when you click on these arrows you're going to see all of the animated properties okay so in this case uh this is basically telling me that when i hover when i hover on this state as i go to the second state the opacity is going to be animated from zero percent to 100 okay so from zero to 100 and this is where we adjust the timelines as well okay so just like you just extend it set the animation type okay so if you want to set the animation or see the timeline for the reverse interaction just select the next arrow here at the top okay so all of the interactions are here in the arrows cool um i think this was a question asked a while ago um please tell me what is ask ready but there is a question are we limited to two states so for example um two states from one one interaction to another oh we're not limited limited to state yeah we're not limited i think you can add more yeah i think i answered it wrong a while ago yes anyway um i'll i'll leave the answer to you sorry yeah we can add as many states as we want here so for example when we hover the learn more is going to uh the second state is going to appear right so for some weird reason i want to add a third state where this entire section moves down a bit okay so when i click this up it goes here okay so hover tap got it so currently we're on the second state when i tap it third state when i hover out go back goes back to first state yeah so we're not limited you can add as many states as you want yeah i was assuming to uh if you tap once go to another top once you go through the other i apologize for that john daniel so that was the answer to the question i'm so sorry yeah do we have any more questions guys like um uh so so anjo paul eric are there any were there any more questions that were asked i think everything else was either answered by you or have been covered so far uh does anyone else have any other questions yes probably one or two questions before we cap off the night so yeah uh anyone else would like anything 9 pm already how long did it take you to learn principle monica sullivan asked yeah what's the learning curve it looks like it's a bit complicated the learning curve is of principle actual principle is a lot easier than sigma to be honest perfectly honest it's a lot easier than sigma yeah you can learn it overnight you can you can learn it overnight um i i never had like a one one week or three days dedicated to just learning principle i just applied it to a project way back in 2018 so because i i felt the need to have richer interactions richer animations for a presentation so i just went ahead and used principle and you can learn it overnight it's awesome it's awesome it's the same experience as well when i was working with you it's a pretty it's a pretty easy transition so yeah any other questions oh yeah uh at the question yeah a day other way can you add an animation effect while you are in the timeline on the same state i think you can right like uh since it's on its recent keyframes or no no when you add an animation effect while you're in the timeline on the same stage the better question is can you add multiple properties in each animation so um for example we're manipulating the x and y right so is it possible to add more changes yeah yeah yeah yeah here there's here's something uh very basic so for example uh i have a square here then in the next state i want this to be here on the right side and i want it to be this big and rotate 45 degrees so stop when i tap this next state boom yeah so you can animate a lot of properties at the same time did that answer your question at the whale i don't know yeah it was multiple properties yeah multiple property you can even adjust the color so let's try that boom so it reminds me of flash actually that's why um it was pretty easy for me to use principle because it felt easier actually than flash oh really oh my god that that says so much about my age [Laughter] oh god oh my god yeah this is easier than flash to be honest speaks a lot yeah yeah it's come a long way yeah yeah all day okay anyway um so that was that was pretty awesome action working right expect a better animation for this section it was a lot complicated than i expected it to be all right so yeah that's it thanks thanks everyone for staying up this late with us jobs take it away yes cool uh thank you everyone thank you especially nico for spending your like that was a cool cool session and hopefully those who will be rewatching this would be like you know would be helpful for them so huge huge shout out to nico for accepting nico is actually part of fickle philippines by the way so so before we cap things off i just want to thank everyone um hopefully this was a good way to cap off your weekend or for those who are not here in the philippines like hopefully this is a good like break to whatever routine that you're having on your side of a planet so um just want to share some last uh last minute links so uh for for our group specifically in friends of figma philippines we have a facebook group uh just search for friends of sigma philippines uh if you want to interact with the people who are there all of us i think i think all of us are there so just please go ahead and join um there are other people from other countries as well who are also there so please do interact with the community we also have uh friends of figma facebook page where we post our announcements especially um we'll be we'll be boosting our engagement with the community so uh go ahead and like the facebook page as well and if you guys want follow us on twitter which is fof underscore philippines and yeah see you guys all there hopefully we can interact more if you have any feedback please go ahead and share your feedback to the facebook group or you can actually interact with any one of us and just share what whatever whatever your thoughts about the format because sigma fridays is just all about uh very sharing of things that the speaker is willing to share and we're very thankful for that and yeah hopefully you have a great weekend ahead for us in the philippines we're having we're we're technically in the long weekend so if you're in if you're just starting your weekend then hopefully it was a fruitful friday for you folks and yeah um i'm sorry so yeah uh so yeah cool people are sharing last-minute links on the chat so my uh uh huge thanks for that so that i think caps off this edition of figma fridays from friends of figma philippines and i hope we'll see you guys next time yes thank you everybody thank you thank you guys thank you thank you thanks everyone thank you thank you thank you thank you bye-bye thank you everyone thank you thank you nico anjo you

Channel: Friends of Figma Philippines

Views: 4,310

Keywords: friends of figma philippines, figma, figmadesign, community, designers, design, filipino, principle

Id: IO78gqiGfsQ

Length: 123min 32sec (7412 seconds)

Published: Fri Aug 21 2020