Office Hours: Tips and tricks from the teams that build Figma

first of all we have an amazing live stream planned for you and we've actually done nothing like this before we have over 10 speakers that are talking over many different subjects over design about plugins project management product research engineering branding illustrations here's all the lovely faces below of all of our great speakers uh something that we get a lot of questions about uh and this is a reason that i absolutely love office hours the question is how do sigmates that's right we call ourselves fig mates how do fig mates design and how do they use figma so we're going to be able to speak and listen to 10 different speakers about their area of specialty now they only have five minutes so this is going to be rapid fire the other thing is if you're a beginner there's going to be content for you but if you're an expert there's also going to be content for you here so i'm absolutely stoked out of my mind on this live stream but i can't take up any more time because they need to get to their content the other thing is i'm probably going to butcher their intros or introduce or embarrass them so without further ado we're going to kick it off with no 11 our director of product design noah let's see an introduction from yourself and let's see what you got for us awesome thanks raji everyone i'm noah it's nice to meet all of you i'm here in san francisco enjoying a nice breakfast it's 8 30 in the morning here and super excited to kick things off i'm gonna share my screen um as raji said i am the director of product design and i'm gonna share a bunch of tips with you see if this works you should see my figma screen and also a browser in the background looking good all right so i don't have a lot of time i'm going to start the timer and here we go um this is a bunch of rapid fire tips of things that i use if i'm maybe in a hurry between meetings and i need to make a quick mock-up or something and so maybe these will be helpful for you too so most of these are useful for like maybe quick bug filings or quick sketches but maybe not so much polished mock-ups given that the pace of things and if i'm going too fast at any point don't worry uh this is all going to be posted on the community on my profile page i'm mostly going to be referencing mac shortcuts but for the most part if you're using windows or chromebooks you can just swap command for control or option for all there's a bunch of stuff here and if you see a little lightning bolt that means i probably use this shortcut multiple times per day and again this will be referenced later you can check this out anytime so i'm going to go through these pretty quickly there's going to be a bunch of gifs and then i'm going to demo them is if i can get to it so the first one is just using screenshots to copy them to your clipboard instead of saving them to your desktop this is super useful so you don't clutter your desktop with a bunch of images you don't need instead you can just draw the bounds drop it right into figma the next one is quick crop this is if i have an image i can just double click it if i'm holding option and quickly crop the area that i need i use this all the time especially if i'm making something quick as you can see here and i'll demo all of these after i get through them all the next one is duplicate this is if you hold option when you drag i use this one constantly for anything from images to text the next one is group frame so this is if i grab a bunch of objects and i want to quickly turn it into a frame so i can turn it into something like a card or something different like that um when you're resizing hopefully you know if you hold shift or option it will change the direction from which you're scaling whether it's from the center or whether you're locking the aspect ratio you can also ignore constraints so here you'll see that's with constraints the objects inside move and if you ignore them when you hold command as you drag it's super useful for resizing the contents of a frame community search this one's a fun one i set up an alfred plugin so i can just type in something quickly and open up something from the figma community right away really quickly this is super useful if i need a quick icon or a quick asset if i'm just trying to illustrate something very very useful if i have something like arrows i need to draw i can just hit space and then type in a dash and a carrot and with certain fonts it will actually just turn it right into an arrow for you again if this is too fast for anyone don't worry all of this will be shared afterward on the community so you can look at this at any time including all these gifs the next one is scrubbing inputs so this is where if any input field for the most part on the properties panel if you hold option you can just scrub across the screen and it will change the property super super useful if you're especially not trying to be too precise but you just want to change something from here you can copy paste style this is a super useful one if you just if you weren't using components for some reason and you needed to make a change it allows you to quickly change content to match another one you can even use it for images i use my numpad quite often to change opacity of objects and so in this case i'm just hitting the number keys to change it to be slower and from here another trick is if you hit k you can quickly scale objects this is useful if you're not just resizing it but you need it to change in direction as well vector shortcuts if you're drawing something i oftentimes will hit p to jump to the pen tool and hold option or command to have various effects like removing points or bending objects tidy up super useful if you're just kind of working quickly and you want things to be organized into a grid flipping i use this one constantly i just hit shift v or shift h and it will constantly change the direction of what my object is auto layout super useful i use this sometimes even for like organizing screenshots and collecting them in just one click and rearranging them if needed an emoji picker turns out this is just available from pretty much any application doesn't have to be in figma but i use it in figma a lot if i need emojis and there's the window shortcut if you need it as well there's a couple plugins that i like to use this one is the material design plug-in for icons i use it because no matter what you're in if you're in different project spaces it'll always be available no matter what i like to remove the background using this remove background png so here's a little image that i'm kind of removing its background in one quick click and dropping it right into the old figma office rooftop and finally downsize this is one to resize images to shrink them so i've about 30 seconds left and i'm going to go ahead and try to demo these in real time or at least a bunch of them i don't know so i'm going to open up the screen i'm going to use the shortcut that i talked about for copy paste this allows me to paste it right from the clipboard super easy i'm going to double click to just grab let's say the image that i wanted here i'm going to make sure it's cropped just a little tighter i'm going to duplicate it twice and oh my screen froze oh no well i only had four seconds left so i wasn't gonna get much further than that anyway so i'm gonna stop my screen there and if you are ever interested in looking at any of those again go to my figma profile page and this whole presentation will be uploaded there just in a minute so thanks for your time and hope you enjoyed that noah that was amazing and so fast but i didn't know about the alfred tip so awesome we got to keep on going so we're on to aaron next thanks so much noah hey everybody i'm uh aaron tesfaye i am an engineer on the prototyping team i joined last august and my favorite thing about figma the product is that it caters to a variety of skill sets whether you're new there's so much power in there and whether you're an expert designer there's so much more to learn as well so let's start with uh two things i want to share with you today one about keyboard shortcuts tracking so noah just noah just gave us a bunch of useful keyboard shortcuts now when i joined in august i wanted to learn as much as possible about the app and one of the designers on my team showed me about this little tip and if we go here to keyboard shortcuts there's this pretty cool uh um area that you can track all the shortcuts that you use for the first time as an example the move tool the frame tool any time you actually use the shortcut for the first time it highlights to blue and gray is is something that you haven't used so this is a cool area to explore different shortcuts that you haven't used i'll just talk about one that i use quite often and that is opening the design panel and opening the prototype panel so for example you're here you've got two frames and you're in you're in the design panel and if you just want to quickly go to the prototyping panel just to see what connections you have just press option nine and then back option eight option option nine so yeah so uh definitely check out that tracker and utilize those those uh shortcuts noah uh just showed us about and the other thing i want to talk about is plugins so say you designed this this landing page and you've got pretty much everything that you want except for a few things we'll come down to this area where you've got some testimonials and you want to include some some images but rather than going and looking up image one by one you can utilize uh plugins now first let's just talk about where plugins live in the community area you'll find this area plugins and there's a bunch of plugins that people have created to make our lives easier and you can just click into one just to get the description and you can install it right over here so let's go back to our our file and lets you use some of these plugins so let's uh let's add one particular plugin that i think would be cool is called ui faces and so what we can do is uh select all the avatars we've got six over here so we're just going to do select all with the same properties and then we're going to go to the plugins menu and then we're going to pull up ui faces so we've got a variety of sources we can choose from right now let's let's get some actors so we'll use imdb we'll go for female actresses we'll we want them happy and a variety of hair colors and if we just apply avatars we will get all these all these uh actors right right in there super simple another thing we may want to do is get some some dummy text for names and so what we can do is similarly select all of them and we're going to use a different plug-in this time we're going to use a content reel a really popular plug-in and there's a variety of useful dummy texts that we can put in the first one is full name but you'll notice that that this uses both female and male names and so uh content reel has a content library that we can search for what we're looking for so the first one let's look for full name female and here we are and we've got some names with all female names and we're just going to apply all and notice we got just random names inside here um yeah so this this makes it uh really quick with with plugins and then finally the last thing is say we have this little card here and we want to spruce it up a little bit what we could do is add a a drop shadow and we can fiddle around with making it super nice and there was a release last year with shadow spread that's really cool that you should check out a popular effect though is to layer shadows with different properties and we can certainly layer it here but maybe we can just use a plugin to make to make it a little easier for us so there's this plugin called smooth shadow that's super cool gives a nice little uh default shadow here of course you can play around with the values here but now you see how it drops off from really really heavy fades down to light and uh and yeah so that looks pretty cool cool so yeah so keyboard shortcuts plug-ins uh definitely uh check it out aaron thank you so much uh people were going woohoo oh my gosh amazing mind blown thanks for sharing those amazing plugins we're on to our next speaker it's remelia we'd love to have you on introduce yourself i'm on mute of course hi everyone my name is romelia ty i am a brand designer on the brand team i am in the bay area and um what i love um what we get to do regularly is the brainstorming part of our branding projects because it's a fun way to think big think wide and to have fun so today i am talking to you about fun brainstorming methods to get your wheels turning by the brand team so less technical and just more fun and creative and so i'm going to share two methods that we've used in past brand identity projects that you can use too that are super simple and really fun so what this is great for it's great for sharing inspiration i feel like in this phase i'm able to to to get into a sata flow to get excited about what i'm working on it's great for exploring the unknown so right now there's no yes or no right or wrong it's really cast your net wide and and and find what you need researching competition so seeing what's out there being aware and uh collaborating with your team i feel like this is such a fun way to see what your team is thinking about what's on their mind and being able to share so this first method is called a mind map sketchbook you probably know what a mind map is basically it's a diagram used to visually organize information you can adjust it in any way that you see fit what we've done in the past is we have the prompt on the very top here a space where you'll be putting in images that are inspired by the prompt and keywords that highlight that inspiration and this is great for highlighting themes that will help you create concepts and so an example of how we've used it was for the community branding we use images and pictures that we felt inspired us and we had we captioned it with words um that were inspired by the prompt but also captured what that image felt or looked like super super easy this next um method is simply lists and mood boards we've used this in the past as well so first you'll start with your prompt then you'll explain it in a more literal explanation then you'll go beyond um in an abstract way so think a bit more out of the box and then on this third part you should how should it look and feel so what you want others to feel when they see it and feel it an example of how we've used this was for maker week we have maker week twice a year where we get to do anything we want as long as it makes figma better and so how do we explain it a full week to work on a normal project solving a problem and so on and beyond escapism your new daily routine flipped upside down how it should feel daydreaming a big hug bright but not dark see how it starts to starts to change within each frame so from there we've taken these themes and these keywords and we put them on a mood board and then we start to collect images that resonate with those words and even start to collect color palettes from here we get to see things holistically we get we get an idea of the story we're trying to tell and then from there we create a concept statement that helps lead this brand identity so for example this was called fantastical world the concept is about building a world together adding our own twists to make something beautiful the response we hope is emotional adding to a place of escape and then we underline words that also resonate within the concept statement so anyways that's for me thank you thank you so much i don't think i've ever got a view into your world remy i love it thank you for sharing your uh your tips and your techniques very cool thanks awesome well we're off to neural net neural so glad to have you on uh feel free to introduce yourself yes hey everyone i'm the knurl and i can't do two things at one time so i'm gonna share okay great i'm nanura i am a researcher on the growth team here at big ma and one of my favorite things about working at figma is really just the jokes everyone has such a great sense of humor and so there is never a dull moment during our company-wide meeting so really really enjoy that but i want to talk to you all about how i use figma as a researcher and kind of what that looks like for me so um firstly i love trading cards so essentially what i use these for when i'm wanting to get more information or just kind of like set the tone for a research session with a participant i'll send these out as pre-work and so that way they can fill in some of the things that we may want to talk about during the conversation or maybe just things that i would like to know about them i'm just kind of like warming up the atmosphere and making things not seem so nervous i guess sometimes anxiety can come with participating in research so we definitely want people who participate and share their information with us to feel comfortable while they're doing that and so this is this can be a fun way to uh to kind of set the scene also what i really enjoy doing so i'm gonna switch here are exercises so these are different exercises examples of what i've done in the past and what we've done on the research team and we're trying to understand people um so for example mad libs during the research session we may want to kind of know some things about maybe how people use figma how they feel about using figma or other tools maybe how they're feeling in general about different things so there's some like auto layout magic or yeah happening here um so participants can come in and maybe like they can say weekly um or whatever as far as like what we would like for them to kind of fill in so that we can get more information on that front um so yeah those are typically pretty fun fun exercises we enjoy doing those and also um things like these where we're trying to understand like do people actually understand how to use figma and so this is an example of like trying to get an understanding of that so if we're talking about oh do people know like where to find assets well if we're asking them to find this uh starter pokemon pokeball component uh where could that be boom it's in the assets and so if they drag it over and put it on the pokemon that they want to capture we know that they know how to use um the assets panel and find components so it's just another way that we use stigma and something that i think is really cool as far as like interactive things and then also slides very simple kind of basic but still really cool to do in figma at least for me especially when i'm trying to dish out findings you know creating like really nice interactive slides is something that i really like to do especially when there's a lot of information that we may be going through side note tip here don't know if you don't know this or not but if you're in a meeting and you want to share a whole bunch of slides from different people and you don't want to have to like keep on sharing and then sharing different screens what you can do is have one person drive that fly share and then just observe so click on the person up here it's only me right now if you can see but other people who'd be in the figma file you can click on here and observe what they're doing and that way people can drive their own slides while just one person is sharing um so you don't have to go through the share and share share and share while you're on zoom um but like as far as interactive slides go you want to kind of split up the information just like oh where do we want to go choose your own adventure type style so you can go to orange info wow look at those findings awesome then you can go back and if you want to get some information on pink info you can go in oh ah like so exciting so i can kind of spice up going through and like looking for information and trying to get a sense of what was found in research if uh information is kind of kind of dense so that's how i use stigma hope y'all got something from that thank you so much nineral up i thought research was boring until i watched you and now it feels like you made research so incredibly fun also incredible use of auto layout for your mad libs i'm impressed that was all heather amazing all right well we're on to our next speaker uh and emily so glad to have you and hear what you have to share uh let's go ahead and introduce yourself all right hi everyone i i also can't multitask so i'm gonna share my screen um but i'm emily i'm a product manager at figma and what i'm gonna share of all of you today which i'm super excited to do are just small tips on how i as a pm use sigma day in and day out and while this might be a little bit novice for many of the designers on the call hopefully it's helpful for people who are new to figma other pms and other folks who are not designers in general and so neural already showed a couple of great ways that you can execute on slides but i want to show a couple of ways that i build slide decks slide decks are something that as a pm i do day in and day out and not surprisingly many of us at figma use stigma almost exclusively for slides and so the first thing i want to talk about is just how slides will even work in figma i ran into this problem a couple of weeks ago when i shared a slide deck that looked like this to a brand new figma employee and they were like how do i even read this like what's going on and so the way slide decks work is you can more or less hack our prototyping functionality where if you have content and frames which are a special type of box that you can click make when you click this icon our prototyping feature will actually read everything from left to right and top to bottom and so how you read this slide deck is essentially a presentation title and then you go through section a section b section c and now if i click this and i click play that's actually how you can get it to work pretty much like a slide deck and then you can click through and do all of the great things that mineral was showing i actually really like this visual grid method of making my slides more than that kind of like single line left to right or single line top to bottom which you can also do but this is really helpful for me for looking at like just generally load balancing the content and seeing if everything visually aligns um two other tricks that i really like in slight decks is we have a feature called smart selection but if you select everything and everything is kind of evenly spaced you can actually grab these handles and it will magically visually adjust the spacing evenly and that's that's been really helpful and nice for cleaning up things and the other thing i do a lot is you can use these handles to actually swap slides if you actually want to change sections you can do that really quickly while i have everything selected something else i use really often is what we call selection colors and so i'll use this for making sure all of my colors are the same i'm a very hacky figma worker and i won't use styles properly like all of these are just straight up hex codes but what you can do here is let's say i don't like this coral that's used in this title and in the section labels i can go to the selection colors on the right here click here and i can choose pretty much any other color i want and everything automatic auto magically changes together and this is such a lifesaver i actually use this to change grays a lot from like lighter gray to darker gray and whatnot something else that i find myself doing a lot is actually using figma to annotate and mark up screenshots this is actually probably not the most efficient way of doing it since i'll end up taking a screenshot throwing it in figma and then taking another screenshot but i usually have at least like 10 figma tabs open and so this is somehow most convenient for me but the way i do it is you click shift p to get to the pencil tool and then you can quickly draw and it does default to black 1 pixels but you can customize that by going to the right and in the properties panel where it says stroke you can change it to any other color you want i usually go for a pretty obnoxious fuchsia and you can go here and change it to a bigger size the final thing that i do pretty often is making circle avatars this is really helpful for when you're making a presentation and you want to do a shout out to all of the people you want to thank who contributed to the project and so here a small plug this is just my cat felix but what i do is because i'm really lazy i use the corner radius thing here and i don't want to do math to calculate the exact corner radius i need and so i'll usually spam the nine number key and that will give me a perfect circle so that's all i had in terms of my tips but these are just things that i do super often as a pm thank you all for joining thank you emily like i'm dying with you spamming the nines and then your colors or new band name of obnoxious fuchsia thank you for delivering stuff uh for like non-design pros just great ways to use figma appreciate it so much all right we're off to the races with heather heather introduce yourself hello everybody um i'm heather i'm a designer on the community team uh and one thing that i really love about figma is that it's literally designed to help you out and i'm gonna show a few tips um today with regard to that um so before i started using figma for work i actually used figma to teach a visual design fundamentals class to mostly non-designers and we would usually kick off the first day of class and we would ask people hey who here has ever used a vector editing program like illustrator or sketch or figma and maybe two or three hands out of 20 would go up but ultimately at the end of the class we would get them set up in figma they'd make their account um we'd show them kind of the ropes like layers panel things like that but then their first homework assignment was to actually make an icon set and we would give them all the resources they needed we'd point them to you know all the awesome tutorial videos that we have on youtube etc so that they could essentially learn the tool on their own um but there were a few tips that i made sure that before they left class they did all of these things and they knew about them because i thought that these were so important to just getting true beginners off to a really good start and so i'm just going to show you these tips real quick so the first one is the pixel grid so i feel like you know you hear designers talk about pixel perfect and things like that and it's sort of like what is the pixel grid how do i use it um and so if i zoom in really quickly you'll see i don't have the pixel grid but if i use my my commands i can turn it on and now you can kind of see the grid show up on these sigma icons and so i would show the the students this and just say hey this is like a what a one pixel line looks like when it's when it's aligned to the grid and you can see things are aligning really nicely here this will make sure that your icons show up nice and crisp and so just just being aware of that grid and turning it on so that when they zoom in they can actually see it is is point number one turn the pixel grid on know what it is know that it's there the second point was snapping to grid so if i zoom in on this lovely rectangle here you'll see that it's not aligned to the grid and if i show you the properties panel and click on it you'll see that i've got all these funky decimals here and this is not pixel perfect so when people say hey we want to be pixel perfect aligned to the grid they're not talking about these crazy decimals so you can actually turn on snapping which is shift command quote and you'll see a little label pop up here it says snap to pixel grid enabled and now of course when you drag this around it magically snaps and you get these nice round numbers and this will work for any new shape that you draw on the canvas and this is really great for um just you know making sure that they don't have to worry about this stuff that they don't have to worry about the decimals and this this is kind of like you know power power tip you know 101 for like just making sure things are aligned and not really stressing about that and if you do want to calculate or plug in decimals you can always do that um and do it really intentionally so you get that the nice you know 0.5 0.75 that you want things like that so understanding the grid being able to snap to it and then thirdly snapping to objects so there's no key um keyboard shortcut for this but if you open your your search menu command slash you can just type in snap and you'll see you have snap to object snap to geometry so you want to make sure snap to objects is selected so if it's not selected when i try to manipulate these and drag these around i don't really get a ton of feedback but if i if i turn it on snap to object then when i'm dragging these things around i get all this like delicious feedback about you know how these things are actually aligning to each other tops bottom centers the distance between them and i can very quickly just kind of drag things around and manipulate them and the reason i think this is really good for students to kind of have on by default is because it really gets you thinking about the relationship of your design objects to one another and proximity and space so when we get you know farther into the semester we really start talking about alignment and proximity in space they're already kind of building up this this muscle of like understanding the relationships of their objects to one another and just being really cognizant of that alignment and so this is another good thing that i i recommend all new designers kind of have on um and then the last thing is now you know they're designing an icon set and usually when you're designing an icon and you're working at you know 24 by 24 or 16 by 16 or something very small you're usually zoomed in really really far so you've got like some you know hundreds of percentages zoomed in and this is really great for you know getting into the weeds and manipulating all these points but oftentimes you can get really lost in the in the details here and what you really want to be cognizant of is like what does this actually look like for users you know 100 when you're zoomed out so there's this neat trick so i i personally love using the desktop app you can do this in the browser just by opening up a new you know browser window and opening up the same file but in the desktop app you can actually open up another instance of your desktop app and if you do that you can do a little split screen action so you'll see over here i have zoomed out 100 and there i am it's very meta and now i can do a little split screen side-by-side working where i'm manipulating these points here and then i can see in real time what this is actually going to look like on somebody's device or somebody's computer at 100 so i can really just you know be top of mind of how this is actually going to render for people um and if my last pro tip for y'all is if multiplayer cursors are getting in your way either you've got a ton of students in a file and they're flying all over the place or an instance like this where you're just playing around with yourself you can actually turn that off so again if you open up your menu and type multiple okay multiplayer cursors usually on by default but you can turn it off and now you can just stop the chaos get rid of the noise and you can just work like this side by side with a little split screen action so hopefully that was helpful for all the new beginners i love teaching figma and i hope these tips help you out i also use all these these top three tips i have these on all the time so that's that just like speeds up my workflow a ton so hope that helped thank you that was really awesome heather i've seen you use figma in ways that i haven't uh some hits were the delicious feedback really a big hit in that 100 zoom trick thanks so much for sharing that that was really really great for getting in on those icons all right well we're off to anthony anthony i hope you're all ready let's see what you got to share for us all set awesome hey everybody nice to see you um i've got a quick thing for you today so i'm anthony i'm one of the designer advocates i'm sure i've seen some of your faces before uh we're going to talk today very quickly about uh blend modes so blend modes uh little known thing in figma often you see them in um what we call like bitmap tools so things like photoshop and whatnot but we also do have them in figma too um i i see uh how i learn how to stop playing blend mode roulette because if you're like me i constantly sit there and i just sort of pick the blend modes and cycle through them until i find the one that i need because i don't actually know what i'm looking for what's going to do the best thing so hopefully today you can walk away with a couple things that will help you understand them a little bit better so let's do a little bit of history first um what are blend modes right so blend modes are where you have an active layer or the blend layer that blends with layers that are below it as well this is not entirely rooted in like the old art forms as far as things like dark like dodging and burning and whatnot but um when we started to digitize colors it became pretty obvious that we could do some fun stuff with those numbers right so you have simple blend modes like multiply where you're just multiplying values together you get more complicated ones like soft light i couldn't actually tell you what's going on here but you can sort of see how these things allow you to do some pretty interesting things with your layers there's two types of blend modes one is called um blend modes on the fills themselves so if you select a fill you'll notice that there's a little uh droplet icon where you can set a blend mode you can do you can set separate blend modes on each of your fills uh you can also set them on images or gradients or anything like that as well the other type is a layer blend so this can be either a layer that's an object or a frame that's containing other objects as well and you'll see that in the layers panel and it'll always say by default it'll say pass-through and maybe you're like me and you've always wondered what the heck is pass through why do i always see pass through so um to explain it very quickly pass-through is basically telling figma to allow the blend modes to not only apply to the current grouping or the current frame but also pass through all the way down to any other layers that might be below it as well this is generally the default if you use this in something like photoshop or any other tools normal is going to actually have it stop at that current group so here's a great example and thank you to marcin for letting me use this example here you can see here that when we have pass-through turned on by default it's passing through and actually affecting the layers before below us so below what we have here whereas with pass-through uh with the layer actually set to normal we're not gonna we're only gonna blend on the layers that are in that group not passing all the way through to the layers below it so generally you can leave it on pass through if you're just trying to get normal behavior another interesting thing if you've ever noticed these actual blend modes are grouped into different groupings and the groupings actually apply to what type of math is being used so uh we have darken ones which will add or or sort of multiply values upward and then subtractive colors contrasting comparative you if you want to read about all this definitely check out blend modes if you just google it you'll find a lot of really cool details on how all of this kind of math works and different tools will actually implement this in different ways so that's a that's an interesting one to keep in mind let's look at a couple good use cases right we could talk about all the different ways the blend modes work but what are some practical ways that i use these day-to-day a big one is removing backgrounds right so if you have a you know in in a perfect scenario we've got a nice svg there's no background color there's nothing like that sometimes we're moving pretty quickly and we just have a png there's a white background you can quickly knock those out using the multiply blend mode so you'll see here that we're able to actually just get the text by itself other great use cases for this are things like if you've got something that's in handwriting that you just want to take out the white background because you like shot a picture of a signature or someone's handwriting and that's a quick way to do it gradient overlays these are an awesome way to create more depth than simply just applying an opacity gradient over an image try the blend modes for something like screen or color dodge and you'll see that your colors will pop a lot more instead of sort of having a faded contrast so it actually helps a lot with with doing that kind of that kind of thing next we've got replacing colors or screening colors right so you can do fun things with typography using the multiply effect if we use hard light and color dodge as you see over here we can do some pretty powerful things as far as like creating screen printing like effects or desaturating and then applying hard light fill and things like that so um if you're doing overlays on top of imagery where you have colors try using the blend modes because you'll find that it looks a lot more vibrant or you'll get better contrast than if you just use a color at say 50 or something like that next desaturation masks so you can actually desaturate part of an image in fact you can do this with all the blend modes too you can have a mask that is use it like a mask where it's not necessarily the entire image but just a portion of the image where maybe you want to highlight something so in which case we may actually do the inverse of this right where we want just the the corgi's face to be in color instead of the whole thing but a lot of power with that one and then lastly uh inversions so some of the more creative effects you can certainly uh do things that we might uh might see on you know vintage uh uh television shows and things like that but um fun ones to play around with so check out those later sections like difference and uh contrast and things like and uh some of those examples there all right i am out of time thank you all good seeing you again and glad to see you i'm glad we're back anthony so glad you're back uh that was incredible i didn't even know pass through so you taught me something so uh so many people in the chat just saying like whoa you're demystifying blend modes i love it thanks man awesome thank you awesome well we're off to louie now louie introduce yourself tell us about you thanks dearest roger you can share my screen hi everybody my name is louis oyash and i'm figmas designer advocate for europe my favorite thing about figment is that i get to do this for a job what could be better today i'm going to talk about variance and variant organization more specifically so let's take a look at what we've got over here i've got a bunch of potential components lined up here the first thing i want to do is turn them into components so i'm going to zoom out a little bit drag the box over these and turn them into components and then for those of you that have used variants before this would be familiar but for those of you that haven't you'll notice that i've set these up with some familiar naming conventions so what we have here is a small large medium and extra small card component and we have different states of those components i have default inactive active and hover first thing i want to do here is to space these out a little bit more to give me some more room to play with so i'm going to type in 240 240 here to space them out a little bit and then what then what i want to do is combine them as a variant so i'm going to click the combines variance button and now what we're going to do is pull these together to create a layout grid inside of our variants i'm going to come down here check the plus on layout grid i'm going to change this to columns and then what i want to do is make a 4x4 grid so i know i need four in the count and i'm going to change the the gutter i'm going to change that to zero so on here just move the panel up move that gutter down to zero then we can then see we get some columns popping up i'm going to change the color to 100 so we can see that a little bit more and then what i'm going to do is add some rows in here as well pop down here i know i want four again i'm going to change the color to 100 and remove that gutter we then get a nice 4x4 grid on our variant panel the next thing i want to do is start to align these inside those panels so if i zoom in a little bit and just eyeball this one for now obviously you can spend a little bit more time when you're doing this yourself and i'm going to select all of these together and right align them using that alignment panel at the top then i can center along this one do the same with these and then line this one central as well and then align these to the left because i've moved it in from the right hand side and then the same with this one once that's done i can start to think about aligning them vertically so i can move this one to the center and pull these together same with this smaller version and then lastly with the small extra small version so we've got something coming together here if i want to take this to the next level i could add a background color onto here so let's add a fill on my variant let's make it a little bit darker so we can see that contrast and then i can add some labels in here so i know that i have my article card as the title let's just bump that font size up and then what i want to say is that i have different states and i have different sizes so i can duplicate this and say this is my state pull that font size down and align that like so and then i'm also going to have the size over here and i'm going to rotate this 90 degrees then i can pull a copy of this remove the pull the font size down again and say i have my default here i have my inactive i have my active and then lastly i have my hover state here and then the same for the sizes so i can pull this down like so and say large medium just align those together we have our small and then we have our extra small down like so and then we have a nicely organized out grid inside our variant component if you want to take it to the next level i've got an oven ready example over here if i just zoom in a little bit you can see at the top left section i've got some information about my card so i've got the title the platforms it's used on a description for how it will be used and also a label for the status of that component this would be really useful if you're building out a design systems theme that's maybe a little bit larger and people will be dipping in out of your files to see the status of those and you can see i've got my state and size labels at the top and the left and then some little pills that give me a bit of information about those components in there so this is a bit more of a branded example but something that hopefully you can use going forward as well thank you very much thanks so much dear my dearest louie uh thanks for showing us cool inventive ways to use grids as well which i probably never use grids like that so thanks so much man appreciate it a lot all right so we've got two more speakers left super excited about this one lauren are you ready yeah hey roggi thanks um okay so i'm gonna share my screen as well okay so this tip is gonna be a little bit um more geared towards uh engineering types hi i'm laura and i'm an engineer at figma i work on the figma editor um my favorite thing about working at figma is that working on a creative tool with creative people makes me feel more creative um and today i'm going to talk about using the plugin api to kind of like find things you want the thing that i do a lot as an engineer is one i don't organize my files well so there's not a lot of like styles or components and then also sometimes i get file sent to me where people found a problem and they have to find like in this huge file what is like the one node with a weird effect or something like that um so we are going to talk through using plugins to find things so i'm gonna go here uh you can use this link or you can just google uh if you're gonna plug an api overview um and this is gonna tell you all the ways you can programmatically interact with uh figma so i am going to take a file this is joey's nice ui uh file and it's really well organized lots of styles and stuff we can pretend that it's not and i'll open the javascript console and so i have this huge file like maybe i don't know my way around it maybe i'm looking for something in particular so the thing i'm going to do first is uh maybe i want uh to find all of the nodes with background blurs um so the way that you kind of interact with like the the thing you're looking at is current page so this is a page note if you expand this you can see all the things that it has has like all these children and stuff like that i'm gonna go kind of fast because uh this like you your use cases are as varied as there are like number of figma users um but you can find all the information about the things you need in this api reference so i'll do like figma current oops current page find all and i'm gonna find uh all of the nodes for which um some condition is true so what if i want the condition um return uh like effects is not null and effects uh let's see i'm live coding this is silly um effect dot type is background blur okay so now this is going to find all of the background blurs in this uh document um i can set these to a variable bg or we'll call this blurs um so now let's do like if i want to select all these um i can just set the selection to blurs okay so now these are all the nodes in my in my document with blurs um maybe i want to uh like i could filter this further maybe i could like filter this by just rectangle notes or something like that um but for now let's do uh let's manipulate these a little bit so for each blur uh node um and then i'll do like and dot effects and affects that filter wow very dangerous effect effect that type is not background blur okay so now i've deleted all the background blurs you can see like here there used to be blurs there's not anymore uh maybe i decided i didn't actually want to delete them i wanted to hide them like someone might want to see them later i can just undo like i just did command z um like you regular undo and then i still have blurs sort of like stored in local memory so i could do something else with them maybe now i'm going to do uh instead of filtering them i'll just do map and then i'm gonna write a little map here all right the other great thing is you do need to know a little bit of javascript but you can write really messy javascript because it does not matter so let's do a copy is effect i want to talk about this in a little bit um if copy.type is background blur um then copy visible equals and then maybe i forget what uh the visibility should look like so i'm gonna go here to effects uh visible is boolean so i'll just set it to false return copy okay so now i just set these all to invisible you can see uh i don't know how to find this or i could but i'm running out of time um so so that's kind of like how you can find your way around uh figma doc with plugins um these are my two favorite functions for sure is find all which finds all the nodes that match a thing and document find children finds all of the direct children of the given node so this could be current page or it can be any node um most node properties are gutters and setters they're easily mutated but as you saw from effects um you do have to kind of like copy arrays or objects because they're read only so you'll have to like write a write a new copy to overwrite the array or object but so it's a good way to kind of like bash around the plug-in api um and if you ever need help you can definitely reach out thanks lauren that was amazing and for what i would think is a group of designers these designers minds were absolutely blown and you may have made like junior developers of all these people so good job there uh we also have a comic that said can they use the find all method to find their toddler i hope so all right china awesome uh our last guest on is maggie or maggie from figgy as we call them here mickey and you introduce yourself hi i'm uh miguel or miggy from figgy i just gotta own it i just gotta totally own it raji um so i'm a designer advocate for uh education here at figma i just started uh earlier this january um one of my favorite things about figma is just the community and how enthusiastic everyone is so i'm gonna start off today um i've got a little short cookie actually add these shortcut keys to like my document just to kind of like help me remember myself uh what some of my favorite shortcut keys are so uh today i want to talk about when in doubt use ease in out talk a little bit about prototyping smart animate and the custom easing tool which just was released in uh august um so tweens whenever you're creating any kind of like programmatic motion in um you know like animation programs or things like that you know what you're doing is you're kind of creating keyframes and you're animating from one point to the next uh so what i'm going to do is kind of talk you through um the way that i like to mentally think about these tweens and the way that i like to use the ease graph to really kind of hone in how i work on my animations so i'm gonna drop into prototype mode real quick so option nine um and so here i'm just gonna show just a very simple tween so if i have these two keyframes it's going from point a to point b i'm going to click on this frame and you can see that when i click i'm going to navigate to another screen i'm going to use smart animate and smart animate is going to look at the properties of both frames and try to do what it can to tween between those right now i'm just going to use a linear animation just so you can kind of see like you know how this works out i have this over here so if i reset this frame and i click you will see what it does is it identifies that that frame needs to move over so let's talk a little bit more about easing so when you're dealing with easing you are going to be dealing with a couple of simple ones ease in ease out ease in out linear are probably the most common so the way that i really like to think about it is that ease in is if you think like a car that is starting from a stopped position kind of gaining momentum and reaching a top speed so if i take a look right here and i'm just going to drop over my little prototype nub so it'll play this one instead so we can take a look hold on i have my zoom window there we go so i can click that and i can see that i'm taking this object it's starting from a stopped position and it's moving off screen at this top velocity um so that's kind of like the way that i think about it but also where is it going right oftentimes you know i'm like okay i can use this to move off screen it's going to reach its top velocity it's just off into nowhere so an ease in ease out is going to be a little bit different it's usually when you have something that's off screen kind of moving on screen it's slowing down so if you think about a car kind of like coming into your vision it hits top speed and then it's starting to slow down to its main point so it hits its top speed and that it's slowly de-accelerating so if i go ahead and i take a look at that one right so it was off screen it's kind of slowing down it had its top philosophy velocity and then it's kind of coming into this point uh next linear a lot of designers and motion graphics artists will kind of trash linear because it's a robotic motion our eyes perceive it and it's just like i don't really like that doesn't look right but there is a time and a place for using linear so a simple way to think about this is if you're moving from on off screens on screen right it has a constant motion so if a car is kind of like outside of your periphery it's uh you know going like you know 60 miles or like 120 kilometers an hour and you just see it going then it goes off your screen right it moved at that constant speed so there still is a time and a place for that but now we're going to talk about ease and out this is kind of like my handy utility it's the goat if you will of the easing curves it contains a little bit of both so there's the acceleration the acceleration so it has the ease in has the ease out and it also has this midpoint where it kind of reaches that top speed so whenever you have something that is on screen and it's moving to on screen you can kind of have that kind of nice ease in out motion it's going to be the one that's most common that you're going to see in a lot of interfaces so even if i'm just moving from point a to point b it has that nice motion it's more of a complete transition as it takes back now another thing that you can do is you can look at ease out and out back right so if we look at that easing curve here it is and here is how i am adjusting it uh what that is is it has a little bit of kind of like before and a little bit of after um so what that's doing is kind of revving up and kind of slowing down so this community file i will be making available on figma dot com slash migi i have a couple of other additional examples here so this is a bouncing cube and basically as it goes up and down it's kind of swapping between ease in and ease out ease in and ease out um i'm not going to play that one but i'm going to jump into my little pacman example i like my pacman example i need to close out my little window and replay that one let me go ahead and hit that and my little pacman example has the ease in out kind of like functionality there so if i click in between those frames i can see that there's my ease in right it's that slow acceleration and then it's closing out so it's going to be that little bit more natural motion that i'm looking for and then i have one last one where i'm playing around a little bit more with that bouncing effect to get a little bit more elasticity or magnetism right if you want to have a little bit more personality in the forces that are kind of like taking place in your animation so what i'm using is i'm using like an auto delay to constantly reference the next frame the next frame so if you take a look and you can see that here i have after delay one millisecond because you can't use zero navigating to the next frame and then i'm using those easing curves to approximate those points so let me go back to my main points so basically whenever you're thinking about motion think about what it is you're trying to communicate with the motion where is your object going how far does it have to travel what is the perceived weight mass how should it move relative to its size and what is its relationship to other objects and you're kind of getting at the core of motion uh don't wait so you have high fidelity mock-ups of prototype prototype with raw fireframes in the early stages it's like failure you should do it early and often when solving complex problems thank you maggie that was amazing similarly to anthony's demystifying of all of the blend modes i feel like you really nailed that but also i'm wondering when you're giving your next physics class because i think that's the follow-up here that was so great man thank you all right well everyone uh we can't hear you all but if you would give if you loved this if you liked this uh lots of our fig mates put their time into this if you would give them a round of applause some emoji claps get creative with that emoji usage uh i'm sure that they would love it um this kind of concludes our live stream for today like i said we're hoping to have a ton of momentum going into this year and putting lots more live streams out for you all as a reminder this session i know we had lots of questions about this this session is going to be recorded it'll be available on youtube.com figma design you can subscribe if you want to just get the notification should take about a week uh any ideas for future live streams you can send off to me here at arcing figma.com and just as a note if you're digging this live stream uh we can always you can always see future live streams at figma.com events also tomorrow at 9am we have an in the file unexpected design stories at 9 00 a.m pacific time so thank you so much for joining us and i just want to say thank you so much to all the fig mates that joined uh y'all made this amazing and we've never done this many people on a live stream so bravo thank you so much

Channel: Figma

Views: 15,131

Rating: 4.9638009 out of 5

Keywords: figma, figma design, product design, design systems, ui, uix, ui/ux, user interface design, interface design, livestream, design tool, ux design, collaborations, office hours, properties, components, figma tutorial, design, user experience, animation, collaboration, prototyping, prototype, mobile design, フィグマ, デザイン, Figma Tips, Office Hours, Noah Levin, Emily Lin, Remilla Ty, Aaron Tesfai, Nannearl Brown, Heather Tompkins, Anthony DiSpezio, Luis Ouriach, Lauren Budorick, Miguel Cardona

Id: sCRYJdKoaxE

Length: 59min 23sec (3563 seconds)

Published: Mon Feb 01 2021