FigJam by Figma

what's up everybody i'm jesse showalter and in this episode i'm gonna introduce you to big jam no i'm not talking about some sort of jelly or sandwich spread i'm talking about the new beta release from figma that allows you to jam inside of a collaborative design document creating user flows and wireframes you can sketch and annotate leave comments talk to each other and all sorts of other goodies it's absolutely amazing and it's going to be perfect for collaborating in teams or with your clients this is fig j [Music] [Applause] all right i've got figma open we're going to dive right in and take a look at the brand new beta version of fig jam you can see i have my recent files open doesn't really matter anywhere you are you notice or you might notice we have a difference between the icons here for designs the ones for previews and that's because we can also create something called a fig jam file which is in beta so let's go ahead and click fig jam file okay you see we've opened up our fig jam and uh i have it open in the browser and i also have it open here inside of my desktop version of figma now you can see i have two versions of me inside of this fig jam and that's the idea right we should have multiple people inside not just two of me but multiple of lots of people all brainstorming riffing ideas talking to each other and creating ideas kind of at the same time you have this big pixel grid kind of canvas you can zoom in and out or by pressing command or control minus or plus and that's kind of nice you can also you have your move tool that's able to kind of select things and if you hold down space you get the hand tool which will allow you to pan around you can get those tools down here as well with your move tool and your hand tool but you can also draw things with the marker or hit m you open that up you get to select a color and the size do i want this big marker or a small one and we could start drawing something here and it's going to soften the curves for us we'll do some little eyes and a smile that's good and then we can take our selector tool like this and we should be able to actually group the selection and move everything around like that we can ungroup things and just move pieces and we can just delete things right off the board so that's really nice we can start sketching ideas maybe if you wanted to sketch you know like a really messy wire frame to something you can also boom and then maybe we're now we're sketching all the different elements inside of our wireframe you can do something like that you should also be able to yep hold down option and drag duplicate versions of things and then group the whole thing together and now we have one wireframe so that's really great easy to draw easy to create wireframe stuff you also have the ability to add shapes if you don't want to create um just hand drawn shapes we can hit the shape uh down here and get all sorts of different ones so rectangles ellipses rhombuses triangles pyramids everything diamonds all that stuff so let's actually drag one of these and put it out on our stage and we can type something inside like maybe this is the splash screen uh we have all sorts of formatting options inside and we can also change the size here we can drag by the corner and that'll kind of keep everything constrained or we can drag by the top or bottom and that'll just kind of size those things out so this is pretty cool if we hover over the edges we can create a new version of or a new copy of this screen we've created and it gives us a connector line inside or excuse me it gives us a connector line in between this dynamic changes as we move it around so maybe we want this one to be on boarding we can do that just like this and that's the onboarding flow right there maybe we want to change the color for the onboarding flow we can do that and we put that connector in we can actually add custom connectors if we want by heading down to the bottom and hitting connector or you can hit shift c uh we're able to put straight lines or connectors let's do a connector we'll just drag one of these up excuse me we'll just draw one like that and then you can take this connector and you can actually just connect it to your screen so now when we move our screen around everything's moving dynamically really really nice just like that maybe we want to continue this flow so we'll do a couple more flows down here that could be pretty nice just like that that's the continuation of our onboarding flow see how we're gonna be able to do user flows really really nicely here it's gonna be awesome um okay let's talk about the next thing you do you can actually bring out sticky notes by pressing s so let's drag a sticky note out we can color this however we want and then we are able to write inside of it so we can put a bunch of text inside and people know that that note is from me right i i can either sign it or unsign it if i want to leave an anonymous note i can do that and make fun of things but i don't want to do that so we can leave sticky notes and just put them right on top of things maybe you want to do another sticky note that's just like it boom really really easy really easy and usable interface you could all just also just drag text out you just hit text right there and now you can start you know writing some text this does again have formatting options so we're able to grab things maybe bold them or turn certain things into a subheading so maybe we want this whole thing to be a subheading just like that we'll go sub heading really really cool and then we could do another one right below that that is just normal put a bunch of text like that together and again all the grouping and everything works we're gonna they have smart alignment so let's grab those and just group them together so we can put these things um on our cards or wherever we want so really cool that's a nice kind of piece as well you also have the ability to open up library and get all sorts of different components that you can add to your fig jam so we have a bunch of stock components maybe we want to put like a warning sticker or component on that you can also get into your team libraries um if you have a team plan so that's pretty cool you can you can bring in your components your buttons place them in different places and start building out wireframes that way super cool with the components section you have stamps which are really interesting um so you just hit e for stamp and we either have emojis that we can kind of just like emote on certain things like oh i'll you know just continue emoting maybe oh yeah that's really funny right there but we can also just drop stickers on things um and notice how i get the little stamp and my little sticker follows me around so yeah i love that i love that let's open the stamps again and say but i don't like this one and i don't like this one so that's kind of a cool concept you can also bring in images by placing an image right there hitting the quick key command or you can find an image that you'd like to you know drop in and uh just drag it onto the canvas and it will bring in massive images just like that which is pretty cool we got you got to dig that that's really fun you can also bring in other figma designs and then resize them comment on them and change text values inside so if i come in and just find a design that we've done come back over i just command c from there command v and pasted it in here we can resize it if we want but if you double click on any text area uh you know you get the ability to edit things and you'll see whether or not your auto layouts and your responsive resizing work for certain things which is pretty cool but that's pretty fun that's pretty awesome i'm pretty sure you can connect it yep so boom we've connected our connecting lines to that as well and this image is massive so i'm gonna get rid of it we don't need that but that's really cool you cannot kind of connect to anything pretty rad um there's a few other things you can do obviously in figma you can share and invite people into this document like any other sharing stuff you can also open up comments and we can leave comments on anything just like you can in a normal figma file but you also have this other really cool thing called cursor chat you can just hit the slash the forward slash or hit right here and this will allow us to say something and people can see you writing in real time so i can just hover over what i want to do say something here and once i'm done i can hit uh well what is it that i hit escape and i get rid of it um and i can say something else um on any specific area so that's cool you're kind of kind of like talking in real time like uh this is fun you know you can do stuff like that and people can see exactly what you're talking about um so this is a great way and i'm pretty sure once you're done you can close these things up and you can actually move these into projects so once i'm here maybe i want to move it into that project and now that fig jam or that concepting file lives inside of the the project file it's related to it so that's really really cool and that's fig jam in a nutshell well that's it that's fig jam it actually kind of makes me want a peanut butter and jelly sandwich how are you gonna start using fig jam right now in your teams or with your clients what are you gonna start dreaming up what are you gonna jam on let me know down in the comments i'd love to know if you enjoyed the video make sure to leave a thumbs up subscribe the channel i do lots of videos about design development and figma just like this one so maybe stick around if you have any questions leave those down in the comments i hope you're having an amazing week designing amazing things making amazing things and jamming with your teams and with your clients i'll see you in the next one

Channel: Jesse Showalter

Views: 22,517

Rating: 4.9169331 out of 5

Keywords: jesse showalter, jesse showalter design, learn ui design, learn ux design, figma, figjam, figma new features, figma latest features, figma top features, figma config 2021, figma auto layout, figma tutorial, figma update, figma 2021, figjam 2021, figjam tool

Id: RVNuArHH5WM

Length: 9min 55sec (595 seconds)

Published: Thu Apr 22 2021