Office Hours: Get started with FigJam

so welcome everyone to the official um hours office hours for fig jam um i'm anna i'm a designer advocate and i'm joined by maggie who's also designer advocate and we also have a couple of thing mates helping us during this office hours as well so they'll also be like popping in the chat answering questions um and just in general helping us out so i guess we can all introduce ourselves all right cool yeah so yeah i'm anna designer advocate putting in that face stamp and i'm miggy also a designer advocate here at figma i focus a little bit more specifically on education and uh that's going to be like our first little tip is avatar stamps oh yeah meggy what's your favorite condiment i guess since we're talking about fig jam yeah oh okay my favorite condiment i really like using um like hot sauce and and mayo or like so like hot sauce ketchup and mayo and like i put it together with a little bit of uh uh uh what is it uh garlic and we call it queso mayo like in spanish right but it's really just ketchup mayo but i also put hot sauce wow this is like a whole fancy customized concoction you have here oh indeed i gotta keep it spicy yeah yeah i'd have to say mine is probably garlic butter i'll put it on anything and everything um so that's my favorite but yeah let's go on to learning more about the other fig mates that we have joining us um and they can go introduce themselves yeah hey i'm sawyer i'm a software engineer on fig jam my favorite condiment would have to be oh this is like tough probably mustard i don't like mustard on everything but like if things are good with mustard i love um and i'll just stamp myself i think i think that's uh that's my favorite condiment well hi everyone i'm priya i'm a product marketing manager at figma been working on fig jam and my favorite condiment is definitely ranch i think it can go on pretty much anything hey everyone i'm wayne i'm one of the product marketers at figma and my favorite convent is probably um sriracha any kind of hot sauce hi everyone i'm alice i'm the engineering manager on fake jam and my favorite condiment is probably the chili crisp not surprisingly and i think we also have a couple extra people joining so maybe carl can talk about himself oh uh yeah hi i'm uh i'm carl i'm also uh an engineer on the uh on the fig jam team and just here uh answering questions today so yeah all right cool is that everyone i think that's no we have andreas too right on the days are you here hi yeah i'm here um let's see favorite condiment uh probably like mayonnaise raioli uh on fries or anything really awesome i do love a good aioli all right so oh man we should have totally added them to the stage too but either way you gotta give a big shout out i'm gonna throw some emotes i absolutely love my emotes let's throw in those little heart eyes all right so let's give it up for the team um next up all right what are we talking about cool yeah so figma uh mickey will actually be showing this up a little later but if you guys haven't checked it out yet we have a whole bunch of community templates out there for fig jam um both created by our team but also there's been a lot of people out there that have been making their own templates and sharing them so definitely check those out if you get a chance it's a great way to just get started if you don't want to start with a blank board and we have things like related to brainstorming um team retros virtual stand-ups design critiques as well so there's a whole bunch of different options out there that you can already get started with and building off of and then the next thing we wanted to talk about was help and support so we do have a support forum that's if you guys have any kinds of like questions or need help from the team um so definitely go check that out if anything comes up as you're testing out fig jam and then also we do have a help center so that has a lot of answers to commonly asked questions related to fig jam as well so be sure to look at that also if you get any questions but also during the live stream we will be answering questions live so you can enter in any of them into the q a and then either people on our team will be answering them in the chat or we'll be responding to them live as well cool so i think that's all of the interest so far so going into fig jam um this is one of our newest features that we've released at config if you guys don't know anything about it the exam is basically this open collaborative space where people can brainstorm and collaborate as well and um you know here at figma we've always been trying to create tools that help empower designers and other people like engineers product managers marketing people anyone to be able to collaborate together virtually but we realize that actually a lot of the design work starts way before you go into the figma file and start creating screens which is why we need big jam is basically that's a way to actually start you know brainstorming with your team and coming up with user stories doing all that ideation that you need to get to before you can actually start building a screen and then as we'll show you um during the live stream you can also use big jam any time throughout the design process so if you have any kind of like feedback you want to get you can bring in designs from figma to favorite jam for live critiques um you can also do retros after you're done doing a project to reflect on what went well what could go better so there's just a huge variety of use cases for fig jam and it's super powerful all right so yeah let's get on to jamming um mickey i guess you can take it from here okay one sec um i did want to take an opportunity to uh give priya a little bit of a showcase though um priya are you ready to talk a little bit about fig jam or yeah yeah what do you want to know all right so basically um we just want to know a little bit about the uh the goals of the team when building fig jam you know here at figma we're all about open design so we just like sharing some of those insights yeah totally so um i can share a little bit about what the team had in mind when we were actually designing fake jam um there were a few core things we knew we really wanted to get right the first was really just making sure that fig jam was easy for anyone to use not just designers the reason for that is the activities that we were thinking would be most common in big jam brainstorms retros or things that involve you know the entire team so we really wanted to make it easy to learn and easy to use we also wanted to support a lot of the use cases we were already seeing in figma and so we'd actually been seeing a lot of teams try to use figma today for brainstorms and diagramming and so we prioritized those use cases because we knew that they were things that you know our users were already trying to complete um i think another thing that was really important was just trying to make it really fun and and playful just so that everyone felt really comfortable you know sometimes it's a little bit um it can be a little bit intimidating to share your ideas and participate in some of these retros and um ideation sessions so we wanted to bring in that sense of like playfulness and joy um and then the last thing i'd probably call out is just making sure that we connect it to figma um that's something we're really just getting started on but i know that you're going to show a couple of ways that teams can already do that today awesome thank you thanks for sharing that we really appreciate it okay so i'm gonna get started here um just thinking a little bit about what fig jam is for um first things first we're actually going to begin by highlighting the community one of the ways that you can get started with fig jam is using some of the existing templates that we have made available so we have uh templates that are made by fig mates internally here at figma but since it's released we've already had a number of different people in the community start to share their own custom main templates in the community so i actually have here if you go to sigma.com community slash fig jam you'll be able to find a whole host of different uh opport uh different templates that you can use so if i click here i can go to fig jam and i can see some different uh templates to kind of get started with i'm actually looking for the um i already have it pulled up here let's do it that way um i have the virtual stand up so let's pull up the virtual stand-up template and i'm going to go ahead and i'm going to duplicate this and i'm going to duplicate this into my my twigma organization and what i'm going to do is i'm actually going to copy the elements that i have and bring it over into our jam file so here we are this is actually made by a fig mate an engineer here bursible i'm going to go ahead i'm going to copy that and just head back over here into our jam file where everyone's at and pull this now what a virtual stand-up is is you know like you're just having a meeting and you have your teammates and we're getting together and sharing um you know things that are going on for the week what they're going to be working on and i can already see sawyer and priya beginning to add stickies uh one of the prime features of fig jam is gonna be these awesome stickies i really love the stickies that we have here in fig jam because it shows a little bit of authorship i can hide the authorship i can show my authorship i can leave let's see leave various comments everybody's going to probably leave more relevant comments than i am uh priya's like this is office hours um you know so if we're thinking about our kind of like little fake organization that we have here twigma right this is our virtual stand-up we're having our meeting we're engaging with each other and um you know like talking about what we're gonna be working on and uh you can see here we're adding in stickers i'm gonna show you all how to add that emoji wheel that we used earlier so if you press the e key you can see there's like a sticker wheel if i press the e key again i have the emotes so the emotes i can just kind of give an instant reaction if i press the e key i can press the e key again and i can leave stamps so let's say if we were voting on something i can leave a stamp with my face to say hey i voted on that if i press the e key again i can leave a little sticker for a star um so it's a great way to just kind of easily get together and kind of share what it is that you're working on so virtual stand-up we're personally you know on our team here at figma we use this all the time so on monday mornings we get together we have our virtual stand-ups in fig jam uh anna do you want to take us on to uh our next use case the brainstorm yep awesome let me share my screen all right cool so maybe after your team has done a virtual stand-up they want to move on to actually starting like a brainstorm portion of the workshop that they want to do for that week so this is actually pulled from a template that exists in the figma community it's pre-populated with spaces for people to put down their name as well as some post-it notes that they can start filling out with ideas so here you can see a inaction brainstorm from the twigma team about how to improve the checkout experience um as mickey showed before you can react to ideas that people wrote on post-it notes using the stickies as well as your face um we also have some different shortcuts so you can hit m to actually enable the marker tool so you can see he's having fun doing drawing maybe i'm going to add a couple like stars here i'm not nearly as good of an artist as he is um and then in addition to that you can generate more stickies by either pulling from the bottom here or clicking s that'll easily add in a sticky for you and then if you want to keep adding a bunch of them in a row maybe you have a lot of ideas to put down um i think you can do command enter and that'll automatically place another sticky next to the one that you already created so yeah stickies are just a really great way to brainstorm with your team plus you place your ideas you can even organize them together based on different themes it's something that our team has personally been doing a lot um as we're coming up with different ideas and collaborating together virtually um and then some other cool stuff that you can do so here you can also insert images um so maybe part of our brainstorm is we're critiquing the kind of images that we're using in twigma and something really interesting you can do with those is actually if you click on an image that you inserted we have this little crop tool and you can actually choose what kind of shape it wants to be so i can make it a square i can make it a circle landscape anything like that um i can also just you know move this around or enlarge the shape that's behind this thing i can also custom edit where i'm cropping the image so it's just super useful thing if you want to incorporate images into your picture files yeah those images are great i just learned how to do that yesterday yeah um yeah and then these are just some of the shortcuts that we talked about before if you guys want to review those so m for marker s for stickies and then um command enter for mac and control enter for windows if you want to keep adding multiple stickies cool so nikki do you want to move on to the checkout the flow part absolutely all right cool so my screen is now being shared so one other cool thing so we've noticed um so we have like the marker tool if you look down here we have this awesome little jam toolbar uh so the toolbar you know we can bring up our like marker tools we can bring up our stickies but we also have these great shapes so what i'm going to do is i'm going to take this shape right from the toolbar i'm going to drop it in this is fantastic for diagramming so if i go over here to my toolbar i can actually change what shape that i want my shape to be so if you're familiar with like the diagramming we have squares we have parallelograms um and we also have circles and triangles and diamonds so actually i think we have all of those but so uh i can change the color right i can add some text if i double click i can add the text here so i think priya is actually up here in my file at the same time adding to our user flow diagram so we have a user flow we're thinking about our checkout flow for our you know fake organizations twigma we want to sell more plants so we're able to kind of work together on this diagram um really cool things about the diagramming i can add in my text i can make my text larger so i can set it to a heading or a title size we have a number of those preset sizes but the one really cool thing is i can actually just go over here to the right and click that little plus and it'll automatically create a new text box and they're automatically joined so even these little arrow connectors i can control the thickness i can control the type i can make them dotted lines and once again it'll continuously keep that connection to my previous element so here i can just say all right cool i got another little bit there don't mind my you know sophisticated typing abilities here and i can add another little bit and i can also change that color so with the connectors there's there's two different ways to do that the shortcut key for those connectors is going to be shift c so when i press shift c you'll see it highlighted down here in the jam bar and i can just drag from any point to any other point now this isn't just limited to those shapes if we look at our broader diagram here we also have these elements that have been pasted into figma um we have these little white boarding uh uh wireframe diagrams of a mobile design so what we can actually do with that connector i'm going to press shift c and i'm going to connect it it'll also keep that relationship let's say if i want to move it down to the bottom i can further that that kind of like relationship i can move it down to the bottom and because this is brought in from figma it's still editable and i can say you know wireframe001 you know that's how i'd be naming my wireframes and then also i can go in in between those little areas you'll see there's a little text add so i can add in text and say you know connects and does the thing so when it connects and does the thing i can add in the text color background i can change the color so you can fully customize that experience and once again the great thing is is that those connectors constantly keep that relationship so we just have a couple of other examples here shout out to tom lowry for these other examples so these are other types of charts and diagrams that can be made and once again they're using the same lines and connectors and except they're being tied to text objects and especially if you're really like you know like noting through those elements um so this is just another example so this is when we expand into twigma music and twigma movies this is kind of like that little bit of a brainstorm so lastly what i want to show in this little section is how to bring over some of those elements from figma so over here i have uh where's my team so like here's my team um in my team i have a file that's my mobile checkout flow i already have that open right here so i have my mobile checkout flow in figma and i want to bring it over to fig jam for team critique so i can go ahead i can select all of my frames i'm going to hit command c so i'm going to copy it and i'm going to paste it right back into fig jam so one little detail on that as you bring things over they're still going to have some degree of editability right so i can still hop in here and i can change some of this text if you don't want that text to be editable in fig jam right so like let's say you want to restrict that this is a little bit of a deep cut what i can do is in figma i can designate that layer as being locked so if that layer is locked when i copy and bring it over into fig jam i'm going to just paste this down right here now i can't edit that anymore and you'll see that little locked layer above so that's a little bit of a deep cut for those power users out there but while we're working in this space everybody can leave comments they can leave their stickies they can leave little reviews they can emote and better kind of address any issues in these flows now as i have all these elements here i can move them independently of each other and once again i can add in those connectors and kind of pull them together so you can see that relationship so you can take all of those individual frames from figma bring them over into fig jam and then use these kind of dot connectors in here one other thing i think somebody asked the question you know can you bring what you're working on in fig jam over into figma you absolutely can you can paste those right back in so that interoperability between figma and fig jam is going to be really really awesome very clutch oh let's go back here and anna are you ready to uh show us and uh the retrospective yep alrighty so yeah so your team has gone through first going over what they're going to do in the week they've done a brainstorm together um they've gone through and mapped out their user journey flow create a wireframe to designs based on that and then the final part um you can actually also do your retro and big jam so actually one of the people that you guys met today wayne he created this awesome retrospective template that you guys can use as well it's really well organized it comes with some post-it notes that people can already start using or you can enter in your own and then something i want to show that's really cool was miggy actually created this little clipboard component and what you can do is you can actually bring in components from figma into fig jam as long as it is part of the same org and you can also bring in responsive components so for this clipboard for example i can keep adding on you know different items to this and it'll responsively expand as i continue to add new action items and how you're going to be able to do this is so here we have these components um these are also some really awesome stickers that different artists in the community have created for us um so yeah you can see the name noah jacobs he created these awesome ones here that you can use during your brainstorms um and what you're gonna do is if you want to let's say i want to add some twigma components here so i'm going to click this plus button it's going to search through libraries you just search for your own and then you just click add to file and then once you do that it's pretty much available for use right away so i'm going to go back here um let's see the browsing section yep and i have access to these wireframing components and brainstorm or design critique elements that i can literally just drag into the file um super easy just pull these in and i can use them right away and yeah it's really useful so if you guys have any kinds of like specific components that you want to be using in your brainstorm you can use that um or if there's any like cool stickers you want to use to react so we have a bunch of cute stickers here saying like let's jam um and to react to all the different um sticky note ideas that people have so in addition to our stamps and emote reactions we have these stickers you can use as well to express your opinions um it's just like a lot of fun and makes the fig jam file look really awesome so and if you have a company oh i'm sorry no you can go ahead if you have a company you can just make publish your own library of components and have your own stickies yeah oh one more thing you can also search things by um so different like identifiers so if i wanted to search for like a heart sticker for an idea that i really love you just search for heart and it brings up all the ones that are related to that which is really cool so i can easily pull that in also you can leave this um panel open by just dragging it and it'll automatically stay to the side so as i'm working through my files i want to easily pull things in it's pretty simple to do that as well awesome and then i guess now going on to miggy has some really cool tips on additional things to know about fake jam all right so let's see um cool all right so um all of these little elements here these like little like push pins and um these are all custom made in figma brought in and uh those of you that are really familiar that with figma you are our figma pro users um this section is for you to really highlight all of the features brought into fig jam that like thoroughly respect the hardcore figma user so first thing i'm going to select all of these little cards i'm going to go right here and uh auto layout them i will not auto layout them but you know like um ali auto align them i think that's the proper term so here i can kind of like expand them bring them out and let's start to talk about all of these like kind of rapid fire features that are available in fig jam so first off the keyboard shortcut pane uh if you go over to the help and resources keyboard shortcuts so those of you that like to learn figma using the keyboard shortcut pane you could easily kind of go through uh each one of these here um and then as you highlight each one of those keyboard shortcuts uh they will highlight um so that's keyboard shortcuts pane next up zooming so zoom to fit i can select these two elements and press shift two and it'll zoom to fit anything that i have selected so if i have this little questions over here and i select that i can zoom into it and then if i press shift one it'll actually zoom out and see everything as a whole so these keyboard shortcuts are really really helpful especially if you're going to be the ones running the meeting you know you're holding the agenda next up we have arranging layers so here i'm actually going to ungroup this element and we have a number of different layers here so i can bring it forward send it backwards so i can say send it back right it's back there i can also use a shortcut key command um what is it forward bracket to kind of bring that up or i can bring it all the way to the front so if you're familiar with that in your design applications with figma you know it's going to be the same here all of these text fields that are brought in here are actually like auto layout text fields so uh if you want to bring in like a custom font all you have to do is copy paste the text field from figma uh next up grouping so right now all of these objects are grouped whenever you select an element you'll see this little window pop up at the top it gives you the opportunity to ungroup to regroup to ungroup so even over here i can choose to like align those to the left i can align those to the right i can align those uh up top or i can kind of like redistribute that so all of that kind of like arrangement and grouping of elements is going to be really powerful for you to engage in in fig jam next up saving local files in the same way that you can save a dot fig file even though you know uh if there's some reason that you absolutely want to keep that that file local you can go here file save local copy and that is uh gonna give you a dot jam file uh to work with that uh next up um some of you have been seeing that we have thumbnails on our fig jam files um though it isn't currently and you know fig jam is still in beta so some things are still being worked out uh it's not a native function but if you bring over a frame from figma that frame will give you the opportunity to set it as a thumbnail right so you create a thumbnail in figma you copy you paste it into fig jam you can set it as a thumbnail you're gonna be good as golden um so especially if you're saving a file that's gonna go out to the community and you want a nice thumbnail to kind of follow it that's what you can do next up version history uh version history is going to be very similar to figma i right click i can go file show version history so you can even save iterations of your file to the version history this is going to be really important because like let's say you have a presentation everybody throws a bunch of stickies on it you're like oh man i didn't have like another version of that you can easily kind of unwind and go back or rewind and go back to a point in some where you didn't have those stickies at all so here i can actually look at my autosave versions and we could see that you know yes in fact we all had been working on this file as far back as may 4th so that's going to be there version history is going to be fantastic it's going to function the exact same way that it does for um uh uh the way that it does for four figma okay and i just press escape to kind of close that out uh next up where are we at quick menu so the quick menu function is going to be just like in figma um right now the keyboard shortcut for it is still being sussed out like i mentioned you know we're in beta so um command p will bring it up i know that that's the international version of the keyboard if you want to know and you're looking for it it's going to be over here in the top left and then you go file and i'm sorry go to quick actions and anything that you type um you'll basically be finding the existing functions within fig jam so i can start to type in you know uh let's say you know lock layers right so if i have an object selected and i want to lock it you know i can pull up the quick command menu and i can say lock unlock selection so now it's locked and i can do that again and say unlock and now it's unlocked so that's going to be great anna you did the making the library available in fig jam right uh yep that's already covered so we're pretty much covered with that um the the making the library available so like if you want to make your own stickers uh all of the stickers that we have here they're just made in figma using auto layout and kind of brought in so these are some stickers that you can find in the default library as i look through what i want to make sure i'm giving the proper attribution so these are foodies by skinnyships and we also have a really really cool d d one uh that's made available by where's the artist's name i always lose this one there it is uh this is the monster manual by alana louise so what's really cool about these um we made these fully editable right so i can go in and i can type and then i can expand and i can keep that going and i can keep that scroll going as long as i need to so i'm just kind of filling up that space there right so what's really cool about these is let's say you know you're using them and you want to make your own you're just like yo miggy i see that you've got these really cool stickers as defaults but i want to make my own just copy paste them put them right back into figma so i can go over here to my uh oh where'd my figma file go nope don't want to do that just yet let me create a new figma file because i don't have one open let's say here uh let's go to my drafts create a new design file and uh i hit paste so this is now pasted in you'll actually see it show up as an instance so i can detach that instance and we can actually see how this is created using auto layout so um if you want to play around with that that's something that's going to be really cool uh if you have that like you know person who's like really really big in a nic to figma and they want to produce some really cool stickers for your team uh kind of show them that all right q a tom is there anything that we need to cover uh anna or priya did we go too fast um yeah someone asks a great question about how we inserted the mobile wireframe um so one of the things that we did a little bit earlier was you know bringing in our own um design system components and so that's one way if your team really wants to you know put wireframes in big jam and working it together that way you can actually create your own wireframing components and pull that into fig jam yourselves um which is super useful yeah so you you show them right here we had that library that's already part of our team so if we go to i need to get my i need to get my tabs in order is what i need to do so this is our team and uh anna yeah so like this is the uh the checkout flow and these are the twig jam components that we had made available so here are the twig jam components they're published as a library and anna you had a really cool tip that you posted on um on twitter the other day right that talked about organizing these yeah so i know a lot of times um components can get really complicated in terms of naming especially if you have a lot of different components in the same file so actually one way that you can better organize them is if you create um separate frames within your fig jam file as well as separate pages um that hierarchy is going to apply in the left side assets panel as well so you can see we have different frames with the titles those are going to be the names of the different drop downs so right here we have twig jam chrome opponents and then over here in the assets panel swift jam chrome opponents so that's how they're going to show up and we also have the the phone so what this does is this is currently published and up to date so if we were to make any changes um let's say i make a change to i'm going to change the selection color just make that selection color change is that an instance or is that a oh that's just an instance is this this is the actual component let me change it on the main component so i'm going to change that color so i can hit publish i'm going to publish this and now when we come back over we'll see that we have a component update we hit update and now that it's update we can see that color change cool any other questions any other questions let's see uh use the check box oh yeah um can you show how to add libraries on the organization level on design so um i don't believe is there is there anything different with adding the library on an organizational level versus like a team level anna that you know of i don't think so i think as long as the gem file that you created is within that specific team or organization you should have access into importing any and all design system files that are available to that team or org yep so yeah so like you can add those libraries just like that um oh yeah so variance we didn't really talk too much about variants um so one thing here we have a really cool sticker set give me a hand by olenka and what this is is each one of these is a component set like a variant object so we can actually set and change the individual ones that we have here so if you were to go to the agenda kit you can select the agenda and here each one of these are a different variant in that component set so i can change it to blue i can change it to brown um and then another one that we had that's pretty cool is a list item so you can add a list item this is like a to-do and you can use the variant to create it as being checked off so if you have buttons in your design system that you know you wanted to test out maybe within some like wireframe template you can use those variants to uh begin to swap those out there any other questions maybe for like the eng team for priya uh maybe someone asked what your favorite thing is about big jam what's my favorite thing about fig jam um i think my favorite thing about my absolute favorite thing about fig jam is making stickers um like auto layout stickers um it was it was a blast to just kind of like make some of these um raji got to work with skinny ships and making these auto layout ones uh and then i got to have a hand that started starting to figure out how some of these were created so i think that that's one of the biggest opportunities i'm really excited for the community to see what people create sticker-wise and what they publish out to the community as well all right so oh we also got a question about this earlier but um yeah if you guys notice little headphones icon um by our like profile faces in the top right corner that's actually for enabling audio it's available both to fig jam and figma um and basically it just lets you be able to talk to your teammates as you're collaborating in a file without having to send like a separate invite to a meeting um so i think the main reason behind this is we really wanted to enable people to do a lot of like spontaneous collaboration so maybe someone comes into a file and then you can just like chat as you're working yeah so audio i think is still you know it's still coming it's still a feature that is gonna be like turned on in beta for some teams so it's not fully rolled out yet all right cool so um actually there's one other thing that i wanted to show i didn't have the opportunity to show with the variant so here we were doing the critique right so this is like a product image critique this is also just a variant object so we can say like in progress complete you know so you know really want to lean in on you know there's a really cool opportunity to kind of make custom components for your team

Channel: Figma

Views: 5,721

Rating: 5 out of 5

Keywords:

Id: 7TNIw6aSF6Q

Length: 38min 24sec (2304 seconds)

Published: Mon May 10 2021