Figma UI Design Tutorial: Design your app in 40 Minutes!

0:00so this is going to be interesting I texted red and I was like do you want to come on the show and just do a live design session on figma because R is like the figma guy and as you're designing your your startup your idea you can just give best practices around how to use figma and you said yes here I am I appreciate it welcome to the show you know it's it's cool to be here I've definitely listened to my share of episodes and to actually see you talking back to me is kind of fun so thanks for having me I appreciate it all right

0:42shall we get into it let's do [Music] it so in thinking about the best way to go about this I have a little design task for myself this week and I thought you know what I'm just gonna kill two birds with one stone and just design it live and kind of give you a little window into my process and how I iterate obviously there are a million different things that you can learn and um just angles we could take even for this so I'm going to try to show you a good middle ground of just like all the little considerations that I'm making while building little visual

1:24improvements that you can use to make your designs look good we'll get into some like basic prototyping and kind of just see where it takes and Greg along the way if something is interesting that you want me to like double click and go down a little rabbit hole I'll just look to you to guide for context this is my website dive. Club and I also have a podcast but I'm working on a little course page I want to put up like a basic Marketplace of design courses and I have these affiliate agreements with instructors that I like and so I'm kind of thinking about how the heck do I want to design

1:58that and so let's just see where it takes us so I'm going to start by making a little card and the best way to do that is you just hit F which is going to give you a frame which is basically like your container in figma for anything it kind of works like a CSS div so if you're at all familiar with that that's basically the mental model that we're using here anytime you need a thing you make a frame you dump stuff into it so I'm going to treat this as a course card and maybe to start I'm just going to play around with what it would look like

2:28to design these as Rose now I'm going to do something that maybe a lot of people would find atypical but it's like one of my just total hacks for moving more quickly in figma and that is I'm gonna turn this into a component like as the first step before I have anything in there and a lot of people associate the word component with like Design Systems and Polaris and Enterprise and yada yada but actually like components as really hacky speed mechanisms in figma are amazing I use them all the time because my goal is like I never want to do the same thing twice like I'm trying

3:05to find ways especially really early in the process to like minimize the amount of knobs that I'm turning to make changes and so this way is I'm just giving myself one knob so right away I'm going to go ahead and duplicate this a bunch of times throw it into some kind of a container and now I have my card at the top and I can just start styling it so maybe I'll set this to like I don't know 5% opacity now you can see this is a auto layout here which I created by hitting shift a and this is basically just throwing you can throw anything

3:40into an auto layout which is just a um like a stack basically um and it really actually kind of maps to flexbox in CSS so once I do that now I can control things like the space between over here and I can start to manipulate my designs this way so it's a pretty good starting point and now I can kind of just start to dump content in and see what happens and the nice thing is I have my component so I never have to do anything twice so if I come up here maybe I'm going to go ahead and call this uh designing with AI and that'll be

4:16like the title I have some preet text Styles in here it's pretty basic type scale you can pull this from like almost any popular website you can head to like Polaris or something if you want to copy those values or uh even just pull values from Tailwind CSS is a really great spot if you're looking for like colors and typography so I'm going to go ahead and give that and I'll call that title and I'm just going to command D duplicate it and let's make this the instructor name and maybe I'll even give this a little bit of color let's just see what it looks like and this course

4:52is by mahen sale okay I have a question please so it's interesting you're you're designing from your head you know your mind so do not go and look for inspiration before you start pushing pixels great question so I actually look for inspiration constantly I never even I just I never turn it off basically so like I have a notion database and I can even give you like a YouTube link if you want to point people that way that shows how it's built but I'm constantly constantly constantly dumping things in there and categorizing them and creating all these different views like I'm a total nerd about it and

5:37so I have you know I don't know if you ever talked like David Perell he has this idea of like writing from abundance like you don't like go look for notes and start from the blank page you're like constantly contributing to this database of ideas that's kind of the way I think about it too where like a lot of these they're in my head but only because I've saved stuff before and if if I really actually don't have ideas my first step is I always open up my notion and I just start copying images and pasting them and I might even be able to find like if we

6:10go I bet I have pages with examples see look this is where I was designing the blog page the first thing I did was like I just went into my notion and I was like all right what's interesting paste it in and I'm like oh that's pretty cool and then I'll just zoom in and like recreate a little part of that and maybe I'll use it in a different way or something like that but my my very first step if I truly have no idea what I'm doing I just paste in things that I want to look at later sh don't tell anyone but I've got 30 plus startup ideas that

6:39could make you millions and I'm giving them away for free these aren't just random guesses they're validated Concepts from entrepreneurs who built hundred million plus businesses I've compiled them into one simple database compil from hundreds of conversations I've had on my podcast but the main thing is most of these ideas don't need a single investor some cost nothing to start I'm pretty much handing you a cheat sheet the idea bank is your startup shortcut just click below to get access your next cash flowing business is waiting for you great yeah I I'm the same way by the way the exact same way I mean that's yeah it's like everyone

7:33everyone that's like actually good at this stuff is like they are collectors of design they're not just creators of design like they take that part pretty seriously and it really really helps so like notice what you like notice the little details constantly ask yourself why you like something when you see it and I think that's like a big way to make this part easier where you don't feel like you're just shooting in the dark so I'm going to keep going with this examp Le here and another kind of like even mental model for the way that I think about design is I kind of almost approach it like I have this spreadsheet

8:05in my head too where it's like okay what M metadata do I have like in this case like I have my title I have my name I also have like the length of the course these are cohort based courses so maybe I'll make this I don't know little bit gray see what I just did there I I'm using the number keys to decrease the opacity so like this is white but if I can just type six on my keyboard it's automatically decrease that opacity and when I have like backdrops it's a really easy way to bring that Hue forward and make sure that it looks good so let's

8:34just make this four weeks and let's see we also have a price so maybe this will be like 8.99 and if I hit zero I can just bring that back up to 100% And you know this is kind of getting a little bit interesting maybe I'll maybe I'll bring an image in at this point um so I actually what I would do for an image is if you hit R you can just draw a rectangle and for any rectangle you can change the fill like this but I actually kind of like just copying from my clipboard so I'm a big raycast person so I have a bunch of

9:13images copied on my clipboard and I'll just go ahead and grab one from aen like this which is going to populate everywhere one of the new features that figma has released is the ability to remove a backg ground which is kind of nice so if you open up command K like any kind of software app you're going to be able to get this little menu here and you can just type remove background and that's going to go ahead and run on all of these instances and while I'm playing with this I might get to the point where I'm like actually I hate this I don't think

9:51it looks good at all which happens about you know 14 15 times in this exploration process so here's what I do in that case I'm going to go ahead and duplicate this whole frame command D and I'm going to go now I have two instances of this now because I have this main component these are all components here but I don't want them to be components anymore I want to preserve this as a piece in my iteration flow so the plugin that I really like is called destroyer and if you do Destroyer destroy instances this is just going to remove every single component in that frame so now it's frozen in time and

10:30it's not going to iterate and now I can just hop back here and keep changing things like maybe I want this to be a circle and we'll add like a little maybe there's like a background here so I'm going to go ahead and duplicate this call this BG and then you know I have some colors so maybe I'll make that blue if I hit two I can decrease the opacity it's like okay that's getting kind of interesting if I group these and I'm going to turn these into a little Auto layout and you can get to the point where you're like okay that's you know there's something there maybe

11:06but I don't really like it and so I'll just do it again and I won't do this that many more times but I'll probably do this 20 times when I'm actually designing it's just destroy the instances keep on going so I'm always designing in one frame and a nice little hack and and what I think really helps when I'm designing is like I'm looking at my monitor right here but I have the design at 1X on my laptop in prototype mode so like if you go to figma decom open up this file and just hit the play button then you can have this open so I'm always seeing it like at the real

11:40size on my laptop while I zoom in and make changes and so that's kind of nice because I'm always going to have this leftmost Frame as the source of Truth and then just see it update in real time on my laptop so let's say that actually I really don't like this at all and uh maybe I want to have some kind of like a larger card so I'm actually just going to set this to wrap which is just changing the auto layout like um like flexbox and let's just you know for right now let's just delete a couple of these and see what it looks like to do two at a time that's kind of

12:19maybe uh you know let's just make this a little bit bigger make the card vertical all right let's set this to there we go okay so maybe this is actually a better starting point and if I come back in here and I have my content here let's just like just keep exploring different ways like this is honestly like the the if you want to be a good designer it's like actually just about trying more things than everyone else and So the faster that you can try things the the better that you're going to be because you just kind of got to get through all of the slop so let's see if actually you

13:02know if we expand this image like this and then um I'm actually going to let's put this here and U maybe we'll have a little like an arrow icon or something like that to indicate that this is interactive so uh plugins are your friend anytime you want to do icons if you're hunting individually it's going to suck you kind of just got to pick a library and stick with it my favorite by far is phosphor so again if you do command k type phosphor you can open up this plugin and it's going to give you all of the icons that you could ever want and they're all going to look

13:36beautiful together so I'm gonna search for an arrow and let's pick let's go this one we're just GNA go a standard Arrow right I'm going to drag that in here it's going to appear on all of my canvases let's make it white all right not bad I think I'm going to shrink this and now Watch What Happens here here so and r r just start interrupt how how much are you thinking about actually engineering some of these components for example you know maybe it makes more sense to use something like Lucid um or you know that is that is more friendly to CSS for example like

14:19are you thinking are you thinking my question is this are you thinking about how do I make a beautiful page or am I thinking how do I make a beautiful page that's going to connect easily with framer or something like that great question I'm pretty much always thinking about how it's going to be built with the disclaimer being like I'm actually like a little bit more of like technically minded designer like I'm not an artist I can't draw anything I don't even have a I don't even sketch things like just that part doesn't come natural to to me but I know how front end works and so a lot of the decisions especially

14:52as I'm fine-tuning things I'm going to use those best practices and honestly if you're building in figma using Auto layout it almost just comes out of the box a little bit free because if you can build something in Auto layout that means that it's very easy to build in Flex box that doesn't mean that you necessarily have to like you can get away with it but it's going to like if you don't use Auto layout and you're just randomly positioning things in the frame that's effectively the equivalent of just absolutely positioning something in CSS which like yeah it's it's possible but it's not great it's not

15:28it's always you you probably want to avoid that um so even something like this so like I have a frame I'm gonna hit shift a to turn like if we zoom in here by the way hitting enter allows you to drill in in the canvas and then shift enter is moving back up that's like how I Traverse the layer tree really really a great way to move more quickly basically so you can see like I made a little wrapper on this icon and I'm actually going to hit shift a to turn that into an auto layout which is kind of getting to that point that you were talking

16:01about and once I do that I can just change the padding over here so you can see I just put eight pixels of padding around it and maybe I'll just give it a little I don't know subtle background change the Border radius and that's going to map really well like if a developer is building that it's going to be one to one with how they would do it in CSS so let's just make this kind of look better because it still doesn't look great so I'm going to give it a little bit of like a border radius and let's throw these into an auto layout and another thing that I'm doing

16:38is almost certainly like if you're building this especially even if you're using like vzero and you don't even have dedicated developers everything's built on Tailwind like the modern web uses Tailwind you can't really get away with it and so you're going to get a lot of values out of the box when and doubt you want something that's a multiple of eight and then that's going to be built into the Tailwind syntax so for something like this this is the equivalent of uh pl12 because it's 12 Time 4 is the way that tail one works so I'll probably try to stay with those types of values whenever I can um same thing here like

17:17we'll make this maybe four pixels apart and okay now let's start to make this styled a little bit more interesting and the way that I'm going to do that to start is I want to bring a little bit more color into this so something that I do a lot in my visual language for dive is I like to play with like lighting and blur so here's like a simple way that you can add a bit of visual interest to your designs I'm going to go ahead and hit R which is going to give me a rectangle previously I added the image this time I'm going to just give it a

17:51color fill now use my blue and same thing as like a lot of different software if you use the little brackets so command bracket left that's how you move things down in the layer tree so I'm just going to move that to the back real quickly and I'm going to go to effects and I'm going to click this little drop down and select layer blur another CSS property and I can crank up that value maybe to like I don't know 20 30 and if I hit remember my numbers on my keypad change the opacity so maybe I'll bring that down to like four it's kind of getting interesting so once

18:32I do this maybe I'll even increase this more cool that creates a little bit of an interesting visual effect right yes another thing that I like doing a lot which is if you go to this little guy here it says apply blend mode again straight from CSS I'll be honest I don't know what 90% of these does I I'm convinced that no one actually knows what they do there is one that is used all the time which I kind of wish somebody told me earlier which at the very bottom is Luminosity which is basically saying hey take this image and just let all of the colors below bleed through and make it

19:12essentially like a really like a tinted black and white I think that looks good I use it all the time so that's starting to get a little bit more interesting let's just maybe we'll increase this blur a bit and decrease the opacity okay kind of get getting there and all right so that's like that's something right that's that's we're we're getting there another thing that is an easy way to spice up your designs especially when you're playing with like gradients and lighting and things like that is adding just like a bit of noise and texture goes a really really long way so in this case I want

19:51to just add a bit of graininess to this so I'm G to add another rectangle and if I hit r I'm just going to drag it across everything these are your constraints so I'm just going to say hey pin this all the way to the edges and remember we can do command and the back bracket to move it all the way to the back and now this is another plug-in that is incredible you can use it in so many different ways so noise and texture this top one if you open this up you can do all kinds of really crazy visual effects in here it actually even gives you some like

20:25interesting shaders out of the box like you can go wild with this thing for now I kind of just want like a really simple noise so I'm going to go ahead and hit add and H that looks okay let's remove the gray um obviously that looks like trash so let's go ahead and increase the amount we'll update it and then all I'm going to do is just use those keypads and decrease the opacity so put it down to like one if I go 0 five it's down to 5% all right so that gives like a little bit of visual interest to it right um at this point we're just going to start

21:03tweaking things and what I might do at any point right now is just duplicate so I have another like saved bookmark I'm that's like basically how I'm treating this is like I'll save the bookmarks let's run Destroyer again okay cool now let's keep going so once we're over here maybe I'm GNA give this a border and we'll go white I want it to be pretty subtle though so you know maybe it's like 10% okay it's getting a little bit more interesting quick ad break let me tell you about a business I invested in it's called boring marketing.com so a few years ago I met this group of people

21:44that were some of the best SEO experts in the world they were behind getting some of the biggest companies found on Google and the secret sauce is they've got a set of technology and AI that could help you outrank your competition so for my own businesses I wanted that I didn't want to have to rely on Mark Zuckerberg I didn't want to depend on ads to drive customers to my businesses I wanted to rank high in Google that's why I like SEO and that's why I use boring marketing.com and that's why I invested in it they're so confident in their approach that they offer a 30-day

22:20Sprint with 100% money back guarantee who does that nowadays so check it out highly recommend boring marketing.com all right so at this point I can do a lot of different things I'm gonna go ahead and just increase the number of my cards all I did was just duplicate that row and I have a bunch of content that I can add in here I'm probably going to save that to the end just because it's pretty tedious let's mess around with like just simple prototypes right like how do we make this interactive we kind of want to feel our designs and I'm a big fan of like prototyping quickly because like

23:01how that hover State behaves is like I think that's a really big part of it right so we have this component here what I do at this point which I feel kind of decent about it and I want to start adding some interactivity I'm actually going to drag it up here and let's see 430 maybe we'll make this like 400 okay now if you want to add a hover state to something in figma you make it a component and then if you come over here to this very top right see how it says add variant go ahead and click on that and now we have what we can call a

23:45hover so this is going to be default this is hover and now I can make any changes to this variant and attach them with a little prototyping interaction which I'll show you in a second so let's say you know what maybe the blur grows a bit on Hover and let's go ahead and maybe we'll increase the the background so it kind of Pops maybe the Border too okay that's let's just see what that looks like so I'm going to go ahead and hit prototype and maybe I'll just do that a little bit more slowly so click on Prototype or you're by default in design mode up in the top right if you hit

24:27prototype then you can actually just click and see this little blue dot you can drag that to a different component variant so in this case I want to change from the default to the hover when do I want to do it well when it is hovering by default it'll be on click I'm going to change that to while hovering and this is where you can kind of change the animation presets we don't want instant because we're not Savages we want it to feel good so we'll go ahead and hit smart animate which is basically just telling figma hey smoothly transition between these two states and I like this gentle right here that's

25:01kind of my default feels pretty good because there's like a little bounce to it 800's pretty long though let's make it like 400 so at this point we can hop into prototype mode and just see how this feels and remember I probably already have this on my laptop if I'm doing this in real time so if I hide this UI you can see all of these are interactive now when doing this this is where I'm like okay how does this feel what do I actually what do I actually want from this and pretty common UI pattern is like oh you want like a little bit of lift right

25:36like you you want it to kind of feel like it's popping there's like some shadows and the way to not have a good time in figma is to just do it manually and like go in here and do effects and add a drop shadow and tweak it like it's like really hard the best Shadows are not one Shadow layer like that's just not how good Shadows work so my hack is to use a plugin and my favorite plugin for this is if we hit command K again to run plugins smooth Shadow no spaces really really easy way to create beautiful Shadows so if you click on

26:10this it's actually going to give you little easing curves and you can play around with the alpha on a slider which is just the transparency so I like to take it like further than I actually want it and then I'll like slowly back it off but honestly you don't have to mess with it too much like everything out of the box is gonna look good so if we do that you can see like okay now there's like it's like elevating a little bit it's getting more interesting maybe there's something there now at this point maybe you're like you know what actually I don't like the the layout or

26:47I want to change the button a little bit and I'd probably run my Destroyer workflow but you've seen that a few times so let's just like change this around a bit now remember we don't want to do anything twice so what figma gives us is when we're editing a component there's this little icon up here called multi-edit variance or you can just hit q and that's going to allow you to make a change in any frame and it will populate everywhere so again you don't want to do things twice so maybe I just want to drag these on top of each other yeah and let's make sure that

27:24they're aligned nicely okay okay it's pretty good and actually what I really want is I want to add some text so I'm going to go ahead and hit T and just type um let's see view okay so that obviously looks ridiculous so how do we make this better well see where my layer is it's inside of my icon container I don't want that I want it inside of this Auto layout so watch what's going to happen here see how that automatically adjusted that's the beauty of Auto layout it's dynamically setting the width so that looks pretty interesting um maybe I'll just increase like the padding and note I'm still in this

28:10multi-edit mode so I'm not making these changes in two spots which is pretty helpful so let's like increase the padding a little bit 16 okay now let's hit Q again to exit multi-edit mode because in the default State maybe I actually want it to look like that and let's set a fixed height so this is always the same maybe it's 40 okay all right I'm going to increase the opacity here just a bit let's just see what that looks like okay that's something and this is only able to work because everything's set to Auto layout and I have it set to Smart uh smart animate so like just to

28:56see how you should not be doing it is if you're going to go into prototype mode here and set this to instant note the difference pretty Herky jerky right so when I'm using figma and obviously I'm using figma wrong but I've I only have a few a couple a couple of plugins I'm using when I'm watching you on figma it seems like you have a a host of of plugins that you're using um what's your recommendation to people how many plugins and and and could you rattle off kind of like the ones that you use the most that people should should should be using so honestly I actually feel like I

29:46use way less plugins than a lot of people there are people that use a lot of plugins I typically like plugins for really just two different buckets of workflows one is visual effects like that noise and texture or like the smooth Shadow just like things that would be super tedious or maybe not even like within my skill set to make like I'm not going to make animations for instance that's one bucket and honestly noise and texture and smooth Shadow that's pretty much it in that bucket that's pretty much it the other is more like workflows and what I just showed you is like how I use the

30:29destroyer and this is like what all my figma files look like by the way is just like you can see the design evolving going left to right and then I have the source of Truth here that is possible through the Destroyer plugin the other one that I use all the time is uh content re which is really really nice so one bucket that I'm like using all the time is just like you want to get a bunch of related content into a page maybe it's populating a table maybe it's filling a design with images and something that is really helpful in that world is is this kind of this combo that

31:06I use which is twofold one is you want to select maybe like all of the images for instance and I want to change the head shot across like a giant array of components the way that I'll do that is running simil layer or like select layers and know you can say select similar layers okay watch what happens when I click this now I can go ahead and search for the image oh hold on by name I want to select layers by name now I can go ahead and search for the image I can do it an exact match if I want now I have every single one of

31:46those images selected at this point now this is where content re becomes your best friend because you can run this and it's basically going to give you a bunch of defaults out of the gate so that could you know you can just come in here and select like avatars for instance you can even add your own folders of content it's like I even created one for instructors for instance and you can quickly apply and it will change everything all at once I've never actually tried this before I'm going to see if you can remove background on a bunch of images simultaneously I'm skeptical yeah that's not going to work

32:23but that combo move is pretty helpful outside of those I really don't use that many actually and I think a big part of it is like figma has added a lot of workflow enhancements and like little tiny things like how I was making bulk changes here by hitting Q like that stuff that used to be a plugin now it doesn't have to be a plugin so like figma out of the box has actually gotten pretty good I don't think that you should stress out about having to build this repertoire of like 20 different plugins great love it yeah okay so before I I you know head off here

32:59there's one little styling tweak that is kind of another one of those things that just took me too long to figure out how to do or that it was even possible but it goes a really long way which is you know I think a lot of the designs that are becoming more popular today have a little bit of depth depth and texture we've added the texture we have a shadow but something that you can do to add a bit more visual interest is using inner Shadows actually so I have my component up here and if you go to the design you'll see I have all of the

33:35drop Shadows which were added from the smooth Shadow plugin but what you can also do is add an inner Shadow and we want to use an inner Shadow to create a little bit of a rounded feel on our Corners so what I'm going to do is set this to White see how that added that up at the top like this and you can kind of tweak these values I typically go somewhere in the range of like 28 and maybe you decrease this opacity a bit so it's softer but you can see that it plays it makes it feel like lighting is kind of shining over the edge and you

34:11can pair that with another one at the bottom and you want to do this one to -2 you can see it adds it down there and since this is dark mode it's probably going to be a bit darker maybe this is up to 12 Okay cool so if we go back to our hover State here see how it's not just popping out but it's kind of rounding and bending a little bit it's like a subtle visual effect that you don't realize how often you see it on the best designs today and honestly I think I probably designed products for like seven or eight years before I

34:46realized that you could play with inner shadows and I would say that it's kind of like it's it's a trend right now and it's like actually really simple to add that kind of 3D curvature so if you're trying to create again like a little bit more visual interest inner Shadows are your best friend and I could you know tweak and iterate on this for the next three hours but hopefully it gives you at least a few little tips and tricks that you can keep in your back pocket not only about how to style things nicely but also just how to go from zero to something that looks like this a

35:16little bit more quickly than you know manually making all these changes in a bunch of different frames it looks beautiful honestly and uh before you go though I just have one last question which is why should people go into figma in a vzer world you might not get the you asking that question thinking that I'm gonna defend figma I'm not I'm not gonna defend honestly I I think that figma is fantastic for doing what I'm doing here to just be generative get as many ideas out as possible because the fact is like you can iterate more quickly in this world you can expl you can explore more

36:03Divergent ideas like everything that VZ is going to give you is going to feel tame slightly templated figma is the way to like push visual ideas and really figure out what you want to make but even for myself I've had my design process especially for like web design for instance dude it's changed man like I'm in framer a lot nowadays like a lot like whenever like a few weeks ago I was designing a new website for a client like I used figma to explore a wide array of ideas and just throw paint at the wall but once I got to the point where I was like okay this I feel pretty

36:42good here I'm going to move to framer build it get that final like five to 10% in something that is a little bit more in the medium and then I'll probably work on like the other pages of the website directly in framer so I I do believe that the more people are building their ideas in code-based tools the better way I think about it is figma is almost like a piece of paper and you have a a a pen and you're drawing actually you don't even have a pen you have a a pencil you're sketching out your idea and maybe you're writing out uh your idea but uh you know the word

37:29processor Microsoft Word is is your is your vzer of the world right like you're going to get more templatized productized stuff which has its place but I think that starting uh INF figma is often a great place to start I think it's still the best place to start I think that we are kind of staring The Next Step change in software creation in the face right now and you have like the early adopter that are tinkering with it but like even the way we think about a spectrum of fidelity is about to get shaken up because right now we have like High Fidelity which is a

38:06really goodlooking UI in figma but then there's also code that matches that onet to one and once that line blurs all of a sudden I wonder if figma has more of a place earlier in our process where it's like lower Fidelity we're exploring ideas and then maybe we are using a to like V zero maybe figma starts to dabble in this product space a little bit but this idea of having high fidelity design and High Fidelity code be separate that does not feel like it's going to exist in the long run to me 100% R this is this has been awesome uh where could people learn more about you and the

38:45stuff that you're building great question I spend way too much time on Twitter so ridore design is kind of my hub for everything but right now my kind of baby and the thing that I'm spending spending the most time on is dive. Club so I have a podcast where I'm interviewing designers Founders even Engineers that are at the Forefront of all of this new tooling and most interesting startups and that's kind of where I am trying to like learn and share all of the things on my mind so beautiful well dude this has been fun I I'm I hope people I hope people learn something here and and I hope

39:21people have a takeaway of of just being a little more confident within figma and uh just get in there get your hands dirty I think that's probably the best place the best way to learn right it's you can you can watch things like this up the wazu but if you're not actually playing with the tools it's not going to really it's not going to process open up a new file just type f on your keyboard and draw it somewhere on the page you're in it now that's right all right my man I'll catch you later see y see y [Music] down baby