UI Design live: Prototyping, Animation and Developer Handoff

good morning my name is mang i'm from design plus code this is the fourth live stream for the UI design workflow that i started last week and it's really exciting to see more and more people tuning in asking a lot of questions and kind of following the whole process almost from scratch from last week and sort of like allowing me to explain in detail how I went from the UI perspective but also from the UX perspective and everything ended bit in between such as the workflow the tools and the tricks and tips that I have been using so I was also able to answer a bunch of questions sometimes there are outside of the topic but always happy to answer since I'm a founder myself I started design code by myself from a book and now we are 15 people so I think this experience is also valuable to those who are interested in sort of like working remotely having a team and designing coding by yourself it's you know it's something that I love to share if it helps anyone at all so since last time we have been able to sort of advance a little bit and you know what is new now is the pricing page so the thinking behind this is first we're going to have you know more features such as we're gonna have comments we're gonna have certificates we're gonna have we're gonna try to allow people to submit their projects after completion of a course for example and they're gonna have like a profile which allows them to sort of like show this to potential employers after they finish the courses at design plus code and then show the projects that they have because I'm a firm believer that you know you have to be able to show what you have worked on in order to convince potential employers that you have completed such-and-such but more than knowing that you have completed you have to show them that you have created something out of this that you have shown creativity beyond what is shown in the course itself so for example you can use a lot of techniques from my sweetiepie course to build your own app and then you can submit sort of like screenshots of that app that you're creating that is in the app store and then we're gonna let you create a beautiful profile on design plus code with next to your certificate and you're gonna be able to show off to potential employers so that would be the goal and yeah you know someone asking where are the kids I've had great comments about the whole you know accident if you will because you know we work from home and sometimes you know Q is my son he's he likes to play around and come and see me it's unplanned but it can't it can't kind of became an inside joke where he comes by sometimes and you know my wife she doesn't know I'm live-streaming so she's just letting the kids do whatever they want and yeah you know it's just funny and now I'm just putting their faces you know as part of the the live stream screenshot and you know it's just fun but I guess some people have a kick out of it it's it's energizing some people say so that's great and you know I want to make this as organic as possible you know it's not like hey let's just condense a ton of knowledge in ten minutes it's gonna be a free flow one hour or you know and and roughly that to sort of like walk you through take your time and really sink in the knowledge that I'm trying to express during this live stream so some people say that they really enjoy some some of the tips and tricks such as the blobs for example you know I have another one you know let's start with this one I think it's really fun so if you look at this screen here the way that I see it is first of all you can see that I kind of started from these blobs and you know if you want to know how I did it it's in a past life stream and it's super easy it takes like 2 minutes yeah you know three steps max and basically we evolved from from this from this UI these blobs and we also play it with the stroke as well so we were able to take the shape of the blobs and sort of play with the stroke using the style the advance stroke with a round cap and dash with 200 comma 100 and then we kind of explore different angle meaning that you can sort of like rotate them and see you know what works what doesn't work takes a lot of practice for sure but this is what it means to be a designer you know you can be a technical designer but sometimes you have to sort of like take risks can use your taste your sense your aesthetic sense to be able to develop something using the same techniques as as another but having very unique resolves for your own so we have evolved from this to this and then we change the colours by sort of like looking at the gradient and you can say well you know instead of this I feel like I can use a different colour again this is something that I kind of explain how to sort of like play with the colours in terms of complementary and opposite colors and so on but this is where we are and I'm essentially using the same background but what I'm doing different here for the pricing page I thought well you know I'm gonna take these cards and I'm gonna try to make them a little bit more interesting right I I kind of used this layout here and it kind of evolved into this now we have sort of the title and the subtitle and details about the course who is it taught by we're gonna have a new feature called notify me which allows you to get notified about a new updates to a specific course or new update to a specific instructor which I think can be valuable because at the end of the day you might not be interested in all of the courses on a website maybe you are specifically interested in you know react or Swift you I and so this is what to know notifying me is for and we also want to add a little bit of you know sort of validation for some of those courses which allows us to get these feedback and create better courses for you so if we see that a course is popular then we can create more content for that specific course and in turn the notify me is also very good for that another thing that we do want to add is the ability to comment and question and ask questions this is something that a lot of people have been asking they want like a slack a slack channel a lot of places where they can ask questions of course right now we have the support is a one on one thing but at the same time you know there's only so much we can do with support and you know we want to also allow the community to communicate with each other so that if someone asks question maybe another person taking the same lessons can answer those questions as well so that would be the goal for this redesign as well another idea that I thought was could be really cool is to kind of share some of the the illustrations that we've been using and give more context to where you can find them and you know give credit also to the the author of those new situations I think this is a good direction in the industry to give more credit to the people involved the instructors the icon designers the illustrators so I think this is a very very good direction in terms of giving credit so this is what I have and then from there I thought well what if I use the same shape and what if I sort of like make it look like a pamphlet or some of some sort of a brochure and play around a little bit with the round corners and on laughs you can sort of select which one that you want to have rounded corners and which one you don't want to have round corners for example we can set the top left to not have rounded corners so it looks more like a like a book and and then I thought well you know before having the second layer I thought well what if I duplicated that layer so for example this one you know command D and then I would sort of like rotate around the same sort of placement of this and put at the background in the background so it looks kind of like the book is opening and I thought it was kind of an interesting effect so I kind of went with it and I tried to play with different angles for all of these other cards so another thing that I did was to add a bit of playfulness to the death I'm using a background blur as an effect and the color itself can be around sort of you know the background color so that it fits more into the context of the colors I can also use a linear background so now I can sort of like go from this lighter orange to the darker orange and and you can certainly use transparency to make the Bloor a little bit more interesting so you can see because I have a background blur there's a bit of a contextual color that happens here so this is taken from the wider background and the more that I do this like that the more that I put transparency the more that you see this sort of contextual coloring and I think that's that makes the design even more interesting as well so that's what I did and I wanted to show you that you can certainly do that you can certainly play around with the colors and the rotation don't be limited to sort of always the same sort of layout and what everyone else is doing I think it's important to really play around with what is possible and what works for your design you know I like to push the envelope a bit because people responds really really well to newness they responds well to something that they've never seen before and which is why everyone is so excited about the new iPhone everywhere every year every everyone is excited about new launches from designers that it respect because they know at the end of the day every time that something comes along there will be new technologies new ideas new concept along the way and that will challenge their mindset of today so another thing that I did with with this card here in the background was that instead of just using so let me just duplicate this first so that I don't lose it and or I go back to my steps which can be destructive so I'm just going to duplicate this and well or at least I'm gonna hide it for now and I'm going to duplicate the main element I'm gonna select the background one so you can see here if I move a little bit you can see and what I'm gonna do I'm gonna show you a plugin that I really like in figma it's called skew that so I'm gonna go to skew that by the way you can go to the plugins in community and you can go to let me just search okay and I'm gonna go to plugins and you can search for skew that it's really good for creating perspective to your vectors and it's non-destructive which is really awesome so what I'm going to do here I'm going to use that and for the background layer I'm going to move it and you can see it's really interesting that what what is it's really doing to to the element it's creating a 3d perspective and then you can sort of like play with the anchor point after that so now you sort of like have something that is you know adds a bit of depth to your design and there's a cuteness of it it adds a sort of like a 3d perspectives so what I use was I think I use a vertical skew and I was able to sort of match the anchor point from the bottom left so that's how I managed to get this result and as you might guess you know the rest is just back on Bloor and gradients and and sort of like you can see that thanks to that that ability we have this really interesting blurriness and gradient going on you can see it a little bit of the shape here that is being blurred so that's what's creating this effect here and you know like I said play with it have fun with it you know the sky is the limit now for the rest you know we have compare the plans I think for a pricing page is always good to be able to compare what people are paying for and what is the difference between a free account versus a pro account the other thing I want to I want to mention which is sort of an announcement is that first of all I want to say I'm really enjoying doing UI design and it's really useful for me because it in every single course that I do including with you I react for designers all of the UI that you see that we're building are created from scratch right like I spend a lot of time to come up with these concepts so let me just give you an example I'm gonna go to design code so for example for the react for designers course we use the the website here which is online which is design code that IO and we essentially take teaching the techniques for implementing that design for the figma course we're using also the design for the you know for design code that IO force with UI we have a different UI that I try to always build something to explore ideas so you can see that this is simply design code that IO but in a different format using a lot of design transformations to get to this point and then you know we're able to explore new animations new interactions and we have like 60 videos with UI is like super fun I know I speak very highly of with UI but believe me it's it's changing my life and I love it more than anything I've ever used in the past five years it's so so good and and I cannot wait after WC 2 to continue on that journey because I have you know as much either gloss with UI a lot of people have been asking about react courses about UI design course about framer and so I'm happy to announce that I will be doing all of those as well so let me explain what I'm going to do here first of all we are in the middle of redesigning design code because it's two years old and we have a lot of new features and such as certificates commenting rating notify me and we also we're starting to create more and more valuable courses compared to the past right like before we were exploring a lot of courses and a lot of them didn't stick so for example this bright kid didn't do as well a our kid didn't do as well after effects or sketch plug-in even sound design but more or we're getting we're getting better at this and that is all thanks to your feedback right and more and more we want to create courses that really resonate with you such as react for designers design system in figma is still one of our top courses today and this is like almost two years old another one that is doing really really well is with UI and you know in fact it's with UI we are almost reaching a million views on the Swift er course it's a paid course it's not a free course and still we're able to reach a million views on this course which is insane this is saving our company this is what allows us to to do well even in in a time like this as you know a lot of people are you know losing jobs and it's it's really a bad situation right now but thanks to two remote work thanks to if you are lucky enough and I consider myself extremely lucky to be working in front of a computer and having a remote team and being able to design on a digital platform thanks to that I'm able to still have a job and still do what I love and you know serve something that makes people happy so that's what I want to teach you I want to teach you how to get on that and to to sort of if you're not someone who is a designer or a developer you come from a completely different background I hope this live stream is helping you and I want to take the time to sort of give you this advice to sort of get into what we can do here so Swift UI is really good and I created this is the biggest course I've ever created in my life we have 60 sessions and we are covering so many topics from UI to animations to even like data a lot of people even learn API calls from mice with UI course they've never done API before because normally is too scary for them but to be able to learn it from a designer perspective allows them to digest information very easily so this is what I'm trying to do my job is not to get you to necessarily like a hard percent of the way but at least to get you to a point that you can't be dangerous and you can find a job that complements your main skill either is is it the developer or a design skill right like if you're a developer then you can certainly strengthen your skills in UI and InDesign and if you're a designer you can certainly strengthen your design skills by being able to prototype and to be able to work better with engineers which in turn is extremely valuable to your company right so that's my goal and so yeah I am planning to launch four courses that I think are valuable by this summer and they will all be centered around the design that I'm doing right now what are those courses the first one which should be launched in about two weeks is the UI design course so everything that I've talked since the first live stream and more and way more because I'm going to be you know adding a lot of content and sharing the source files the design files the techniques the the icon files the illustration files all of those things will be part of the UI design course you will be able to download them to use them commercially if you do have a subscription okay and in fact if you are intending to subscribe do it now because the current price is 108 soon it's going to be 1 144 and for the monthly subscription soon it's going to be 19 right now it's 15 so you will have access to the same content even after we upgrade but the price is going to change that's all so the first course why design the second course that I want to do is react for designers or at least a new to a new form of react using the new design new techniques new animations we're gonna explore a lot of things I like to think that I have sort of mature a little bit over time in terms of the way that I teach hopefully you're enjoying sort of this new approach so that's the second course that I believe a lot of people are gonna love the third course which I'm still considering but a lot of people have expressed interest which is framer framer Webb would allow you to sort of like not just do quick prototyping in the design tool but also to look at from a coding perspective to use react so all of those courses are going hand in hand which is something that I love because you know it's it's it's really difficult to take new courses if it's from different teachers it's from different perspectives it's very theory heavy and you know you're not building much but what I try to do with my courses is to make it holistic so the UI design course is going to sort of like evolve or at least it's going to allow you to have a lot of context from from that in terms of like moving on to the implementation side in framer for example and then we're gonna look into building a real project and react and then finally the fourth course is going to be sue I again because I love so if you I and the reason why I'm waiting right now is one I have to get off I have to get up so if you I otherwise I'm getting too addicted second you know I'm waiting for dub dub DC so I'm absolutely waiting for what Apple is going to come up with after this summer to see if they're gonna come up with maybe swifty I for web so if you buy for Android I don't know what's going to happen but I know there's gonna be a lot of exciting new stuff that's going to be released and I'm going I'm going to use that opportunity to teach you those new techniques along the way so hopefully you're excited and you know hopefully you if you have any requests in terms of like what courses that can be stemming from this and at the same time it's going to allow me to sort of like spread this UI not just for web but for mobile and also for iOS and Android so it's gonna allow me to flex my UI muscles and redesign and transform my design and adapt it for Android for iOS and then for for mobile web because those are three things that are completely different do not think for a second that we are going to just get lazy right we're not just gonna use the same design and just drag and drop and then use exactly the same thing okay so and that's why I'm trying to teach you in the UI design course so we are going to look into for example this is the course page and the way that I designed it first of all we're using a lot of the same features so we have the title subtitle then we have the main content we have the navigation this is a bit new so we're trying to look into how we can allow the whole curriculum of the of the course to be seen and sort of like look in order so if you compare it to the current layout you're gonna see that this is what we have right now and I think it's a bit challenging right like it's it's hard to read and also you know you have to scroll and it's easy to get lost so I thought well how can I create a UI a little bit more easy to digest and so this is what I came up with and I think this could be a good thing to be able to see the number the ordering where you are within that course if you have completed in terms of like the progression of the course and yeah it is this feature is going to be merged with our little bottom left navigation here which a lot of people don't see to be honest this is a bit of inspired by the Android sort of action button and I see this is a paradigm that is being used a lot on the web nowadays you have like this bottom right for intercom chat for example and sometimes you have you using this space for an action button and so this is what we have I'm gonna I'm still gonna keep that but at the same time I do not want to only make it available through this which is why we want to make it available here as well so as as they scroll down you're gonna see the whole curriculum of you know of this and so the frame rate is is the frame rate bad right now but uh I think I haven't really changed anything maybe it's my internet right now but let me know if it's good otherwise there's a recording of this video so you're gonna be able to watch it again hopefully the frame rate is better when you when you do watch from record it's session so you can see I'm still keeping this menu and when you click here it's going to show this menu and the bigger the screen the more we're gonna see the number of columns so if you are on a mobile you're gonna see a single column and it's going to be spread out vertically if you are on the on a bigger screen like desktop we can certainly get into a second column or even third column I definitely don't want to maybe make it too big so which is why we have less padding it's important to have a lot of negative spacing it looks better so for example you can see here I'm I have a lot more padding verses here it needs to be more condensed so I have less padding because at the end of the day when you have you eye that is sort of isolated or you eye that has to be on top of of something else the approach can be different in terms of the way you use the spacing so this is what we have on when you click here you should be able to see this I would love to play with sort of like the Apple watch ring progress when you click on play the number of minutes remaining we will have the number of likes again for validation we will also have questions and answers as well as comments just like as an Amazon product we want to be able to allow people to quickly judge and get their questions answered while taking the course or if they're interested to take the course they can look into this now I think we can move on to the first stage of prototyping first of all I want to show you quickly how we can turn this design into a mobile format would you be interested in that I think that could be really fun first of all we're going to create a frame okay the frame we will have a selection of different resolutions so the one I like to try with or at least that I like to to start with is the iPhone 11 Pro and it has a resolution of 375 by 812 you shouldn't remember these numbers by heart and then we're gonna see how we can sort of like adapted this design to this UI right like this would be the mobile format and it is important when you design for the web that you adapt to the bigger screen to the small screen and also for the iPad those are the three main break points that you should be adapting to all right so let's start with the background right like that's kind of like a background element and then we can go into the front element so I'm gonna copy and paste make sure that you group everything this is one of the key thing about UI design especially working a team make sure to name all your layers these these names by the way are useful not just for you not just for your team of designers but also for developers because believe it or not especially people who are not native English speaking people developers they they don't know how to to name those elements right like they don't know that okay well this is the top menu or this is the courses section they might come up with a completely different name like they could say I don't know big list 0 for you know who wants that right but we don't want those super abstract names so it's better that we communicate between designers and developers and say hey let's have let's come let's come up with it with a naming convention and maybe since you're your native native languages might not be English I can help you right and so it's important to name this and especially for the type the type the typos I've seen often times when I work with developers you know like they may you know inspiration the type inspiration without the eye or you know like they make these these types it drives me crazy so yeah you know like having those names is really good so the first thing when it comes to adapting of course artworks and elements are gonna be way bigger on desktop so we're gonna have to scale down so you can use K to scale down don't use just V or like a normal resizing because if you use a normal resizing the rounded corners and the drop shadows values are not gonna scale only the sizes of the rectangles that are going to scale so you would you would use the the K so the K is like if you go here on this menu here you have the move which is V scale is K and this allows you to scale everything the properties the rounded corners the the shadow values the stroke values so you're gonna see I'm going to scale it and now this is sort of like my first step okay I just want to make sure that I have enough space to put the content so when I mean by content is the top portion so we have the illustration the title subtitle next let's let's bring the cards copy and we're gonna bring it here again we're gonna use scale and by the way scaling is something that you can do in you know in encode as well so you there's a in CSS you can scale it and you know it can look pretty sharp now when I say scaling I don't necessarily mean you should use it at all time sometimes with text it's not good it's really it's scaling is fantastic for animations but when it comes to actual content that is static I would avoid scaling but sometimes you can use it especially when there's no text involved but anyways I'm gonna do that and we're gonna we can fix the text a little bit later so let me just scale this so that it fits into the screen and that we have enough padding so I'm going to Center this and we should have at least 20 interval padding from the left and the right 30 is also not another good number depending on how big your element is and how dense the information is for your UI as I mentioned before there's a difference between like say an article versus a design tool or I don't know a camera tool for example like a camera too needs to be more condensed in term of like the spacing that is being used so I would probably use like 16 if it was like a camera tool with a lot of buttons and tools involved but if it's like an article and a landing page then you can certainly use a 20 or 30 in terms of padding so that's kind of like proportions now I move this and let's take a look at the the textual content so I'm gonna copy and paste this obviously this is too big so a lot of designers one of their biggest mistakes is that they are not familiar with the Iowas guidelines the Android guidelines so they think that oh this is this is fine you know like it's fine right but it's not because there are different rules in terms of the standard font size for your text so for example a title should not be more than 34 unless it's I don't know you know it's a logo presentation or a brand presentation or something that is out of the ordinary but if it's normal text within titles it should be about 34 this is what we call in iOS the large title and that's the size and then we're gonna look into I'm gonna get into framer for those asking about framer I would say it's still very new but it's it's very interesting like I said I'm going to get into that for now I'm still focusing on the UI design so that we can get prepared to the prototyping aspect so now we're gonna look into the body text right now it's 30 it's way too big for body text usually in iOS is about 17 so there you go just from from these steps it looks a lot more like an iOS app as soon as you know these standards you can really easily adapt your design without a lot a ton of effort or redesigning the whole thing from scratch you don't want to do that so yeah make sure that the text stays well within the contrast so white should not be against the white and black against you know like maybe a lighter purple if it doesn't have enough contrast for example you can use a drop shadow so you can see that without drop shadow is a little bit less readable but with a drop shadow it helps a little bit and yeah this is what I have and the rest where we're essentially designing for mobile web so I'm just gonna bring the logo to the top left and I'm gonna use a padding of 20 from the top 20 from the left and then we're gonna have the menu on the right side which essentially is going to use the same sort of circle and we're gonna put it 20 from the right as well but instead of this local we're gonna use another icons such as menu this is from the assets of shape to icon library that we have here and we're gonna have like over 1300 icons very soon in 40 in five four or five different styles by the way not just in one style so we have like this and colored outline and fill and in call it fill and we also want to have a lot more styles for you to play with so that it can really really extend to the branding that you want to have so here I have the hamburger sort of icon and I'm gonna set it to a selection color of white so what I can do is I can also set the stroke width so right now is 1.2 but I can also set it to let's say 1 if you want to be completely pixel perfect you can set it to 2 depending on what is the standard sort of like stroke size of your app or even the icon size that you have and so this is what I have and you know you can also change the color to make it more interesting so you can have like one that is white and the second one that is like slightly purple and then this is your menu and that's it this is all I needed to do to to adapt maybe I should have liked the play button the play button I can just copy and paste here and creating a bit of depth we can place it right here and now from this we can start implementing the animation now the other thing that I wanted to mention some things on perhaps not good so for example here like I mentioned before the text can become too small and in this case it's at 10.43 this is this is where I would suggest that you test this on your phone you're gonna be able to preview use preview this using the figma iOS app you're gonna be able to stream this to your iPhone and you're gonna be able to see if you're able to read this easily and that is a very important stage to you know to get it to production now I know by heart that the font size should never be below 11 in fact I would even go to 12 or even 13 but let's see 12 and this should be a lot better but also you can decide that some of these elements may not be essential to the mobile experience right because when you click here it goes to a website sometimes it can be in a way so we can essentially say well I'm gonna I'm just gonna omit this for you know for the website you know or for the iOS app so it's your choice right like it's it's a decision that you have to make based on if it makes sense if it's essential for your UI but yeah definitely test this now we're gonna get into animation I'm gonna name this to mobile and when it comes to animation or prototyping sorry the first thing you want to do is to create a flow to your app okay so you have several pages and you want to be able to navigate and that's sort of like the biggest win you can you can have when it comes to prototyping and it takes maybe five minutes to do so okay so let me show you how first of all we're gonna need to switch to prototype and then you're gonna you're gonna want to connect the navigation elements okay one key rule when it comes to navigating is that you should apply it to the master component you create a component that is that exists in every single artboard and so a component for those who are not aware is a reusable element that is shared across multiple screens so for example if I change the the wording of tutorial and rename it to work it's going to change across all of the other instances of that component in my UI so this is what a component is and it's very very useful for reusable elements such as buttons such as menus and design systems components so it is uh I'm not at that stage yet honestly when I'm at sort of like the first stage of UI design I don't want to get into using component yet because as soon as I use components I sort of like block my mind into thinking well I I don't want to eat I don't want to change it too much because it's going to influence too many things and so I as a designer one of the the challenges I would say is what kind of strategy that you can come up with to not limit your creativity and flexibility so I always up with things that are very liberating and and and makes my life easy and and super quick to do rather than getting into the needy and greedy and just spend hours and hours just organizing my files before even having a finished design or something that I feel that I'm really really satisfied with creativity right so that's why at this stage yet I haven't really set up a lot of components only for the ones that I'm reusing a lot so for example the menu I'm reusing on every single screen which is why I have set this as a component but otherwise you can see that I haven't said components yet for my course or my my teacher component because I'm still editing it you know I'm still brainstorming I'm still experimenting and because of that I don't wanna I don't you know I like to keep different instances or different ideas and different iterations and and then once I'm satisfied and sort of like confident with it at that point I can create a component and especially when I have enough confidence to share it with the team so that they can sort of play with it and start coding it or start creating a design language out of it or creating more pages using the same components then yes I can I can get into those details but yeah back into prototyping you want to have a component for your navigation because once you set the navigation so for example I want this button to click so let me just delete the interaction first so that we can start from scratch as soon as you are in the prototyping mode you're gonna see this when you select on any element you're gonna see this little circle which is the handle that tells you you can connect it to another screen in terms of navigation and interaction so I want to connect this so I'm dragging it to the courses screen and here I have the ability to set the interaction by default is going to be instant which is perfect because that's kind of like what most designers are doing right now it's a quick prototyping but once I do that from my master component it's going to apply to from all of the the other screens that are using the same component and that's the beauty of it so I didn't have to set this manually right and that was the goal so for example now this is an example I could have like use the Mac the master component and linked it to the course landing page for example and suddenly all of these buttons are also connected to the course landing page again as little time as possible for prototyping and once that is done so I have pricing which is connected to pricing and you know that's it now you can click on planning on the bottom on the top right and you can start testing the flow of your app so you can see I go to course I go to tutorials which is you know connect it to this page go to pricing so this allows you to really like quick what we call a quick overview prototype or a flow prototype and it's even allowing you to to navigate you can set up like the scroll well the scroll is happening by default if you have your artboard set to bigger than you need then your screen size it's going to scroll by default there's also the ability to to have a sticky header and/or I scroll a zone which is very easy to setup and yeah you know this is what we call the quick flow prototype but I'm sure a lot of you already know this and this is very easy to learn anyways I'm gonna move on to the other side of prototyping so the more interaction prototyping so when it comes to interaction prototyping and what I mean by interaction prototyping is like a hover State for example so if you mouse over let's say this button you want to show this menu right if you wanna want to show like the hover state of this button how it's going to look like now if you are going that route it is important that you isolate your interaction elements and what I noticed that a lot of designers are doing is that they would create a new page just for that and the reason why did they create a new page is because if you have your mo your main flow prototype in your main design page then your flow your interaction prototype is going to be in a way and so you want to be able to quickly see that and oftentimes when it comes to prototyping in the design tool there will be glitches in a sense that if I was to add interaction prototyping on top of the flow prototyping and I start navigating and then I start duplicating artboards it's going to create a lot of conflicts it's going to create a lot of friction against all the designers work we're working on these files and so this is not recommended it can get complex very quick when it comes to interaction prototyping so instead of doing that you might want to copy your your artboard and you're gonna create a new page I'm gonna create mobile right and in here I'm going to paste this so I'm isolating this and I'm going to play with the animation so at this point what you want to do is duplicate the states so you have the first state and then the end state and at the end of the day you can just say well maybe I want this this background card to rotate so what I can do is I can rotate it and I can move it okay and then I'm going to select what element that I want to be interactive okay so I'm going to select the entire a stack of card and then I'm going to connect it to the next screen but this time it's going to be a different type of interaction it can be a click it can be mouse over while pressing they also like sort of a gamepad setting or I mean keyboard key stuff mouse enters so this is if you want to be more specific into the hover States because there are many slight differences but you know while hovering is good for the hover effects and tab is good there's also drag but essentially what you want to do here is you can set to navigate to and the the the key play the key place that you have to change here is the animation set it to smart animate instead okay so now when I click on play and I think that I'm gonna have to close because there's a bit of conflicts going on so now it's going to jump directly to that specific page that I created so you have to close your prototype and then you have to go back and play from that page and now when I mouse over I see the transition using smart animate right this is very simple if you're doing things right I think the frame rate is it's not too bad if he gets more complex like especially from for web prototyping this can be not very performant but this is what we have so far and very easy to do next thing we can do is it's got next thing we can do is maybe go in to also the prototyping of the play button I'm going to go back to mobile and I'm going to paste the play button put it right here make sure that it's centered and now I'm going to move this make sure to copy and paste if you have new elements make sure to copy and paste on both sides and so you can sort of like have different interactions we can move it by 10 pixels for example and now you can see that it's moving at the same time now this to me is enough okay and personally I would say that don't try to go too deep into the prototyping and if you if you want fine you know if you want if you don't want to get into coding fine you can go deeper but it comes with a cost so for example if I wanted to say okay so I want this to move only after the cards are unfolding right if I if I needed to do that I have to create a third frame and then from the third frame I would have to set a I'm gonna go to prototype and connect to the third frame and instead of unclick it's going to be after delay and it's going to be 1s okay but I'm gonna show you what why this is not recommended well at least I would rather use another tool to do it so it gives me the effect right so I'm gonna go well first of all you can already see that I'm not coming back the wall hovering allows me to quickly go and come back but now I have to set States on across three different elements so meaning that I have to manage these three instances of these of the design to be animated in three different things if you have a change here unless this is a component if I have a change the animation I have to go back and you can imagine you can get lost very very easily so let me refresh right so it does the delay after the card unfolds but then the problem is you cannot come back anymore there's no longer that idea of while hovering you have to set another interaction here that says well after clicking I'm gonna go back to the first okay so with that keep keeping in mind I'm not saying it does not work for some cases I'm saying that more often than not it's going to complicate you or your workflow rather than simplifying it instead of taking five minutes to create your prototype it will take you know ten minutes and and incrementally five minutes more every time you update the animation or you update the UI which is why coming back to the point of being a designer you don't want to make your design irritating to you to to maintain because if that's the case then you don't want to design anymore you don't want to push ideas anymore you don't want to push concepts anymore and that's why there's a there's a danger to setting up constraints to your designs which is why personally I do not recommend you know getting into the bigger things the the micro interactions and just set very simple states you know like okay so I just want to know how it's going to look like from this screen to this screen and how it's going to look like roughly with the the animation timing if it's linear if it's easing out what is the the duration of my animation should be is it 800 is it 300 and so you know that's it you know here I'm just gonna move this a little bit and hopefully it's gonna work alright so you can see that my animation is slower but you know play with this that's enough and still have fun with your design and come back iterate more and and have fun when it comes to the more hardcore prototyping when I say hardcore I mean like super microinteractions things that would make you an awesome really sought after designer in terms of animation first of all if you go to dribble there are so many great animations a lot of great talents speaking outside of the the realm of if it's feasible or not of you if it's um you know if it should be made real or not a lot of these things will never see the light of day in the actual app and the reason why is because the designer is completely separated from the developer but it doesn't is that it does not invalidate the skill involve and also the techniques that that makes these things interesting that should push us designers to to come up with better ideas right it's it's a good place for inter in experimenting and getting inspired and see what can be done but if you see if you look at some of these animations this would be extremely difficult to do in in figma just because of the delay involve how many artboards that you would have to create as a result just to give you an example I'm gonna go back to figma not this one not not from the browser but from the desktop app and I'm gonna go to community I'm gonna search for smart animate because they do have a template a smart animate right so I'm going to I'm going to duplicate this which allows me to see the example so again if if you want to take this path you're scared of coding if you're scared of using another tool like principal which does a far better job and way better animations that's fine that's that's your choice but this is just for those who want to get further this is an example of the complexity that can happen and I'm not saying this to say that the the figma Sigma is not good or the team at figma is not doing good job I think they are doing an amazing job I'm saying this to give you a true idea of what it's like to be a visual designer who has to sort of develop these prototypes and maintain these prototypes so let's take a look at the preview right this does not take five minute to do like this honestly takes a lot of time to to to sort of like organize to come up with conceptualize and then to maintain after if there's a change whatsoever it's a lot of work but we're gonna look at it so this is the animation it's not great I wouldn't say it blows my mind but it does some some pretty good cool stuff such as you know when you refresh you know the application is loading so it does a bit of a rotation there's a bit of a slight effect still applying that delay of one second and and going to the next screen to the next screen you know and then click it to the next it's good for the flow it has some really cool interaction such as you're able to scroll and you're able to to swipe and again this is using the sort of magic move I'm just lost with all the names because each platform have their own name like XD is auto animate figma is smart animate framer is called what is called magic motion keynote is called magic move so there's like a name for every single platformer I can't just keep up with all of the names but yeah you know it's essentially just different states if you look back to the document it's just different states from this swipe for example you know I'm not sure which one is I have to go to prototype but you can see that from this one is using on drag gesture and then the unrack gesture believe I believe that it has some sort of like a default direction probably from right to left or something like that I'm not her percent sure if there's like the ability to set the direction of the drag but let's say that it has just one direction and from there you're going to the next States and then after that it's just using a delay so after delay one seconds which is 1000 milliseconds and then from that delayed going to this screen right so that's essentially what we're doing here and that's why we have this really cool really cool interaction all right but like I said this is great for designers who will never never want to use another tool and who he likes who likes to stay within the same tool but to say that this is enough to to make you into a like an amazing animation designer motion designer or prototype er I would say that's a bit far-fetched depending on the company that you're working for but let's say you're working for Apple you're working for Google you're working for Dropbox this definitely would not be enough to sort of like show developers hey I really want this animation to be incredible okay so let's see what our options are when it comes to making our animations more incredible than this I'm going to take a look at the landscape so we have principal app which this is Haile as one of the best prototyping tools in terms of animations in terms of like all the things you can do even like having multiple screens microinteractions within those screens we do have a principal course taught by about by Daniel that can help you quite a bit we also have Flint Oh which is like principal but slightly different in the approach but extremely good as well we have in vision which is another design tool just like just like figma but I would say that the prototyping tool is a little bit more advanced we have Adobe XD and I believe I haven't really used it personally because I have already so many tools that I use but a lot of people speak very highly of their prototyping capabilities so you can definitely use Adobe XD for creating your you're more microinteractions and then there's framer so framer just came out and I kind of want to speak about this because I think I find it interesting because you can use animations you can use code you can use components you can use overrides you can export it to react code to some fashion I'm not saying it's gonna go all the way to creating an entire app from framer and an exporting the entire app to to to whatever platform I don't think any tool like this exists and if they are then you know show it to me because like all the ones that I've seen are just not there yet okay but where we are today is for an app to be able to to prototype and to create real code to use real code create components and hopefully at the end of it use the same techniques some of the same code that you can use and react and be able to sort of like reuse a lot of that if not a hard percent of that component in a react to the final product so when it comes to design systems this makes a lot of sense so [Music] yeah I just want to read some of the comments yes okay great so like I said if you want to build an entire app from a design tool we're not that year yet maybe it's gonna be next year maybe it's gonna be in two years maybe it's gonna be in five years but it's not this year so let's just get that off the out of the way but you can definitely advance your prototype advance your coding skills get into Swiss UI getting to react and you know especially if you want to be able to reuse the things that you have started right a lot of designers work in a vacuum they start something they span weeks days on a super wild prototype only to be to be told that it cannot be done by developers only to be told that this is not going to be making it to the production only to only to have to waste it later on all of those hours and I'm saying it's bad I think a lot of companies can do that it's fine you know like if you're inside a big company a big team that's fine in my team we don't want to do that ok in if you are alone with one or two people in your team you don't want to do that so for those people who are on the same boat as me there's framer there's with you I there's a supernova there's let me just make sure that the supernova app they keep creating really cool updates but definitely like it allows you to export the code as well but framer is it's a fantastic tool they have matured a lot over the years and there are fantastic examples they have the magic motion on his mash motion frame emotion again I'm super lost in the names frame emotion which is a react library allowing you to use this independently from the design tool but using exactly almost exactly the same code and definitely exactly the same techniques that you would use in framer the only difference is that the component names are slightly different and yes a pro to PI I do have a course about prototype sorry like there are so many prototyping tools but proto Pi is it's fantastic what I love about proto pay is that you can use a little bit of the coding techniques without the code so what I mean by that is that you can use variables you can use device accelerometers you can use what else the camera tool you can use a lot of things that are normally only available natively you can use it proto PI to create your your prototype so I do have a course around proto proto Pi which is very popular in fact so definitely recommend you taking it if you want to get into the more microinteractions prototyping but those are some of the best options outside of the realm of coding so let me get back to framer its new a lot of a lot of designers are speaking very highly about this and I have had two courses in the past unfortunately they have changed a lot and so because they have changed a lot some of the techniques that I have taught in the past will not work anymore even though a lot of the code will still work but for those who are not familiar with the code will find it confusing which is why I want to redo the course and fYI I'm not sponsored by IRA figma framer or any tool at all so my opinion is my own and I want to make sure that this is as impartial as possible to give you a good overview of the whole landscape of prototyping as much as I can from my perspective so let me sign in and let me just hopefully yes login and here you know one thing that is very cool about the new framers that they have a lot of examples and it all exists on the web it has a lot of the great features of Sigma what I mean by that is that we have collaboration you can have a team working simultaneously on the same project at the same time they have the feedback feature so I can invite people in my team right I can invite people in my team they can be viewing they can I can see their mouse moving they can change they can make the changes and we can work together on the same files so that's fantastic framer is not only focused on protocol and mobile prototyping you can do web Prout you can do web design you can do web prototyping just like figma it's just that because the screen is bigger for web you're gonna see a lot less of the the prototyping for web because it suffers on the performance it suffers on the maintenance aspect and so you're gonna see a lot more on the on the mobile side because it's so much more manageable to prototype in a small screen than in a big screen and so yes they have all of them all of the same features it's also free up to two editors unlimited viewers and three projects so you can definitely give it a fair try and you can do a handoff for example and you know they're gonna be able to see a lot of the same features that you will find in an app like Zeppelin or a vocoder I'm not saying that it completely replaced them or even abstract which is all of those tools are fantastic for handoff let me just give them a fair shoutout I'm gonna go to their website so avek ode is it's really good for handoff so we're gonna get into more in the details of this there's a go apps used to be a go abstract but now it's abstract this is also for versioning but as as you sort of like create versions of your design you upload it works with sketch really well so those people who are good for the designers who are working with sketch and XD now assume they are working with XD you can upload this you have version you also have the handoff elements you have the export and then we have Zeppelin so all tools extremely well rated by users so let me go back again I know where we're starting to have a lot of tools now you know a good thing that I've been doing this for a while because otherwise I wouldn't be able to keep track of all of these things but you know it's my job to kind of give you you know my perspective into what is available to you what what are the options for you what clicks for you going back to two framer so now I'm gonna go to the to do now we have microinteractions I'm going to make this a little bit bigger and it's a little bit more manageable but there you would have similar techniques to the one that I just showed you in Sigma meaning that if you want to have delay you might have want you might want to duplicate the artboard and add an delay to it but at the end of the day you're gonna see something like this it has the SVG animation on the check box it has you know the the magic motion thing going on and you have multiple states right this is good but I don't think this is I think up until now this is something that you can most likely do a lot of the same things in figma as well now where framer shines is that they you're gonna see that some of these things are components that were actually written in code and what I mean by that is that they are interactive so if we look at this check box I can go to the options in the check box and suddenly I have a lot of states right I have disabled state I can decide to have you know the border color and all of these things and they are interactive and so these are what we call code components and they are both created by the figma the framer team and the community and they're there you know since you use you can use code you can make it more adaptive you can make it more animated you can make it more interactive and dynamic in a sense that let's say you want to connect an API from and you want to pull like a live count of the time here for example then you can do so so for example I can go to insert and I can go to public packages and I believe they have like iPhone X components and here if I install it last time I mentioned that we didn't have we we didn't have those public pack packages but I was wrong in fact we do have still the same public packages from the previous version of a framer which is favorite playground and you can see I can bring a status bar and this is the time live and that's really interesting so I can set it to 12 hours I'm not sure if he's still working but this is you know it's 11:49 for me and you can set it to real time or not so this is connecting to some for some form of code and you can change from dark mode to light mode using these settings so that's what makes framer way more interesting because you can have these called components that can really take your prototype and app not just prototype it doesn't need to be sort of like a prototype so I can in there's way more stuff you know and it's not just it's not just you know the public packages did they also have the components created by the team so for example I can look into I don't know if it's here no this is interactions default components so we can look into input for example and this is using you know react code and HTML and if I preview this I'm going to be able to let me just make sure that I have the preview where is it yeah it's here if I preview this you can see that I can type just like a real website right and that's fantastic because you can take it you can take your prototype to the next level and since this is the code component I might not be able to look into the code right now maybe I can let me just see if we still have that option but if you if you were to code it from scratch on your own you will be able to see the code but since this is a public package or a default package from the framer team I cannot look at the code but yeah you know like we have so many things and for iOS developers you can definitely see the inspiration from this with you I insert menu so you know like you have the lists on the left side you have sort of like the explanation on the right side it's kind of like this the the insert in so if you I I can insert like a check box boom I can insert this it's I for insert so I can insert let's say a device and now I'd like I have a real device that is customizable it's really awesome you know to see how everything is is been adapted to different screens they have a lot of great settings for adaptivity in terms of like the way you're setting up the constraints and you know see how how this app looks amazing on the iPhone but also on the iPad and I'm able to change the device live it's fantastic you know so that's really what sets framer apart from figma now this this is getting me long for the stream so I'm gonna cut it short I you know I definitely want you to explore more and more because this is fantastic there's a lot of inserts default elements and things that you can do there's many many public packages that you can use you can insert like a lot of animations let me just I think I couldn't drag I'm too used to soothe you I now Solari okay so I have to install it first and once I install it then I can you know drag and drop it but yeah you can bring like a lot of animation you can you know set the link to the the lhari json file which allows you then to to preview the Lahti animation again fantastic stuff now let's take in in let's take a look into some of their like other examples that we can look at because they have fantastic presets for some of these uh you know there's one called cover flow that I want to show you like this one so let me explain a little bit so we have this element which is connected to multiple cards and this is a page element if I'm not mistaken you can just like drag-and-drop this here and you're gonna be able to connect that to multiple cards sorry let me just restart that I think it was a bit of overlay going on so page drag-and-drop here and then you can see it has the example set for you and you can decide to have more cards so let's say I want to set one this one to see I can then connect to a third element and if you go to the preview this page element has some preset interactions and animations and so I can change that there's here I believe effect so it can be a cube boom how cool is that there's the cover flow really cool and well made animations there's a wheel a kind of a 3d wheel there's the pile kind of like tinder sorry for bringing that example here I'm going to main and yeah it's essentially the same thing so we have the color flow and if I was to go to the page element I'm going to change the effect and just like what I've shown you it has a different effect so the cue is really cool as well and so yeah that's another thing there's so many fantastic example so let me just go back and go to examples these are more fleshed out example so not only does it have a scrolling effect but it also allows you to move into a different screen for each card so for example you can see here right when I go to the second card I click here and it goes back and forth now I would say it's not perfect if I was to be you know if I was to do it this insu few I you know there's a lot of things that I I can see that there's a bit of a problem in terms of the framing of it the transition of it and there are some small limitations because at the end of the day this is all pre-made it does the job of doing the basics but you know if you want to get deeper you might want to learn code I'm not even sure that it would work with let's say cover flow but we can give it a try it does work so that's fantastic so you can decide to change the the style of the scrolling for the page element and it will still work so I would be able to change this to the cube and hopefully it's going to work yes it does and let's take a look at the the flow of it you know so here I'm setting the page the page is connected to these three cards and the card here is connected to one of the screens using the same element you when you're prototyping make sure that the element have the same name so here I have iPhone you know I have page one and here's page one so these elements are exactly the same and these elements so page two is exactly the same as this one so now you can transition from this to this you can see that the interaction here on the top right it says you know tap iPhone C magic motion you can set the supreme behavior this is not another option that you cannot find in a lot of tools such as figma you can set some of these stiffness and damping ratio very similar to what you would find in Swift you I and it even even has like a little preview here of the bounciness that you should be expecting so now let's you know let's take a look at the preview as a result of this change so now I'm gonna go to play and I'm gonna go to so you can see that there is no much of that bounciness but if I go to the second now it starts to bounce a lot more right so you can see that you know the animation timing is a lot more interesting in framer and oh one thing that I forgot to tell you guys which is one of the biggest thing about framer in my opinion is the ability to import from figma let me show you how I always forget this part but it's so so good so now it's not perfect just like any import tool from sketch to figma from sketch to HD if you ever tried it it's not perfect it's not gonna have everything especially if you are using you know blue or if using SVG or if using some of the more intricate details but if you're using text if you're using some some of the less complex stuff you should be fine first of all you might want to like create a new document because it needs the link to the document so for example I'm gonna create this this page here and I'm going to need the share link so I'm gonna have to copy the link here and using that I can go back to - well actually in the browser I always expect to see like a framer icon in my dock but I always end up thinking oh actually it's in the browser okay so let me just go back to the browser and from here I'm gonna create a new document and create yes mark it would be amazing if Apple came up with some components that are pre-made in the force with UI and that we can just use and it's it's already interactive it how already has some of the animations I think that would be really cool and it would also be cool to be able to connect better to the design tools so to be able to sort of like synchronize between the two or you know export code from the design tool to Swift UI and hopefully a dub-dub DC we're gonna see some of that so here I'm gonna show you how to import from figma so I'm gonna go to import click on Sigma I'm gonna need the URL and it's gonna ask you which page page 1 and it's importing so what's working depending on the size of your file I think this could be taking less or more time hmm let me just go to not sure why this is taking long let me go to another one so I'm gonna go to my design code for and I'm gonna maybe bring a less intensive UI because sometimes it also if you have like a lot of blurriness or a lot of assets it might be a bit more challenging to import but earlier it was working just FYI so this is this should be a lot more simpler there's no there's not much assets here so I'm gonna share the link copy link and go back to framer ba it's just now it's working alright but you can see some of the challenges we have here so the stroke which was expected by the way this is not like I cannot blame the framer team saying hey this is not working this is expected a lot of design tools even between sketching figma if you import it's gonna have some of these issues so the stroke element you know it's not it's gonna have different settings in terms of like the advanced settings such as the the gap and and in the rounded corners and stuff like that so keep those things in mind if you're using more complex stuff such as SVG and and and and maybe Lahti stuff or stroke elements blurriness things like that so for that I can say essentially like maybe delete them just so that it's not in the way and what else yo yes what I noticed that it has some trouble with the drop shadow so if you have a background blur which did you have but if you have a drop shadow on top of the background blur then you will have an issue so the background blur works okay you can see hmm not sure why it's good all right so this is using a background blur but it's setting to a hard percent so you might want to set it to 50 percent but it has some trouble with around corners but let's set it to okay so I'm not gonna get into too much of the details but you can see that it does have some challenges with uh with background blur effects and and some some some stuff like that but at the end of the day if you're not using but you can see that the text right like if you're not using these very complex stuff and elements you should be fine and sometimes it's not necessarily the fault of the tool itself it's just the way that I organize my file in a way that maybe it's not conventional between the two tools so it's good as there's a designer to be aware of these limitations in terms of how much you can export to different tools and nothing is perfect especially when it comes to switching back and forth between two tools which is why a lot of designers really appreciate the fact that you know when it comes to quick animations you can just do it do everything from either framer or either Sigma but if you if you're like if you have a design like this one if you have a design like the other one such as the one that I was supposed to import it should be almost perfect so let me just try it boom see much faster now and there there is no issue whatsoever from my figma design to this with all the layers with all the fonts you know it's even picking up like the SF protex and sometimes like these import can screw up your your fonts you can screw up your SVG but in this case you can see that it does a very very good job at importing all of these SVG oftentimes also especially if you're working with you know let's say Flint o or proto peor or principle app and you import it from sketch it's going to transform some of these vectors into bitmap meaning that it's not gonna be in vector anymore and I don't know if they fix that by the way so I'm just speaking from experience from maybe a year ago but oftentimes they're gonna transform a lot of these elements into bitmaps so what is a bitmap is basically a merged asset into sort of like a picture so no longer you're gonna be able to sort of edit the colors or the size of these strokes and this you know and the framing of them the rounded corners so it doesn't keep the integrity of the vectors so you know that's why you wanna you know you want to use a tool like Sigma or framer two to be able to still keep editing those things and when it comes to prototyping if if it goes into a bitmap then you will see a lot of patience in term of how you can animate let's say if you wanted to animate these lines to sort of like like move a little bit or trance and turn into like one animation that I really like is for example you can turn these two lines into a and X well in order to do that you would have to make sure that every you know all the vectors are still intact and you know that's what framers Allah allows you to do so that's kind of like a cool thing that you should definitely give a try is to import your design from figma to framer and then just prototype right away so for example here I can just prototype right away in in framer and I can say okay well you know if I want this to to mouse over and I want this one to be hidden so when I am when I tap here it's gonna show my menu so very similar techniques but framer can definitely takes you take you all the way to to the end now this dream is getting long so I'm just gonna I'm just gonna finish with the hand off aspect so let's take a look at and you know feel free to ask me questions as well I'm going to take the the last minutes to answer some questions but here you can see if I want to deliver this to my developer I have a bunch of options I can use figma I can use framer and here you're gonna see there's a handoff mode and when you are in a handoff mode you're gonna see that you have the code export which is really really good so for example someone who is using CSS can first of all see the distances so you can see okay well it's about 86 from the lab 68 from the top and this one is 30 from the left so these distances can help developers a lot so that's kind of like how you would hand off to a developer you give them this document they get the link to the document so you can either invite them by email or you can copy the link and using that link you send it on slack they're gonna click on it they're gonna come to here and they're gonna see exactly what I'm seeing right now which is you can see the distances you can see the code export and you don't only have CSS but you also have JSX which is what reiax is using is a new form of JavaScript and you know you have the same sort of like you know properties for saying it setting up the styling in react code and if we can even take a look at the SVG here I'm not sure if they have SVG but I believe I saw that earlier so you have CSS you have JSX and and so that's for a code export now this is this is great and you definitely want to use the commenting system as well which figma does really really well and I'm sure framer does I haven't really tested this part but I'm sure that this is gonna become very useful for anyone using framer and hand-off is also available in figma so if you were to hand off this you would have to go to share click on copy link and someone like can receive the link in the browser and they can go and this would be their view right by the way I'm logged in as another person who does not who's not part of the team which is why you're gonna see a different view and so you can see that this is what your developer will be seeing they're gonna see the distances you're gonna see the elements they're gonna see the assets if you have decided to export those assets so for example they can even like click on export and they can export to you know PD F SVG PDF for iOS so if you're working with iOS you might want to export this to 1x for PDF and if you want if you work in Android or web you want to export this in SVG at 1x as well but otherwise if you are stuck to PNG which is more pixel-perfect you might want to have three settings so 1 X 3 X 2 X + 3 X and each will have their own naming convention and iOS such as Xcode is going to make sure to bring them together so once you have this you know your developer can definitely like export the file from here or get the code directly and here what is different a little bit in figma and I'm sure this is gonna come in framer as well is that you can check out the source code for some of these things so for example we can see here that my vector is done in Swift code right so we're using a UI label cg rekt and setting the background color and this can be used in both with UI and normal swift right as long as you know how to connect it but most developers are gonna know how to do it if you're a designer who codes you're probably going to learn this but that's what that's how you would hand off to a developer and Android I'm not super familiar with Android to be honest so I wouldn't be able to tell you if this makes sense at all but that's figma in framer let's take a look at some of the other options that you have out there as I mentioned before there's a bow code and they they have this version control but also handoff so the difference between those is that you're gonna be able to export the entire page of your figma file or frame well it's not integrated into framer yet but of your figma page and it's gonna exist right here so for a lot of teams who are already using these tools such as avocado or Zeppelin or abstract they're gonna find that they can sort of like export all of their figma components figma pages to here and it's all arranged in sort of like a design system mode you can see from the demo here it's really fantastic you can export into code and yeah the developers will be able to make sense out of this abstract is another fantastic tool they started as a version control for sketch and now they're doing inspect as well they're doing handoff and all of those things so this was a long session I hope you found this useful there are a ton of tools but you know I'm glad I'm able to kind of give you an overview of all of these now let's go into the questions before we finish I'm gonna look into this so how is figma a framer Mac emotion different and better than figma smart animate don't I have to duplicate multiple screens and same steps so how is it different that's a fantastic question hopefully I covered some of that first of all you can do essentially the same things as figma okay in term of prototyping quick prototyping screen to screen flow and some of the micro interactions but we're framer shines as I explained earlier was that you can use these live components created both by both the framer team and the community and then you can get into the coding of the code components meaning that you can use CSS behaviors and Riaan JavaScript and p.i calls to really make your prototype a lot more lively and as a result all of those code can be put into a real website because at the end of the day you're using react so let me just give you an example of a code so I'm gonna go go to dashboard and I believe in their examples they're gonna have like a portion for prototype with code and here there's a card swipe and you can see like the tinder UI for example I'm swiping and this is using code so you can see here I'm going I'm gonna go to the code mode and here there's a single file or I can click on this element and I can go to overwrite and I can click on edit code now it takes a little bit of knowledge I do have a course on some of that code again I'm gonna redo it because there's a bit of a change with the new framer but the code is essentially the same if you have learned from my my frame a playground course you will be familiar with with a lot of this code and again this is connected to their frame emotion react library as well so it's not reinventing the wheel it's just react code so we're importing about a bunch of libraries and we're creating a swipe function we're setting the States and here we're setting the drag behavior and that's what's allowing us to sort of make these a transition and of course you can edit all of these numbers now this is where framer shines and yeah that's kind of like what's difference between framer and figma alright let's go to the next question how do you plan your animation ideas is it on these prototyping platforms so you can later see them and do it in code a lot of these planning comes from understanding the UI patterns as I explained before is a lot of understanding the UI patterns a lot is about browsing inspiration as well to see and when I say inspiration I don't necessarily mean just dribble I also mean you go to your iPhone or your Android phone and you start using your favorite apps and then you look at well you know you you look at this interaction for example well this kind of is inspired by the tinder UI right and I'm not saying tinder was the first one to do it I'm just saying that they are known to have done it and to popularize it just like Apple popularize a lot of things and Google popular a lot of things it doesn't mean that they were the original creators and but yeah that's that's how you would sort of like look at some of these animation patterns look for inspiration from your favorite app from dribble and try to recreate them on your own app and then prototype them to make them slightly different or contextual to the design that you have so next question is their way in figma to export all CSS use in that whole frame as an S CSS no unless there's a plug-in for that but from my knowledge right now I don't really know and first of all why would you want to do that right because the way you design in figma is very different from the way you would code a website you know and it's it's better it's it's a lot more manageable too if your design is simple enough sure it can make sense but why would you limit yourself to such constraints it makes sense to some project I'm not saying it doesn't make sense for everything but you know if you look here if I wanted to have like a whole CSS file of this then I limit myself to the ability to separate a lot of those components or to make them more contextual or to use some of the frameworks that I might be using such as how do you call it like there's different ways to CSS to style something in react you can use like inline styling then you can use I forgot the name but that we use a lot in in damn it I've got the name it's it's called it's called it's called it's called style components so this is also very popular you can also style using a SCSS you can use like normal CSS so there are so many ways to style it and for a design tool to kind of like cover all of those use cases will be extremely challenging and we're just not there yet so hopefully we're gonna get there and hopefully we're gonna normalize a lot of those techniques such as M Design Systems but at the moment it is not possible to do it efficiently the same way with with UI the same way with with react code or the same way with Android code such as flutter or those things I haven't personally used XD to flutter but I would be very very surprised if it can fall if it can sort of cover all of these things and just like plug and play from your UI to the final app that I I don't really see that happening this year but I might be wrong and I'm always always open to to try and to see if it really makes sense in a real team environment because it's one thing to look at it from a concept perspective it's another thing to to actually use it in a real production project and just yesterday I learned about something called fluent UI from Microsoft and apparently what they're trying to do is sort of like at this system for that can exist from figma and then you can create these sort of components and you can export into JSON format which is then read by all of these platforms such as Swift you eyes such as Swift's such as Android flutter and apply those settings to the rounded corners of the UI the the coloring of the design system again this is definitely more for bigger companies and would probably require a lot of setups to get to that point and it's still in the early stage of it but it is interesting where we're moving towards to and what the future looks like but I like I said I look forward to to trying all of these new techniques and I certainly hope that you enjoyed this live stream and that you found it useful I'll see you in the next one bye bye

Channel: DesignCode

Views: 11,033

Keywords: Framer web, UI design, Figma design, Prototyping tools, Developer handoff, Figma prototyping

Id: IgYJa2FNozo

Length: 114min 15sec (6855 seconds)

Published: Thu May 21 2020