Intro to Figjam: Beginners Guide 101

in this video I'm going to give you an overview of figjam an amazing tool offered by figma that allows you to brainstorm create strategies or even simply take notes in a very fast and efficient way so the very first thing that you want to do is to download figma or open up figma in your browser so once you're in the homepage you can simply click on new fig Jam board and as you can see we are now in fig Jam and as the first step we're going to rename this document to nodes and uh below you can see the main areas of Interest which are going to be the tools the very first one is going to be the marker which is going to enable you to simply draw directly onto the Fig Jam board and as you can see all of these elements are resizable and uh you can change them up in a very fast and efficient way now you can also add different shapes such as ellipses and uh if you hold the shift key you can actually create uh circles and you can also add text within these shapes so for example to write in text and as you can see on the top you're going to find all sorts of different tools which are going to enable you to change the shape and actually literally if you want to use around the rectangle for example or change it to a diamond you can do that even after you created the shape you can also change the color so you have all sorts of different presets which you can leverage in a fig gem when it comes to the colors or you can simply click on the color wheel in order to sample a custom color directly from uh the wheel so this is going to enable you to customize the Fig gem file as you prefer on top of that there's also some other options which might be useful such as the stroke so if you want to add a stroke you can simp select it here you can also make it dashed so these are are all tools that are going to enable you to create documents with a clear hierarchy and the visual structure as you're going to see in just a moment and uh you can also change the font of uh the text and uh you can also make it bigger or smaller by using one of these presets or alternatively you can even set your your own amount such as if you put it to 100% as you can see this going to make it quite bigger and uh of course all of the basics such as making a text bold or a strike through you can also add a link directly here so I go and change it to google.com now we have a hyperlink directly into the document and even when we export this fiction file to a PDF for example you're going to have the hyperlinks directly there on top of that you can uh change the alignment if you wish and uh other Basics which uh we're going to explore in just a moment so let's say that we're creating a site map for a new site that we are working on going to change this uh to home and and uh going to Simply select the basic stroke I can duplicate these elements by using shift and the option ALT key and I can change the color so we're going to say this is going to be the about us let's make it a little bit smaller also in the size let's make it extra large and we're going to create a few other pages and uh rename it to Services contact us and now we can actually create a connection point which is going to be really useful to create these hierarchies so for example right here as a click on connector you can see that these uh Four Points appear in the element and this essentially mean that if I hold and drag onto another element there's going to be this connection point you can also select the connection point and uh you can change the thickness and uh also if you want to make it dashed or even add text in between so for example goes to and again all the other options that we explored just a moment ago are going to be available right there and then to customize the solution based on your visual needs you can also create uh connection points directly from the sides as you can see these connection points are smart in the sense that they are going to realign and redistribute themselves Bas on what they feel it's a good connection anchor for that specific scenario so these are all going to be quite useful in all the different instances that you might want to explore on top of that another useful element in fig gem or the sticky notes and these are going to be really useful whenever you're dealing with uh uh for example brainstorming sessions or things of that nature so for example I'm going to add a list of over here which uh is going to be um with a few different items say list do this free as you can see you can also view who created and worked on that sticky note so again there is this collaborative aspect which is really going to be a game changer whenever you're working in teams because a person might be working on sticky note of color another one of another color so you can visually differentiate uh who worked on what and uh this something that uh we use uh at the company that I'm working on full-time quite a bit whenever you we doing ux research ux brainstorming so all of these elements uh that uh we're seeing or actually elements that uh seeing multiple thems use quite efficiently especially if you organize the entire um structure in a way such as in the ones that are suggested in the templates as we see right here so for example there is this template called daily sync where you can see in action multiple of these elements all together so over here you can see see all the quick tips which for the very most part is what we covered so far and uh as you can see you can have different sticky notes different sections for different times and also different team members so there's really the sky is the limit when it comes to all these options in fig gem another cool thing that you can Leverage is the stickers and uh this might sound or or seem like something that is used just for fun but this can be actually quite useful whenever for example you wanted to quickly identify if uh a pro if an element or R design is uh is good you can simply add a positive sticker next to it so you can also add stamps this is something that we actually use even more than than stickers so I can actually get a few different designs from figma which you can copy very easily I'm actually um I didn't prepare this ahead but I'm just going to show you this because it's uh very very easy and uh here we have a dashboard that I recently uh work done for a tutorial based on a UI kit and I can literally drag and drop it inside of the file I can also simply add the sticker on top of it and uh this is going to enable for example a team to decide which design solution they prefer compared to a series of different options so definitely something to keep in mind you can also add sections just like in figma so you can uh use a section to ident identify a set or a subset of designs in one single area and um on top of that you can also add tables which uh it's not a feature which I personally am using uh often or almost not at all but uh it's definitely an option especially if you want to add some more granular data into the design process or the brainstorming uh aspect of it so you can add for example data table you can add text and uh it's going to be label and then you can add all of the different uh numbers or or elements related to that specific uh table you can change the color you can make them of any color you want really just like all the other elements you can be quite granular also when it comes to this so for example you can add the top um column or the top row in a different column in order to identify uh the top labels from all the rest and if there is for example a row at the very end that needs special attention you can uh just change the color of that one so you can go quite uh uh quite in detail when it comes to this uh this feature and um yeah it's pretty pretty easy pretty simple overall there isn't much more that I want to share at this point there's also the arrows which might be useful in uh to consider in uh some instances and of course course just like you would in figma you can add comments and uh tag people directly uh directly here so this is pretty much it when it comes to this introduction to Fig Jam hope it was helpful and I'll see you in the very next video

Channel: Pierluigi Giglio

Views: 375

Keywords: ui design, ux design, web design, designer, design

Id: 2ALypU3Sy6c

Length: 12min 18sec (738 seconds)

Published: Mon Nov 13 2023