Office Hours: 30 time-saving tricks from Figma experts

all right I hope everyone can see my screen we're just dive right in cool so we've got just a ton of tips today for all of you these are things that some may be obvious and you're using frequently but some might be even so obvious that you didn't even know they were there so we're gonna we're gonna go through a bunch of those and we've sort of broken them out into categories too as we go through it let's let's just do it here we go cool so the first one and again we're gonna start a little obvious or a little maybe at the beginning so to speak is opening the Quick Menu so everybody might be familiar with the idea that you can get to the menu over here this little this little drop-down will give you full access to the menu you can also quickly pop this open with command forward slash or control forward slash and you'll see there that I instantly focuses on the search bar to it which is super helpful because you can do a lot with this menu you can just run commands directly from here so you can do things you know anything like editing or exporting or changing scaling all those kinds of things you can also run plugins directly from here so you basically in just one shortcut you can quickly just run any plug-in you want maybe you've got you know some some plugin that you're constantly running it's just a really quick way to get back to it and there is reload plugin but this is good for when you're just sort of quickly looking at different ones awesome a couple other just sort of basic ones as far as navigating around the layers panel in the assets panel can both be accessed with the number keys by holding down options so or also if you're on PC option one and option two if you see that it's gonna switch between the layers panel and the assets panel and what's really cool about the assets panel is similar to the menu that we had a second ago it's gonna automatically focus on the search bar so you can just start looking for components that you're that you need or things that you're trying to find super helpful and well that's maybe a little bit less known is that you can actually do the same thing with the right-hand panel to it with option eight nine and and not nine zero look at that there we go fixing it on the fly awesome so if you do option eight you'll get the design panel nine you get the prototyping panel and really you'll get the the code panel so super useful and we have really really short question here and I think it may help people track if you don't mind I'm gonna go ahead and actually would you do this would you share this file as view only to everyone in the chat absolutely and that way people can just track along we're gonna chair this view only that way you're not overriding on top of the demo but duplicate this draft and kind of follow along on your own if you'd like definitely let me just drop this right in the chat so we got it awesome there we go and also we will we will publish this file out to the community to afterwards so if you happen to not be at a place where you can look at the file right now we're gonna put it online and you'll be able to copy it to your own drafts as well cool I'm just gonna put this in here just in case so we have the right settings awesome looking great hopefully everyone can get into the file cool another really great one and this is actually um this is just the ability to switch browser tabs really easily this will also work in a desktop application if you have multiple files open and this is not something that's that's necessarily specific to phaeton love for the browsers but if you have multiple files open so if I have you know multiple tabs open you can always use command control to get one two three up through nine if you happen to hit a number more than the number of tabs that you have it's just gonna go to the last tab in the file as well so again it works on Mac and PC and most major browsers as well cool let's move on to some about the canvas next frame previous frame very useful if you just hit n you will go to the next frame shift and will take you back to the previous frame again positions of your frames are gonna make a big difference as far as what is considered next in previous so just keep that in mind as you're doing it it can be very helpful for when you're just trying to scale through things oh man this is awesome seeing everybody in here in the file alright we're gonna make a high-five spot right up here I love it awesome great cool let's move on zoom to selection okay so these two are pretty cool you may already be familiar with the idea that you can zoom in many different ways you can hit plus and minus just plus and minus by themselves we'll actually zoom in and out you can also zoom to selections so if you actually have something selected like I'm just gonna like this square and then you hit shift - you'll see it zooms right in on that square so if you are working let's say on a sheet of icons or you've got something that you're just trying to you maybe you found it in the layers panel but you're actually having trouble finding it on the page you can hit shift - and it'll take you right to it and then one that I actually end up using a lot more that's pretty great is D and then you can actually if you hit Z if you click once it's gonna zoom in you can also hit option Z and click again and zoom out those are really useful but one really cool one that you can do is if you hit Z and drag a rectangle it's actually gonna zoom in to your selection size so let's say you're working again on a giant canvas or something like that and I want to zoom in on this one particular part I can hold down Z I can drag out and it's gonna zoom in directly to what I what I but besides that I drew out there cool we're gonna keep moving along resizing so you may have resized some frames before and gotten maybe a behavior you weren't expecting probably due to what we have which is called constraints so every object that's within a frame knows its own position relative to the frame that it's around and I'm just gonna you'll see here as I drag this outer frame this inner frame is currently set to center center meaning I want the contents to always be in the center of the parent frame which may be what you want and often times setting those kinds of constraints is really useful however there might be instances where maybe you didn't want things to move or you were maybe trying to move at a different corner like if you're trying to move the top-left corner and it's getting confusing as to why everything is shifting with us what you can do is you can hold down command again or control and this will actually ignore constraints momentarily as soon as you let go of control the constraints are gonna get turned back on again but again it's really useful when you want to stretch something out in a certain direction cool I'm going to given everyone since elections going I'm just gonna hide cursors for a little bit right now so this is going to be another little tip that I can show you is in the options menu or option command back slash all control backslash on PC you'll be able to hide the multiplayer cursors I love you all and we will bring you back for some more high five if you are you are beautiful but get out of here for a second cool another really fun one this actually comes from old so this is something that's been a part of illustration tools for a long time or production design tools it's called outline mode which is super useful that has a lot of uses if you have shapes on your screen green like this and you ever want to just see things in their outline you hit command Y and we're gonna pop right into outline mode but so this means that only the outline are visible frames will be dotted outlines shapes will be solid outlines text will be solid outlines and things like that and this actually has a couple of good uses one of them being let's say you have a shape and or here's a frame that looks relatively empty isn't it we turn on outline mode there's actually a ghost inside of this frame you can hide so this will help you maybe identify things that are outside of your frame and what are still there you can use the layers panel to do this as well but sometimes this could just be a useful way to look at those kinds of things or if you have lots of layers on top of each other sometimes this can help cut down on the noise in the clutter and just make it easier to look at okay another fun thing that you can do in outline mode is you can just make some really fun shapes and things like that I'm gonna play something later today but you can do they're gonna involve that Coastie it does involve it goes one of my little figure magic things oh that's great cool so let's talk a little bit more about layers and frames because these are some useful ones that again when you're working with a lot of content and you're working with really articulate designs or maybe you have a lot of things going on sometimes clicking into things isn't gonna be the fastest and if you know what you're doing if you know you're looking for or it was a design that you made it's probably not a huge deal but imagine being handed a file from either another designer or something that you found in the community and you want to just be able to traverse it in a logical way there's a couple good shortcuts for this so if you have a frame selected like this you can hit tab in fact we'll go into this frame so you can you can hit tab to just switch between the layers and you can hit shift tab to go to the previous layers another one that's that's kind of similar to this so this is gonna be moving between layers that are at the same depth within a frame but what you can also do is you can move between the depths of the children and the parent layers as well by using return so tab and shift tab return and shift return are going to give you full control over moving through all of your layers so if everyone can if you watch over here I'm on my layers panel on the side you'll see that as I select this frame enters to go into the next layer tab to select the first one enter to go inside that now I'm selected inside the inside layer shift return to back out I can also then just go back in again if you've ever used a tool like the chrome inspector some of this stuff is going to be a little bit similar as to how the traversing works the shortcuts are different but the same idea as applying here that you're just moving in and out I mean it's conceivable that you would never have to use a mouse again huh just design the whole thing I want to see it we definitely have some keyboard fanatics I think on the team which is good because the keyboard shortcuts are what lets save us a lot of time I hope people have caught some of Martians talks here and there and it's pretty awesome at all but yeah that would actually be good if we did a contest or it was just like how much can possibly design with only keyboard I dance yeah no mass designing I you know what this might be everybody rolls in with mechanical keyboards you know it's true yeah also I saw that people were asking for like big match coming back right that could be a good one I love it cool let's keep on moving on a couple cool examples here to look at so copy and paste layer styles so just to set the stage a little bit when we what we mean when we say layers styles is the different layer properties that you can apply over here so so this is true for both styles as well as just properties that are better better over in the design panel so each of these properties can actually be individually selected as well and you can actually copy and paste properties individually just using command C and command V but more often I find what's the most valuable is to you have an object selected and you want basically some some other objects to have the same properties as it so if you hit option command C and then option command V again alt ctrl you're gonna get all of those properties get copied over so you can see here that it's actually taking all those properties copying them over for this is an example here that's just using a linear stroke linear gradient on a stroke with a fill this will work for other properties too so here you can see we have an image an image fill as well as a border radius on this object and if you copy this you'll see it not only applied the image fill but also the border radius property too and both of these were contexts too so if you have text selected and you hit command option command paste you're going to be able to get that property directly onto the text I actually don't know what happens with border radius is okay cool so it does not transfer border radiuses to text objects if you wanted to though you could convert this to an outline and then now you get some nice good letters with woody in there too as well very nice I am curious about the extent to which which properties it actually does translate over like for instance I've never done this but I'm guessing that it doesn't copy-paste over like rotation is that true or do you know yeah so it's gonna be layer styles so so if you have if you sry blending modes so if you've set anything as far as blending modes fills stroke and effects and border radius I believe that's the extent of it there's a list on on on help calm but yeah you know awesome things for somebody who wants to go and do an exploration one other if you're looking for like why would why might this be useful or what's like a common use case for this one that I find quite frequently might be something where you've gone ahead and you've set up a shape let's say with a particular property like this and I have it as a rectangle maybe I'm making a dialog box or something like that and I realize I actually want these properties not on the rectangle themself but on a containing frame so I want to actually wrap this rectangle in a frame I can wrap the rectangle in the frame real quick but now the properties are still on the rectangle inside of the frame so what I can do instead is I can say copy paste grab my rectangle maybe I've got another blank one and I just want to actually paste those properties inside of it so now you can see here I actually have a rectangle inside of this frame and the frame is one that has the properties on it so so for moving things between containing elements and and inner elements can be can be a good use case for that too we do have one question for you and I feel like you'd probably be the best person answer this Christian Baptiste says would love to see the ability to customize keyboard shortcuts similar to Alba fireworks you I used to do it what do you know about customizing shortcuts yes so in the web experience that we have today there is it's any customization you're gonna have to do at like the OS layer and and it may or may not work as you expect so right now in in figma when you're using the browser experience most of the shortcuts are gonna be what is prescribed by figma now keep in mind there are lots of duplicates from for most shortcuts too so there are certain applications that may hijack particular shortcuts so we've tried to keep at least one or two for most things in the system so if you go into the keyboard shortcuts area so this little menu in the corner you can also hit ctrl shift a question mark which I believe would be Windows key shift question mark on a PC maybe somebody can find out if I'm correct or not but if you go to the keyboard trick that's on the keys on the via the menu you're gonna see that there's actually a whole page of a ton of good shortcuts there's even a game if you actually there's a little surprise at the end if you fill them all out now on the desktop application we actually do have a beta the desktop application that is available and I believe that there is some some work being done around custom keyboard shortcuts and things like that so definitely stay tuned for updates on that front but that would be a good place to start I do know that I've also seen an article out there about using customizations on the OS level so I'm trying to find that but I feel like that could be a good workaround for the time being but thanks for that question Christian yeah and it does work with certain commands but there are things that are going to be trickier to remap just because of the way that we are listening for those kinds of keyboard events I use a tool called better touch tool which is actually it's pretty wonderful it is a paid tool but what you can do is you can set up everything for a custom touch bar Magic Mouse trackpad keyboard shortcuts key sequences so macros if you're familiar with that concept tons of crazy things that you can do here again that is gonna be I think I think it's a paid application so I'm not representing it or anything but your mileage may vary but I find it pretty useful for a lot of different things that I do cool keep moving on I like tip day this is this is fun keep going great so another good one that I find to be really useful or confusing when it doesn't do what I expected to do which is resetting text layer names so if you have a layer with some texts in it and we're just nice look at that let's reset that so that it actually has the right one if I change this text layers named to say something like kittens as you do you'll notice now that my text and my layer name are not the same now there may be lots of really good cases for why you want to do this if you have text layers inside of components and you're changing them with overrides and then you're swapping components the names of those text layers are going to be crucial and how it understands how to preserve those overrides however there are plenty of times when you may say this is not that useful to me because I don't know what kittens is I have nothing that says kittens on my page so what you can always do is double click or command R for for rename and delete all of the text and if you just hit enter now it's gonna reset that back to whatever the value of the text field is keep in mind if this is really long it will have a really long name I believe it come kids eventually but just a good tip to know cool one last one that I find myself using more and more these days as an alternative to doing masking is if you are simply trying to take a bunch of maybe components or objects and you want to just put them inside of a clipped frame you don't actually need to go through the process of setting up a full mask to do that a couple other things with masks is masks are gonna require another element and then they're also going to be inside of a group and then the masking properties are gonna continue to apply so masks are great for when you're actually doing true masking but if you just want to clip the edges of certain frames maybe you have a nav bar menu or something some sort of shadow properties or things are overextending beyond where you really want them to take your selection and you can actually frame them real easily with option command G or an alt control G and this is going to wrap your entire selection in a frame from here what you can do is if you turn on clip content it's really easy to just adjust the clipping on that so it's almost like masking but what we're doing is we're clipping with a frame instead one of the great use cases for quickly putting something inside of a frame you can also quickly remove a frame with command shift G I'll be sure to add that that in here as well so auction command G and option shift I in command shift G again so quickly grouping and ungrouping and and wrapping in France as well so frames for those who don't know frames are really the backbone for how a lot of the design work grows as far as containers and things like that frames have properties that groups do not such as constraints and grids and a few other really powerful features so I find myself gravitating towards frames for actual design elements this is generally the good approach I do still use groups not as frequently some of the times that I think groups are really valuable is when you're trying to create mental groupings right or just associations for yourself maybe in the layers panel or another great one is if you have a bunch of layers all spread out at different depths and you're just trying to get them all together you can select them all or maybe use select all with one of those properties and quickly group them and what that's gonna do is actually bubble them all up together and then you can actually move forward and do what you were doing so it's almost like a quick like hey let me grab all of you together pretty useful again it's just gonna depend on the kind of work that you're doing but framing selections and clipping is a great way to not have to add additional layers for masks and things like that when working with rectangles or display right right which you know a lot of UI design ever doing we're off and working whether or not we visually have boxes there are certainly lots of boxes going on often at the web and the world was founded in the design world was founded on boxes you'll notice some interesting edge cases with some properties but you're like I really thought that that wasn't gonna be a square and it ends up being a square story for another day Kulik i pass it off to you first you pass it off to me just to reinvigorate the group but we've got a little high-five over here area over here by my face I'll try not to move it away from you but then I'm gonna go ahead and share screen and let's get some high fives in there love to see all all your little cursor look at your cursors the beautiful hi dad hi Brendan we was Luisana hello how's it going hey Patrick alright so let's jump right on in I'm gonna go ahead and turn off your beautiful cursors which I love marco could see it Matan I'm butchering your names I'm sure but I am saying them and I think that's important alright so the first thing we're gonna do is talk about images and Phil's specifically we're going to talk about like placing images so you may know about placing images through this command here or through this menu place image if you're like me you probably knew about it because you just dragged and dropped an image right onto the canvas which is a great way to do it I do that all the time but if you're ever wanting to bring in quite a bit you can always just hit command shift K and it'll bring up a dialog to choose multiple or one image so I'm going to come in here my little side project that you're not supposed to know about and I'm gonna grab three of these images and as soon as I grab three of those images in Mac I can hold shift and select multiple of them but you'll notice up here the context of this menu up here changes and I'll tell you what to do it'll say click or drag to place or place all if I place all and it's probably just the same as just clicking on the canvas well actually clicking on the canvas will place them all one by one but let's do that again let's just try the place all just to see what that experience is like boom it places all it's a little inconvenient they're all on top of each other but what if I had like a series of components that all had images and I'd like to populate all those maybe I've done a bunch of cool pictures of national parks or horror movies like I like I can tell you how many times I've done horror movie mock-up apps it's stupid alright so we're going to take let's take four because we have four of these and you'll notice that my cursor changes and it tells me how many I have whoa oh okay just lost that but if I click here um let's see here what do we do you just see Anthony I both notice something here if you have this color Phil assigned to a style it actually won't honor that I'll keep it locked in to that style so it's important to unlock those when you're doing this let's try again all right so we've got four images and we're just gonna simply click on each object and it'll fill with each one of the images in the order that I got them so that's a really cool one you can also just drag a slew of images right onto the desktop that works as well in fact that experience is often a little bit better just because it'll arrange them in a little bit like not right on top of each other which i think is nice you can all argue to go to a clip can also do the drag out while you're placing - that's right that's right and we'll also demonstrate pasting as a fill as well so let's just uh let me go - to Chrome here and just type in National Park I'm gonna be careful with my chrome searches I don't know what it would ever turn up but let's just say this beautiful imagery here and I copy that image or I copy it from my desktop I can actually just come into this object here paste it and it'll paste that image right in now if I'm on the canvas of course I can just paste that right here and it'll just plop the image on the canvas the cool thing about ours right like where'd you say like for avatars you've cut down not needing a mask layer and things like that you can just use the image files totally and this is something I talked about in my vector session Anthony is that I love that all objects whether they're an image object here or there vector object here they're really just like a vector frame and then you can just paste right into them so meaning if I use that tip from Anthony and I do a option command C to copy my Styles an option command V it'll just paste that right in Anthony was also alluding to this earlier as well I'm gonna come here is that I can actually change to just pick out what I want maybe I don't want all the attributes here maybe there's some blend modes or strokes or whatever and I just want that image you'll see it goes blue I can command C here command V here that image will go in boom I can put it onto text I can actually and this is what I love about it too is that I can actually just take this text this hasn't even been broken down or outlined into a vector and I can still paste it and that image it's just treated or that text is just treated like another object like a circle like a frame I call this stuff I can just back up all my fills so right right got a quick question a little unrelated but but what what's the the apps for casting your keyboard shortcuts that you got right now oh I well this is office hours so I'm happy to share all these seduction out of what this one's really nice it's called keystroke Pro it is a paid-for app an don't think it's that expensive because maybe 20 bucks and especially if you're streaming it's really really great it also changes and I didn't know this I'm all dark mode now and it actually changes the keys on lightening dark mode and you can change positions on the screen as well super cool really like it I think it's made by a single developer here Martin looks out awesome app alright alright so here's another one too so when I first started working with images I if I ever wanted to be able to crop this or pan or zoom into a certain portion of this image I'd have to come into here I'd go to crop and then of course now the crop UI is available and I can start cropping maybe I want to get Anthony's little kitty Georgia ended here can get really this is my dog I mean and then from Georgia but if you ever want to just get right to that not like two or three clicks away if you hold option or alt and double click right on that image you'll immediately be transported via space and time into this little crop you I I can now crop this thing move this image expand really get into the beauty that is Georgia I love that one I use that one all the time here's another one I use relentlessly swap stroke and fill this is something that's familiar to me from Illustrator and this always need to like swap and stroke stroke and fills it's a super easy one it's shift X and it'll just swap those two things start using it you'll probably start realizing there's a lot of reasons you might use this thing all right this is something that I've done within within some of our assets for the designer advocates is I save my image fills as styles so let's say this is an image it might even be an illustration within your illustration library let's say this lovely photo of my Akua who is a cat here right Anthony it was a cat so let's say we want this in our library we've done this with our designer advocate photos and stuff like that instead of just having a fill here what I'll do is actually create a style whoops sorry create a style here and just add it and maybe I'll just put in like images and I'll put my cat puah so I can create that style the only thing that I I wish was a little bit better and I hope improves is that it is just so very hard to see these little thumbnails but if you have a series of images here you can go ahead and apply those so now I can just go here drop it down and now it's saved into a save style and there's puah he's great and as a test let's go ahead and see let's go ahead and see if we cropped puah and we had some positioning settings for him and then we saved that now what would happen if I actually just applied that here and it looks I'm not sure I can't really it looks like it is trying to save the crop settings and then it's actually squishing it because the size so all right lastly with saving image fills the style over here we've got a repeating pattern so if I simply hit command option C and paste it here it's a larger object but since it's set up as a repeating pattern here you can see it's a tile it'll actually just go and stretch and repeat to the whatever dimensions this is here but let's say I've got that really cool repeating pattern as a part of my library simply just do the same thing I'm going to add in to my images and maybe this is my background tile great I can create the style I can come here boom I'm repeating lastly within images do we have a derivative we actually we had a great comment from Christian I just wanted to mention I said one great thing is that you can just paste an image and immediately start rounding the corners on an image and I think that's a good thing to call out because there you're never going to have just an image by itself it's always even when you paste them it's gonna be a shape with an image fill all of the properties you have on a shape are going to be properties that you'd be able to apply to an image as well so this is great great call out there that's really good tip I think that's like one of the more subtle tips that I actually didn't know it just worked how I expected it to work which I really love that but yeah in this situation I just dragged an image from my desktop I don't have to now mask this image and I remember doing this like an illustrator masking this image because I'm like oh I gotta take a shape nope I can just come right here to these border-radius handles and I can start working with that image directly so I think that's awesome come on Christian lastly I just want to talk about images and copying and pasting them so say I wanted this image here I can actually just right click I love this I can copy as ping now this only works in the desktop so of course if I paste it here it pastes in as a ping so I do this a lot as well when I'm like shooting over a comp to somebody even though typically maybe I just want to show a small portion of it just want to say hey is this icon looking good and I don't want to send mobile figma file boom you can do this it's like a quick export I believe this is a quick export at one Expo the other thing that you can do is copy as CSS but you can also copy as SVG so this isn't a really great example of SVG let me just draw a few actually I'm going to borrow something from Anthony coming into your files man hey that's from that just take over design that's what we're doing here that's right oh wait we got a question digit did you really call it a ping we you and I might even be on different pages about I did I did what do you call it a pinch of PNG PNG that's too many syllables too many syllables I'm not gonna disagree vehemently but thank you for calling that out the cool thing about this little command for copying us I don't even need a frame I don't even need export presets so I can just take any object on the screen and right click copy as SVG no let's just see if this SVG actually works let's come here I just got a code pen up so I can actually just slam in this SVG code how does it work will it work it does work it's great awesome I love that super useful super useful all right moving on here I'd like to have some some time at the end to feel more questions and explore with y'all some minutes as quickly as I can you may know about this instead of clicking over here then the eyedropper is then dropping a quick keyboard shortcut would be just to press I and now I can just select my color now I didn't learn this one until about a month ago if I click that eyedropper tool and instead of just clicking on an object I can now hold down my mouse button and I can scan it around the area sometimes you're scanning on like a raster graphic maybe it's like a JPEG you're trying to find like a really cool nuanced color so here I am Who am I let go and there it is another color tip here is that you can actually nudge color values so say for some reason this is your liking this teal but you're thinking I want it to be a little bit darker I can hold down so I can actually just hit the down button and you can barely tell that it's working but if I hold shift I can use my nudge settings to actually increment darker and darker at a more rapid rate or I can go the other way and actually increment upward another really cool thing about this is these sort of little nudge nudge nudge what are what I say like nyjah keyboard shortcut like they did work they work within these other values too so like Sam on hue saturation and lightness I can actually just bump up the hue but Sam in CSS this is where it gets weird this is a RGB a RGB alpha red green blue alpha I can actually be on this one color value here and actually bump that one so I'm just bumping my Reds up and you can see that this is actually going more towards the red in the spectrum it is kind of these are fun little hidden secrets and tricks that I don't know if I would have ever discovered but there they are Anthony its back to you buddy awesome awesome move through these quickly so he can get some questions - cool great oh and also we did have a question on that on that bat pattern that was a pattern that I made a while ago it's actually a really cool process of how you make hand-drawn repeat patterns maybe we'll do a thing on it sometime but Roger let's Stephan get it on the tree you actually made that you drew that yeah it's cool it was actually um I had a buck listen I should go find it again yeah basically you you hand draw something and then you do this cool technique of cutting up the paper and repositioning and then you can scan it in oh that's I'm so glad it's your you made this dream yours I love it awesome cool so let's talk about flattening selections so this one's really useful for me you have a handful of shapes for example you may have two objects that you want to combine together so so here we have a triangle and we have a square and and I could I could put the same drop shadow on this rectangle here I could try and do it and make it look right it's just not gonna look right or maybe I want to copy the styles like we did before but it's still not exactly the right effect right I want these objects to actually be combined together so you can select your objects and just hit command E ctrl E and now you're gonna have a single vector shape and you'll notice that that fill property actually applies to both of them now so I actually get the depth that I was hoping to get here that is not the only way to make this shape you could also put the effects on a parent frame or on a group there are other approaches you could even just do this with one shape just showing off one example right you could always just grab this shape and also just poke out a little corner here but for quick mocking up and things like that this is a just a really good way to know that you can combine things whenever you need to love it cool outlining okay so if you have shapes some of the properties are going to be rendered to the canvas and some of them are going to be sort of saved and stored for the for the time being and what I mean by that a good example is is a border radius right so here we have a shape that has a border radius on it now this border radius is being set by the border radius property so if I double-click onto this into an edit mode you'll notice that the nodes for my shape are still in the corners right so they're still we're still again working with boxes again right and do though is if you truly want that actual shape to be let's call it rendered or outlined you can actually just hit command shift oh there we go and what that's gonna do is not my octa I believe that there is a another shortcut for this too that we can actually get to it faster I'm gonna give you a second maybe you always right-click on these objects too and just hit outline so mine is just taken over by another another application but there are ways around that as well I believe is another another shortcut for this but you know we just right click and say outline stroke and what you're gonna get is that the shape is gonna change a little bit I'm not going to do it to this when I did it to this one right here just so I can compare the two you'll see now that in this version the nodes are actually going to be creating the curves manually so we're actually using Bezier curves and and curved handles to actually create that shape so a little bit different one of the things to note is that I won't actually be able to restore that border radius on this one and it's gonna actually act a little bit different when we change the size because now though those particular angles have been set into the shape whereas here this is actually just saying I always want the same radius other good use cases for when you might want to be doing this would be something like actually adding another stroke to something or maybe you actually want this stroke to be part of the shape you can run that same command again and you're gonna get both of those things as separate shapes which you can then adjust them independently and even add new strokes to the outside of the next one or something like that so interesting things that you can do there you can also do this for text if you're doing anything really creative with text or maybe you're doing some really advanced typography and you want to do some interesting ligatures or other other things like that you can always run the same command again outline stroke and now you actually have this text as a path as an object that you can actually adjust different angles to as someone who has a little bit of a heart for typography please be very careful with messing with the metrics it's the typographers put a lot of lot of work into the metrics that they've said just make sure that you're doing things that are very intentional one thing you were talking about the outline stroke and I thought that especially I think we always get into a place where we're like oh I remember there was a key keyboard shortcut but I don't remember it I don't want to go through this huge list why don't you show them the little tip about the the quick menu right so remember the head-up yeah that menu that we looked at at the beginning pop open the menu with command forward slash control forward slash and you can just go ahead and just type in outline and it's going to be the first option on your list again you can just run the commands directly from here by hitting return or enter and there you go so a very quick way to get that menu to as well sweet talking about the arc tool now so you may be familiar with the arc tool the arc tool is that really cool handle that if you have an ellipses and you select the arc you're gonna be able to actually set the sweep of an arc you can also set the ratio of the arc as well very useful but as with everything else where you have shift where shift is gonna give you bigger increments the same is true for the arc so you'll actually get degrees of you'll get 15 degrees unfortunately our tool it's doing it out of a percentage of a hundred so the percentages may not make a whole lot of sense but it is 15 degrees for every stop point here that we have a ganker great for just sort of the arcs if you trying to set exact angles you can also do the same thing with the sweep up here yeah a couple cool examples there cool a little bit quickly through these ones here adding keywords to components okay so this is super useful and I cannot explain how often I use this now and and I can't explain I use it a lot what you can do is in your component description so over here you might have some like some usage guidelines or something like that you can also add keywords so I'm just gonna put in some keywords like this is from this is a button that it's meant for the blog maybe you've got it in a library that's specifically atomic components but not broken out by use cases you can use keywords and tags to actually give yourself another additional layer of grouping for those kinds of things so maybe blog this is also a legacy button because maybe we're where you have needed to support some older browsers and we're doing a mock for that as well and then maybe also this is just in my kittens you'll notice if I go to the assets panel so again option two and to start searching for blog I get that exact component or maybe kittens as well right so you're gonna you're gonna get those showing up under those groupings as well again just great ways to either crosscut or subgroup your your component library cool swapping component instances okay so this one is gonna be a few different things to cover so you know that you can if you have a component instance selected there is an instance swapping menu over here on the right hand side the related components are gonna show up together you can always search all of your components locally and in your libraries additionally you can also swap them from the assets panel so if you go to the assets panel and let's say we just look up sample you can always grab a button and if you're holding down option it's gonna swap out top-level components right away pretty cool another cool way that you can swap is you can actually right click and say swap instance and this is just gonna give you a just the sub groupings of the related components so either they're in the same naming convention or they're on the same frame together the source components themselves you can swap them out that way as well you can also quickly swap sub components or nested components in the same method instances in the same way as well so if you have something like a button like this the difference here is that we're gonna instead of hitting just oh I'm actually sorry I just realize I have a little bit of issue there it's not gonna be control it's gonna be option for this one but luckily auto layout to the rescue beautiful for the nest for the nested ones it's gonna be option and command at the same time so if we grab something like just an icon maybe we want to swap out just this little icon right here that's now the because I'm holding down command as well it's also going to be just the nested components so I can quickly just swap them out like that again because these are all groups together to I can always right-click swap and then there's all my icons right there so just some really some good ways to quickly swap out components and nested instances and things like that and that was the same example I showed you second but an important note here that I've left is that the instances must be grouped if you're using that bat menu over here meaning that they must share either the same naming convention like they're in the same forward slash group like buttons slash primary or something or they are on the same frame together because that's what's gonna create groupings in the assets panel as well we did have one question here from your be is there a way to hide an instance from the search but not from the instances panel hide an instance from the search but not from me instances panel so you don't you want to be able to browse for it but not search for it I do not know actually I don't know if that's possible or not I'm glad I threw that one to here because I didn't know I don't know if that's a possibility yeah I know that yeah I'm not entirely sure I mean there's another technique where you can hide components from being published by putting a period or an underscore in front of them but I'm pretty sure that will not hide them from the search so they'll still be certain I don't know we'll have to get back thing on that one cool you want to do a little bit of prototypes or how we doing yeah you've got I can do these very quickly I'd like to get done in just a few minutes so we can open up more questions at the end there all right let's see prototypes yeah just something to know you can actually show and hide hotspots we've had this question a few times I don't think that this prototype actually has a hot spot on it but just good to know it here we can see it here show hot spot hints on click that's good to know another thing and this one's a little bit tricky is that you can show and hide the toolbar and the footer let's go look at that here so one thing to note about this is as soon as I show hide the toolbar this is my toolbar so my toolbar disappears and I have no access to this so you have to remember this commander control backslash so now you can see it's gone forever really great professional down here it gives you a little hint oh I need commander control backslash boom my toolbars back so those are really handy when you're giving presentations let's see here I think maybe what we do is just let let the crew look at this on their own these are all kind of OS and browser level stuff which are good handy tips we've given you a link to the file also we'll go ahead and publish this to the community that way you can look at it again and again and maybe make it better but let's open this thing up for more questions we have got about probably five five to seven minutes this one would be good for you Akil set is there any guidance on the component swap shortcut key equivalent for Windows is that just because maybe you had it wrong in the claim there yeah it's possible so on on Windows it's going to be either just alt so so option on Mac alt on on Windows or alt + ctrl for doing the nested ones in fact I've got a I've got a link to the documentation which I'll drop to the channel right now - awesome oh ok this one I know you know a lot about this I know only a little but Nathan said it's not a way to save our prototype settings mine always resets I think that my I would love because I think you know more about this Anthony from what I know about prototypes if you change some of these settings here and you can't actually tell that it's happening here but if you change these settings the actual share link for this so say we change some of these show hotspots on click and all this this should change and actually let me see if I can just do this I would like to be able to really showcase what's happening here oh right oh yeah I will just take this old presentation of mine notice up here these are query string variables you don't need to remember any of those but if I go ahead and change this in the browser you can actually notice that it's changing this URL so that means that when you share this prototype those settings will be saved into this now of course when I go back out and then I click go play again or present again it's just going to go back to the defaults but I can save it in that you are now once again I only showed the browser because I felt like it would illustrate that they're changing but of course if you hit share prototype you should be able to reap reserve those settings in the URL bar correct me if I'm right on that one or wrong Anthony know that that's correct yeah so those settings are not not only are they not specific to the prototype but they're also not specific to the user so they will reset but you can if you as long as you have them the URL parameters in the URL the query parameters in the URL that's what it will start with awesome especially for that you're testing that that ends up being rather useful so that you don't have to explain to the user hey you know hi the UI so yeah I could see how like hotspots you would want to turn that off because you want to see what's actually natural to them not for them to have to like click a random spot of the UI back oh there's the button like what if your button did look like a button you don't want them to have to rely on that mm-hmm I would love to see oh the circular shape okay interesting so we got a question around wanting to if you have your prototype set to a mobile device type so something like an iPhone or an Android phone or like that in prototyping mode you're actually you're gonna get the touch target cursor and not the normal cursor which it's great I could absolutely understand that the need or the want for being able to swap that out or maybe hide it as well so good feedback thank you yeah that would be cool to be able to I guess I could take off if you take off in prototype mode you take even though by default let's say you start a brand new prototype and I'm going here and saying I would like a iPhone and of course then now in prototype I'm gonna be like accepting this device I can actually take off that device what I'm curious I've only done this a few times go back here I'm guessing it'll still have that touch target type you'll have the remote cursor yeah right but I don't get the device got it yep right yeah so that's one way to do it if you were trying to use the frames like the iPhone frames or the Android frames you're gonna lose that if you switch it back to presentation mode but you could add them in manually too if you need them it looks like we have another question this one's from a bit back so I'd like to get it from Christian is there a way to have a border on one side of a shape and unless Anthony can move in a good guardian angel I'm gonna say not easily not easily in other tools and I'm and the figment team is aware of this we're aware of the fact that this is a shortcoming right now we put a stroke it's it's all over right there's no independent corners kind of a thing here of course you could always cut a budget and this is what I do is that I do a drop shadow with no blur and zero blur and and like that so this is my this is my way to approximate a one sided border Anthony any more to offer on that one I think that's it we're back to CSS workaround I know I know big one for the team as well and they are aware and and wowee it just it comes up quite quite frequently you you can certainly do things like just adding an additional shape you can even put it in an auto layout if you wanted to scale appropriately but there's a lot of steps just that at a one-sided border so I'm sure my fingers cross on that one it really is and I will say that I'm personally really excited about a release that's gonna be coming up with a team that I helped spearhead but it was all of you that asked for it I can't reveal what it is just yet but there's just things that yes we can work around like we're all pretty good designers we can find really cool ways to do this but like you'll want to save ourselves some time so these are important concerns more important than uh than they seem like I think we should have independent corns for sure and borders okay not another one here do you have any meat workarounds for swapping a regular object with a component you see treat like a rectangle like that idea I I don't have one do you have one in your head Anthony there are plugins that can help to do this so today it's gonna be harder to swap out things that are so figma today doesn't have the ability to have a shape and then give you access to the instance swapping menu as well there are a couple couple plugins I need to look them up and tell you what they are but we will find out once we come out afterwards too but there is one by gleb I believe one of our power users does a lot of really amazing work and it will let you select any old shape and actually swap it out with it with a component as well nice of a component awesome I think we're at time Anthony thanks so much for uh for helping prep this and putting out these cool tips thanks everyone for coming and just asking all these cool questions I'm glad we had time to get them most of them let me scoot back real quick here remember that if you do have more questions or want to pick Anthony or Mies brain like here you go Twitter links on the top and then we've got our emails we love I love getting emails I love responding back to you this quite literally is our job is to be here to support you and to listen so and we're happy to do it that's that's cool oh absolutely awesome this Friday or actually I believe it'll be Friday depends on depends on your timezone we are doing a the figma Athens group is doing a fantastic meetup is gonna be a global event everyone is invited please just go type in just Google figma Athens we can give you the registration link here as well to tons of great talks I'm gonna be speaking about some ideas around a future kazan not in a TEDTalk way i promise it's gonna be very practical use and apply right now but I will drop this into the chat for everybody as well I'm going to find the link so I was trying to assist got it yeah let's drop it in the chair and it sounds like we've got figma Germany is coming up to again that figma calm slash events is going to is going to have access to a lot of those things so you'll be able to track them there so very cool thank you everyone for coming thanks for showing up to these streams it means a lot to just have you in here asking real questions you're the best thanks so much we'll see you online thanks everyone thank you

Channel: Figma

Views: 66,408

Rating: 4.9779549 out of 5

Keywords: figma, figma tips, figma tricks, graphic design, keyboard shortcuts, product design, design, responsive website design, webdesign, grids, website design, break point, figma design, ui, ux, ui/ux, design system

Id: _bAiopgO5ek

Length: 55min 57sec (3357 seconds)

Published: Fri Jul 10 2020