Icons in Figma 101

we go all right hi there uh welcome to the very first event for friends of figma iconography um my name is noahjkovis i am the community advocate for figma focusing on this area of interest and craft and love that goes into icons of all stripes when i'm not doing that you can find my work in products made by meta lab where i work as a design specialist now if you want to keep up with what we're doing in this chapter tune in for future events like you're doing right now um oh this is me by the way forgot to change to that slide uh you can join the chapter at friends.figma.com there will be a link at the top where you can view all the different areas of interest as well as different localities hey sorry got it uh sidetracked my buddy andrew's here um and then you can also follow along of course at fof underscore icons uh you can of course hop into the friends of figma slack as well you can find that at the previous website as well and there you can talk about all manner of things related to figma education accessibility design systems or even find a local chapter in your city or country i know that they're adding new ones all the time for example san diego just joined they'll be having their first event next month i believe um i'm not in san diego i just have some friends that live there um figma also hosts uh its own conference called config which uh just actually happened last week uh if you missed out um but talks are gonna be going up from it on youtube some already are some will be added very soon uh some really cool new features were announced that make using figma even easier i'd love to kind of talk about some of those really quick here at the top um first up was branching which if you're a product designer or work with product designers some folks can be really excited about this if you want a more get style approach to version control that's going to be available very soon they've also added a brand new uh mobile app which is really cool super great if you're trying to check out your icons in context inside a product uh rest in peace figma mirror you'll be missed but this is a lot more useful because it allow you to take more prototypes on the go do more user testing and stuff without having to be anchored to what you're currently doing on a desktop machine uh pretty soon they're going to be adding audio chat to sigma which is pretty awesome um i am all for something that lets me run fewer applications so maybe i don't have to be in zoom as much during product demos which would be super great uh but you may already hear my macbook trying to take off like a jumbo jet doing this um also adding a higher user limit um because that's one of the biggest strengths of figma is being able to collaborate with other people in real time with the multiplayer feature and so now the the limit for how many people can be in a file is going way up to 500 i think so maybe that'll be something we'll take advantage of in an upcoming event or we can all kind of collaborate and have fun together in something another huge thing the figma community is coming out of beta being opened to everybody um if you are not familiar with that it's a really great resource where people can publish files that can then be uh downloaded and remixed and re-uploaded by other people um it's i have some work up there i have some icon sets and some other pieces that i've thrown up there it's a great way to dig in and learn how to use figma see what people are doing and how they do it super great some of the resources from this will actually be available on the community right afterwards if you're interested and last but not least probably one of the biggest things coming out of config was figma's brand new whiteboarding and brainstorming product called fig jam which is also sounds like a delicious name for a fruit spread um this was super cool to see i've already used it a little bit for ideation around some icon project so a little bit biased because i got to help make some icons for it along with some great friends um so if you find yourself trying out fig jam at all uh you can find these in the components pane in the little tool bar uh under the name candy bytes um because i'm a huge fan of necco wafers and i decided to try to immortalize them in in icon form so all that being said all these upcoming new features and everything are super great uh but this event is about the basics um we're just you know brand new brand new folks to figma um so let's dive in um kind of first sometimes i get the question like why figma like why is figma a big deal why do you care about this um it kind of boils down to a few things it's quick it's super fast i mean if if you're coming from the world of illustrator illustrator can be a little bit clunky it's immensely powerful but for the purposes of icons it's kind of too much for me um it's slow it takes forever to scroll across the canvas sigma is much quicker it's free for starting out starter projects are free you don't need a subscription and it makes it kind of vector editing for icons specifically a breeze um plus you can make them in the same environment as the uh excuse me the same environment that your team may be using for interface work so you can test them out in context right away build the library the whole deal that's a huge advantage not having to import things constantly um so we're talking about the tools specifically the mechanics of switching to figma for icons um won't talk as much about like ideation and metaphor creation and that kind of thing so look out for that kind of stuff in in a future event uh maybe so in this first section we're going to talk about some things that might be familiar to you if you're coming to sigma from another vector editing program like illustrator um some really basic stuff like the layout that you're working with some of the basic tools you know shapes fill strokes how to get nitty gritty with focused editing and vector points uh booleans my favorite the pen tool in the vector networks and all along the way we'll be providing uh some super handy dandy keyboard shortcuts um that i love um so let's switch over to here this is figma um if you've used i mean it's not that different really in layout from a lot of uh desktop editing applications these days and it's basically four pieces when we look at it um we've got our toolbar at the top that has all of our basic um necessities kind of up here things like moving uh creation of various kinds commenting in other things as well which we won't really get into here you can kind of ignore that stuff for now we've got our left hand pane that kind of covers all of our layers so every little node or element that is on your canvas will show up over here um and then we've also got uh the right hand pane which is a lot more contextual it's this allows you to edit properties of whatever you've got kind of selected and we'll look at how that kind of behaves because right now nothing is selected so this is kind of giving us an overview of the canvas itself as well as um various styles that i have already created we'll get to a little bit so you can ignore that as well then of course the center which is the canvas all of you have a number of friends to kind of walk us through some times allow you canvas to create your designs here see with the little um little cross-hatched eye here um unlike oh somebody says no a lot is this only for i'd love to know that if the auto through okay good that's unfortunate very choppy that is not switch my mic really quick and we'll see if that does anything how does that sound is that any better other mic was better all right i'll go back um i will say you might be off better using chrome than safari or some other browser for this i had that issue when i was watching a stream using this platform earlier turn off the camera that's a good that's a good idea you don't need to see my ugly mug all right we'll continue on so we're talking about frames frames are basically artboards um so this allows you to create um so unlike traditional art boards say in illustrator or something like that you can nest frames within each other um so this allows you to create more complex designs that work together uh frames also give you access to extra functionality like layout grids and auto layout constraints and prototyping and stuff like that so let's take a look so for this uh instance i've kind of got um a couple of frames that i've already made here to kind of show a couple of different ways that i like to set up my icons initially is kind of the very basic starting block um i always create my icons within frames because then they're easy to edit and export and all that kind of stuff down the road so this is a couple examples of a couple of different ways i've set up frames for icons um and to kind of get my key lines sorted where um in one instance sometimes i make an entire set to help guide me um and other times i've used figma's kind of baked in layout grids um shout out to bonnie kate wolfe for that tip this is something that uh she does or did at least i believe in a previous article that i had read about that so um and we can also look here we've got some handy dandy um keyboard shortcuts for a lot of these different things so if i'm going to recreate these these are a little bit bigger as we can see when we actually click on something we can get its properties over here on the right they automatically update and we can see uh exactly like its coordinates on the canvas or within this other frame its height and width and some other various things that we won't need to worry about just yet but some more advanced stuff down the line so if i were going to create recreate these at actual scale let's say we wanted to make some 24 pixel icons what i might do is actually zoom in a little bit which you can do with command plus and minus or control plus and minus depending and i will actually hit the f key to pull up my frame or i can always click right up here at the top and get a frame right away and so what i'm going to do is just click and drag and i can see my dimensions right away i'm just going to go ahead and hit shift to make it stay constrained and then make a 24 by 24 frame and there it is it lives over here nested right within this little example that i've got and it just lives right here if i zoom in far enough i can see where all the individual pixels are so just to make a little easier on myself i might give it a stroke over here and i can choose where it lives whether it's inside outside or center and i think i will make it uh pretty thin just so i can keep an eye on where it lives and then if i wanted to make key lines what i would really want to do is actually start with some very primitive shapes and those can all be accessed easily up in the toolbar as well and you've got a lot at your disposal here um rectangles lines arrows ellipses polygons and stars which are all and these two are very editable as well when you can adjust number of points and all that sort of thing pretty dynamically for our purposes i know that i'm going to probably start with a circle so i'll start and draw it right here which you can also access by hitting o at any time and that can make you a circle um and that'll be the foundation of my key lines and i think i'll probably want it to be stroked but it has a fill on it right now so what i might do is actually just reverse it and one of the things that really got me into um figm at the time was how some of the key commands are the same as in illustrator so if i hit uh shift x on this which i believe is the same in windows and mac yes then i can just reverse it super easily flip it i can see these two feel so i've got a circle um i will hit r for a rectangle make one of those and i think what i'll do copy and paste easy to do just like so another one resize it easy to do with all the handles on the corners and essentially i've just made myself i might make this even a little bit thinner if i'm going to work on them super zoomed in i've effectively made myself a nice set of key lines and these can be grouped up very easily if you hit command or control g you can create groups which are different from frames in that they just kind of hold things together and they don't have special properties um like grids and other things that frames could do but for our purposes super easy to keep them contained easy to toggle the visibility on and off on the fly to hide them when i don't want them anymore so honestly that's pretty easy on how to create your base shapes and if we want to get some of these diagonal pieces we can go up here to hit say the pen tool which we'll get into the nitty gritty of that a little bit more in a second with that that opens up just a nice little point so if we click actually make sure i'm getting right on the edge here if we click you can easily just click another point we can actually make our pieces just like that i'll do a little wizardry there and easily create some diagonals as well uh gregor's a question is there any special reason for the sizes of the rectangles in the circle uh yes this is a pretty standard set of key lines this is more the mode of key lines that google uses for its icons to help maintain a visual balance between different sized icons and if you're curious about that we won't go into that too much but if you're curious about the reasoning for that there are some resources at the end that will go into that much more in depth helena's article for example is very good about key lines key lines demystified i think it's called um now if we wanted to go a little bit different and we wanted to try something like this let me just duplicate this one over here easy to do you can either you can hit option and drag it just as you would expect in most software we can just delete these we'll delete these and get them out of the way something that frames allow you to do is uh something called layout grids these come in very handy in product design for our purposes though they can also provide some of that shape guidance so if i turn these on really quick um you can see it automatically creates a default an 8 pixel grid it kind of breaks this up into thirds which you could use something like that if you wanted to kind of keep that guidance but it also allows you to change the type of grid you're working with so in this case i might want a column um and we'll keep it in the center and i think i want it to be like 20 of not 20 not 20 columns 20 pixels there we go because i know that i want to keep like a 2 pixel padding um on that and i can add a second grid if i wanted to say a row one keep it in the center make it 20. so you can keep layering these on if you wanted to try to keep some of that guidance for yourself but these can also be turned on and off very easily uh through some key commands to show layout grid so in this case option g turn the mod and off if you want to have more of a quick on and off across the board as you're designing icons rather than having to toggle on and off key lines individually that's a good way to do it so that's kind of a quick and dirty approach to some of those basic shapes and how they can kind of be used in frames which are kind of our building block that we'll be building our icons inside of next up this is very similar to pathfinder functionality in illustrator if you're used to that boolean operations these combine any set of shape layers through one of these four formulas either unite subtract intersect or exclude boolean groups are treated as a single shape layer and they share fill and stroke properties it can be combined with other boolean groups through subsequent boolean operations they can get pretty nuts if you start nesting some of these and some of the cool stuff you can do we're going to take it a little easy today but these kind of function exactly as you'd expect um so for our purposes we've got two shapes here i'll zoom in a little bit on unite um we've got just a circle on there so what you can do is you can select these individual pieces and go up here this is where all your booleans live and you've got them all handy right here so union does exactly what you would expect it kind of forms them into one shape but if we open it up um if we do it like this we can see that the individual pieces within it are still available still editable so if i were to take a union like we talked about when you have something selected all of its properties are visible over here we can do something as simple as going here to our corner radius a little window and giving it say a radius and that gets entire boolean which is uh super handy but since these are still editable i can go in here i can shift this around the effects remain which is super handy it's non-destructive if we do subtract it's kind of the opposite it functions like you'd expect it takes whatever the top element is and cuts it from the bottom and this can work in multiple too so if we added a second circle then both of these objects would be cut out of the square and it can have rounding applied to it as well and they can all move around things do get a little squirrely when you're right on vertices but that can be avoided so you can kind of have some very interesting stuff this is super time saving when you're dealing with overlapping elements in icons let me tell you uh intersect does something very similar where whatever the crossover of those two elements gets preserved and exclude functions in the exact opposite where whatever is overlapping is cut out and if we look actually at one of my favorite things which is outline mode which is the same as it is in illustrator command y or control y we can actually see all the elements still in play that are involved in these booleans if we zoom if we zoom in here say on one that we've rounded we can see the rounded shape that is created versus the pieces that are actually making it up and cutting things out so i love outline mode uh super helpful for potentially finding lost elements or seeing exactly what's going on behind the scenes uh parts that are making things up can help you troubleshoot some issues potentially so that is booleans oh yeah i should share this one soon since it is tied in with the menu itself something that you'll probably want to do a lot as you're cleaning up your icons is flattened selection um that does different uh things depending on what you're doing say if you were had a stroke and you had rounded a corner um oh thanks me for pointing that out uh yeah i think boolean actually it comes from a logic mathematical background originally um why that word i don't know but it's cool it's a cool word um to go back to flattened selection um looking at these if we wanted to uh basically make it and make it destructive or make it not in the same way anymore if we wanted to clean it up um what we could do is we could hit either command e or control e or you can go up here in the menu and hit um flatten selection and what that will do actually we'll look at it in outline so it's a little bit clearer if we hit that it basically does away with that it makes it into one solid flat object so it's still vector of course but if we look at the different points involved now it has expanded it out made the rounding kind of solidified and so those are not editable anymore so as you're cleaning up icons and handing them off per se that's going to come in really handy for kind of packaging everything you really about especially when you're going to be exporting to svgs or things like that so super useful to know uh my favorite the pen tool um this one is mostly blank because we're actually just going to draw some stuff real quick we looked at the pen tool very briefly in our first look at frames as one of these kind of basic primitive things we can do so if we hit p and we bring this up it kind of works as you'd expect if you just keep clicking you know you can make a bunch of points and then you can bring it back and it kind of snaps to itself if you want to close it and you've got you know a funky a funky polygon we can increase say the stroke size or something like that but um one of the things that helps set figma apart from other programs that i've seen is something called vector networks in that if we wanted to let's see let's remove a point and do something like this you can and this interesting little node is still all connected here you've built you're starting to build a network of nodes kind of like a spider web that all stay connected to each other as opposed to being separate elements and for icons that could be a lifesaver so when you're actually in here uh when you've got any kind of shape and you want to get more of those um that direct vertex control um when you've got anything uh open even like a rectangle if you hit uh enter or return you've got direct control over all the vertices so for something like this with a vector network we've got that same kind of control and we can edit each point individually so for example let's make a new one if i wanted to create a curve something with more bezier handles i could easily let's do that bump it up to something a little bit bigger um and what i could do is select a point after i hit enter and you can see here either by using command or control i can um get into bending which is also accessible right up here at the top the bend tool if i hold ctrl or command and click it i will add bezier handles to a point and that will give me all these nice curves and i can adjust each one individually if i do like option i can edit them even more individually on each kind of basis you can even do this when you're first starting out drawing and you hit if i click and drag and then click before releasing i can create curves right off the bat but if you're editing a lot of vectors like this um something that you'll probably want to do is a lot of joining and removing of extraneous points so say um i had two separate uh pieces like something like this something like this these are two separate pieces entirely as you can see on the left hand side um these are two separate uh vector elements entirely so something that i could do uh first off i could use that handy dandy flattened selection that we talked about and in this case that will actually combine the two of these into one so that when i hit enter i can easily select one point another point and i can hit either command or control j and join them together now if i had one of these that was curved so let's say if i hit command and make this one curved and i'll delete this and i wanted to connect these two points but i didn't want it to just be a straight line i wanted this curve to continue actually i'll move it like this i wanted this curve to continue to influence the the new joining here something i could do is and i learned this from miggy shout out to maggie um if you select these two uh you can do one of these key commands command shift or ctrl shift j and that will create a smooth join where it will based off the bezier handle on one side it will kind of guess at what the best option is for joining it with a similar curve on the other side now say you are dealing with [Music] a lot of points um you've maybe you're editing some kind of janky svg that you've brought in and there's too many points there's points all over the place let's add in some points um and you know that you're not going to need say this it's like that's a straight line why is there an extra point here you can take any point you've got in a closed shape and delete and heal which i use literally all the time so command or control and delete and that'll easily uh remove a point for you oh wait that's shift delete actually you're gonna see behind the curtain real quick here um we're gonna use a variant real quick which we'll get to in a second um that'll be edited for the community version don't worry um there we go and also a nice cleanup thing as you're dealing with icons and something as well if you're trying to get more finicky cutouts up this way up it's very easy to outline a stroke as well so if you don't want this to be a stroke anymore and you want it to be technically like a filled object what you can do is either command shift o or control shift o very easily and now if we say turn on outline mode we can see that we have outlined it and so now it's technically two paths so helpful to do when you're doing clean up and need to if you're not handing off stroke information say now let's talk about scaling um i used to deal with this a lot more when i would work in illustrator and work at a large size but for our purposes this is just something really handy to have so i've got a couple of icons here i've got a couple of frames with icons in them and we can look at the outline mode they're built a little bit differently one is still strokes as we can see actually i'll click on it so we can see them living over here and this one has been outlined like we just did um something that you'll want to keep in mind as you're working on these and especially working with other designers and figuring out how these are going to be implemented is going to be making sure that things are scaling correctly um so for our purposes if we take uh this frame uh we can scale it like we did when we first made a frame but we noticed that some weird some weird stuff is kind of happening uh first off it's stretching a lot but also the stroke size is not changing uh the strokes are staying the same uh no matter what i'm doing um and if we look at this one i'm not sure what's going on here it's going side to side but not up and down which is which is strange so ways we can mitigate this just in case you don't ever want to get into all the rules around scaling if we look at how some of this is being treated with stroked information it can be very handy to use this scale tool there's a tool specifically for this which preserves stroke and style information no matter what you do um which is super handy for scaling icons and scaling up effects as well if you end up using different kinds of gradients or you're using oh thank you yes you did point that out i will get into that that was on purpose the secret um no you're good um for stroked information like this if we want to keep everything all of the ratios the same as we scale down something we can do is we can just hit k and that's accessible up here with the move tool so if we hit k uh actually let me select it first if we hit k and we scale it now it preserves the stroke size uh relative to the frame size so all the everything stays the same so if we took it back down to you know too far if we took it down to let's say it's target size like 24 it behaves as expected and we can zoom in we can see that we've got two pixel strokes and it's all very nice for this one like this since it's outlined what appears to be happening is some of the constraints have been screwed up um and this can happen you know inadvertently maybe or somebody didn't implement something right so if you want to change it that way this is something that frames have that other objects don't say like groups something you can do is very easily say that you want all of these things to scale you're basically telling how the object should relate to the frame around it how you want it to relate to the different sides of the frame so if we change both the scale very easily we can resize this one too no moss no fuss granted you could use the scale tool on that one too and everything would be perfectly fine but just a little bit of extra troubleshooting uh probably besides outline mode my other favorite kind of view mode is actually pixel preview which i'll look at here which you can access very easily with either excuse me control p or control alt p depending on what platform you're on and this is an absolute life saver when it comes to determining a lot of accessibility concerns around low density displays um with k how would you specify a size you want versus dragging that i don't know about specifically i typically drag them uh but if there's a shortcut for that i'm sure mickey or somebody else could throw that in there if you oh there's a plugin another thing about figma fantastic plugins but let's jump back to pixel preview on this real quick um when you're designing for low density displays this gives you as you can see down here pixel preview enabled 1x um that lets you basically see what you're doing how this would appear on a low r or a non retina low density display i already work on a display like that to kind of keep this stuff top of mind um but this is great to make sure that what you're doing is staying really crisp if i go over here and look at this one um making sure that everything is functioning as it should i actually realized i designed that one wrong and this is that's hey that's perfect you can see exactly if you've got something misaligned this piece i had on a half pixel instead of a whole pixel and so that's a great way to find out these kind of things if you're wanting to get the the ideal uh low density experience so pixel preview it's a great thing all right let's move to the next step now this is kind of the break between halves i think i'm running a little bit over time so we'll try to power through this as quick as we can um i wanted to show uh really quick three different ways um which maybe we'll only do a couple using some of these experiences to draw a heart the bane of the bane of uh of icon designers everywhere so a way that we can kind of figure out how to do that so i've got kind of three blown up versions here and then three little tiny workspaces down here so let's dive in so i think the first way i'm going to use booleans for we can look at that then i'll try a couple different ways using the pen tool and we can kind of see how that works so if we dive in if i'm just going to use booleans maybe i'll just make a couple shapes and then tie them together uh so if i zoom right in on this little icon i've already got some key lines set up um so i'll probably start with uh just a rectangle and i think what i'll do i will hit enter so i can get into focused editing mode and just start moving points around so i think what i'll do is something like this maybe just start with why not it'll make a weird shape like this and what i can do is i can actually duplicate this shape and flip it horizontally so in this case that's command or shift h and i can basically make another weirdo version of this i'm actually going to edit this slightly this is not what i wanted delete and heal there we go something like that uh and i will duplicate it essentially adjust a couple rogue points so if i had something as simple as this i could basically take these two and unite them and once they're united i could start applying rounding to them if i really wanted to so if i wanted to go oh well that's way too much um what i might actually do is edit this on a slightly different basis take these points and make them roughly like that take these round them up like that and you can do something as simple as that and then if you had your union you could make it outlined you could round the union itself say if we wanted a little bit of curve just on the tip and where these two things meet um love those two things very nice and you can keep editing these if you wanted to kind of make a heart that way so if we wanted to do it a little bit differently i'll actually make these make this guy scale like we just talked about and then it shows up nice and big over there with the and this is what happens when you don't use the scale tool by the way because the pieces themselves uh the rounding elements which are still editable do not scale but if we flatten it look at that let's try it with the pen tool and we'll use some bezier curves on this one just to make it a little bit more interesting we'll skip the third one for now because we're running a little bit behind thanks sound issues uh so what i'll do here we'll start with the pen tool just to pee and i think is i'll actually go like this go up to here again make it really simple go here to here to here i'm also very grateful for the guides when you're working within a vector network these red lines show up and so it tells me when certain things are aligned super great so if i start with something like this and then what i think i'm going to do i'm going to select some of these points and hit command and bend them with the curves so that then i can get a little bit more granular control over these and then what i will do with these is actually round them using the rounding tool so if i go back up here and hit something like that i can very easily curve those off have a little bit more granular control over these ones to get a little bit more of that organic form going around and then i'm not relying on just the com the computed rounding and i'll go ahead and make some of these bits round two so there's a lot of different ways you can do that we'll flatten that one up make it scale and then it shows up nice and big up there too so there's a lot of different ways you can go about you know combining primitive shapes you can draw everything by hand you could also draw it much more rigidly with the pen tool and round it up that way um so it's actually fairly straightforward to make some of these simple shapes like this i'll skip number three at the moment feel free to do that experiment with it a little bit more now in our last little bit um we'll try to power through some of these bits of things that may be new um including some stuff like quick action styles components variants might skip variants as well something that may be a little bit too in-depth but if people want to stick around we can talk about that too so let's dive in two part two styles and effects as we're looking at some of these uh these this is actually one of the icons that i made for fig jam and you can see that it's got a few things going on there's a gradient inside there's a few different colors happening and there is kind of a shadow applied too so as you're working with color in icons a really handy thing that you can do is actually create styles that are easily uh replicatable um across the board so if you have say one particular color that you're using uh you can apply it to a bunch of different things and then you can if you need to you can edit that color and its changes will propagate across every usage so in this case i've just got some gray circles if i select one as you can see in the little color pane down here in the properties you can pop that open you can adjust color this way or you can hit the little eyedropper tool which you can also access by tapping i and this will open up a little loop up in the upper right for you and you can easily kind of get in here and get any of the little colors that you need to so say if we wanted to transfer this color scheme to this icon i could say oh i'm going to sample each little thing and i got okay there's a white thing there's i know but the gradient when i'm sampling that you know it would actually try to sample any particular point along this i can't sample the gradient as a whole so something you can do which is super handy is actually being able to take an object's properties and copy them wholesale over to something else so in this case i know that i've got this gradient and you can see right here how that's kind of built so if i select it i can hit option command c or ctrl alt c depending and now that that's copied i can go over to another shape because i know that i probably want this to kind of mirror that the large central shape and hit the paste properties keys and it copies right over so rather than having to rely on like sampling piece by piece it's really easy to kind of copy styles over entirely now it would have been even easier if i had gone to this and chosen to create a color style um there's much more in-depth um walkthroughs on all of this kind of stuff on the figma's website and various other figma videos um but just as kind of a quick sample of the kind of control you can have over this you can easily pop in and say to create a new color style i want to call it oh blue gradient and now that lives in my styles so if i select anything i can pop open my styles and i can easily select something edit it it will change across the board see if i went in here and decided to change uh this blue to a yellow it would do that across every instance so soup is full um all of these things can be since i am i'll just wrap this up easy to do so i could do that across the board if i really wanted to so came in super handy with fig jam because there were about six different color schemes that we were using so easy to make tweaks across the board um one of the other really big important things around figma is its use of being able to use objects as components that's one of the other great things that frames can do specifically and what that allows us to do is create basically a main version of something that we can kind of copy but if we make a change in the main version the copy will change too kind of like with those color styles so in this case we've got we've got some icons here um that we've kind of made and we're going to make them for a tab bar per se so in this case i might take um some of these bits and turn them into components so you can see there's key commands for that specifically to create components out of things something that i will do is actually create multiple components if you have multiple things selected you can make them all into individual components together um so i'll do that with those and i'll do that with these ones down here too you can see they change they become purple and they get a new little multi-diamond icon thing going over here so you can in an outline mode too you can see that there they're a little bit different now so the nice thing about that is and i might actually change these to you can see here renaming i'm just going to do this real quick um we'll change it to thick we'll rename this one to home into files this one to settings so i've got these three components now and so what i might do is i'll duplicate one and put it right up here um so it is an inst it's an instance now excuse me of this icon in that um actually i should show you this first if i change something here say if i went in here and started moving points around as you can see up at the top it's doing the exact same thing but they are independent in some important ways in that i could restyle this one without affecting this one so if i went in here and i took off this white background and i wanted to make this icon white i could and i could still edit this and it will still be reflected up top so this is monumentally helpful for light versus dark mode icons any kind of color shift that you need to do um anything like that so if i actually move all these up into their places and i will take off these backgrounds as well i can make them white too and they'll still all be instances of the pieces below which is super great um i actually won't need to show this one off just yet so we'll leave it there as to how components kind of function which is super helpful but if we're talking about since we were talking about light and dark mode something that's also super helpful with components is being able to create variants of something so if you had a light mode version of something a dark mode version of something something that was selected or deselected or you needed like we were talking about during the during the icebreaker if you needed icons with secondary elements like if you had a user and you needed you know add subtract blocked uh confirmed and they were all using the same basic building blocks just kind of variants of the same thing figma makes that really easy to easily swap out so in this case if we had kind of the same tab bar situation we actually take these backgrounds off ahead of time i could take these three icons here and i'll make them into components and then i'm going to rename them um actually let me do this first make these into components too what i can do is now that all six of these are components and they don't have any names yet they're still just frame but i can take i want these two to be related to each other so i can take these two and since they're both components figma says hey do you wanna do you wanna make these variants of each other so if you hit this button you can and it makes a nice little box around it so you know that these two things are related so i might rename it home and you can see that there's not a lot of information here it's giving me a little bit warning because they're essentially the same in how they're being identified but um it kind of creates a default property for us and we might want to change that to state if we wanted to make this like active and inactive for example so if i were in there i could easily say well this one this one's inactive because it just has outlines this one i'll say it's active so now i'm not getting that error anymore because i've got these two states already laid out so what i can do is these are components just like we had before so if i make an instance of one i can easily kind of throw that up right here i'm actually going to change the colors on this the main component is going to stay exactly the same and fill we'll make that like 30 something like that and then since these are related to each other if i select any version of this that's like floating out there in this instance um it will give me an extra little drop down in the properties panel where it will let me choose let me actually make that one white too it will let me choose between the two states so this is super helpful for any time you're building out navigation elements and tab bars and anytime an icon needs multiple versions of itself you can easily swap these kind of things out on the fly um and even animate between them but we're not going to get into that um uh noah's question within the instance yes yes in this case that information is saved within the instance itself uh that that color change has happened it will stay in there um if you knew that um you could also make instances within instances you could you could nest this kind of stuff um across the board um is that good practice no i would not say that is good practice i would make um separate versions where that is uh more explicitly laid out of course especially if you're building a design system but for our purposes right now quick and dirty it's good enough um thank you for that question um and so we make sure that we actually leave some time here at the end i know that was kind of a whirlwind tour through some stuff that's mainly the kinds of things that i use the most if you ever need any other quick references to things i have some extra pieces laid out here these are all links this file will be in the figma community uh right after this is over um and all of this will be available very soon so i will i'll blast that out very soon um if you ever need if you're ever stuck with uh something that you're trying to accomplish in figma um there's a good chance that you can find it uh by hitting the quick action menu which in this case is command slash or control slash and that will help you do all kinds of things like say i want to you know do a union of objects if you don't remember where those live you can easily hit those kind of things how to ungroup things if you're like create create link create components maybe i want to um you know create a variant that kind of stuff can show up as well as plugins plugins are searchable in here too like something i use a lot is starks plugins for accessibility you can easily pull that kind of stuff up too if you want to check contrast and all that sort of thing um super useful um and it can help you get to all kinds of key commands like flat and selection it'll tell you what it is also handy and every single keyboard shortcut you can find is easily available in the bottom right here in the question mark you can hit it here there's a key command for that too and you can easily find basically anything you'd want to do very easily if you're not sure where it lives in the product or how to go about doing it super handy um a few resources i've kind of put together as a kind of a plug for myself um a video that rajee and i did last year for figma about designing a cohesive icon set that definitely goes more on the side of best practices for cohesion when designing icons rules to look out for things like that some things i've written about the fundamentals of icon design um sigma's own video about pen tool basics and vector networks goes much more in depth than i was able to hear uh basically anything by helena she's written some fantastic articles about icon design and those are linked there and then uh bonnie kate's wolf excellent piece a beginner's guide to iconography um is also available as well and as i said um i will blast all this out um we do have i'm okay going a little bit over if people uh we do have a little bit of time for specific q a i realized that that was probably a little bit too uh whirlwind to maybe uh absorb a ton of stuff but if there's any specific questions um i would love to hear them or if there's something that was already asked in earlier that i missed please please yell it out again i would love to hear it and maybe i'll get to learn something new too because i'm learning new stuff about figma all the time you can throw it in the chat or i think there's a q a tab as well but i believe that is currently empty but feel free to throw anything in there and we'll see if either myself or the hive mind here can can answer your question for you when exporting icons as svg for devs outline or solid um i would say that depends uh depends on what the depends on the devs honestly in my experience um as to how they're going to be implemented if you know that they're going to be implemented at the intended sizes and everything um i have no qualms about handing over stroked icons or if that's part of say a stock set that you're building and that's one of its strengths is you want it to remain editable i have had some projects where i have not had as much faith in its implementation that it would be done correctly as intended and so in those cases i will give outlined icons to ensure that they maintain say the level of detail and the um different ratios between their elements uh correct uh ah thank you ross jokes gonna be smaller file size performance yes that's true and helen has a really good piece too about uh icon exporting best practices which um maybe we'll need to do an icon itself about that uh laura wants to know about quick animation yeah animation unfortunately uh smart animation in figma is super helpful um for a lot of small icon pieces i think that would require its own time just because i think i honestly tried to pack a little bit too much into today's so that would kind of need to be its own piece i think um because there's there's a lot of meat on them bones um uh let's see what does quickly say a pretty newbie question earlier about pen tool curves is there a method or plug-in to have really granular control over curve handles i always feel like my curves are wonky and imprecise um fakela does give you pretty granular control let me jump back to say the heart here um oh yeah i outlined that one boo well that's why we left the third one open right let's say we do this um just by clicking and dragging um you can easily get to any hole or half pixel but as mickey just mentioned you can you know you can select the point itself or you can select the handle you get a different set of vector coordinates for those so you can be as nitty gritty as you want to up to two decimal points i think so you could say you know 14.18 um and make this 1.12 so you can get super grit nitty gritty with the individual curve handles if you really want to for my purposes i never have needed to get that nitty gritty just because uh snapping to whole or halves has always worked very well for me so i feel like that may help keep keep your curves more consistent if you if you keep them snapped to some degree um easier to tell when they're not aligned with each other that's for sure well look at this mcgee with extra tips yeah excellent question export animated svg icons uh animation is only for prototyping at least at this stage uh there very very well may be some plugins for doing that sort of thing i know there are some fantastic uh animation plugins like you can even do um very like basically a mini after effects within figma where you can do keyframe animation and that whole thing um i've only dipped my toes into that a little bit i typically stick with smart animation to use as a guideline for uh actual animators that i work with um but yeah as far as i know no no baked in a way to do that yet yes thanks for that uh noah some extra bezier alignment um stuff like i first started learning when i was uh doing more type design back in the day but yeah alignment of handles is important swap on back over there but any any burning questions remaining love to hear them if not i will wrap things up oh yeah thank you uh where do you prefer to start uh 24 or 16 pixel icons uh it depends um 24 versus 16 is an excellent question um um that that information will typically surface from me actually might um i might just talk for a second here we'll stop sharing turn this back on hey um that kind of information typically surfaces for me when i'm performing an iconography audit during a product during a project determining best usages of icons where they need to live and all that kind of thing and those kinds of needs will surface during that time um if i'm making two version two sizes of the same icon i will absolutely start with the smallest version to determine uh how it needs to appear because it's always easier to add detail than to strip it out if you need to scale down so that is typically where i go um i saw a couple questions about the recording it is being recorded i am recording it it will go up there we have we have a youtube uh there is a friends of figma icon youtube it is empty right now uh but this video will go up there and then i'll blast it out once it uploads if you want the reference and this uh some of these little worksheets that i was going through will be available on the figma community as well if you want to kind of do a little lunch and learn with yourself um it'll be great um let's see if there's any more things throwing in thank you for coming everybody who's having to scoot out oh hi laura icon dad yes um did you mention how to align pixels on grid um figma snaps to the grid automatically uh to hole in half pixels for the most part so that's actually very easy to do and very and with pixel preview turned on very easy to notice when that is not happening um so in my experience it's actually way harder to get things off the grid than it is in um in illustrator which happens to be a lot not to throw too much shade in illustrator because i still do use it occasionally but uh i have not actually opened illustrator in eight months maybe so uh so yeah so all that being said um everybody thank you so much uh for coming here uh talking through the basics of icon creation infigma and as i said we did record it it'll be available soon if you want to go back through anything or show it to somebody um in the meantime if you've got any feedback on this session or what you'd like to see in the future we've got some got some ideas cooking about some good stuff some interviews some workshops some other things please don't hesitate to reach out through twitter you can also email through the chapter page on friends.figma.com um so yeah thanks so much and hope you have a great rest of your day or if it's late go to bed bye

Channel: Friends of Figma: Iconography

Views: 2,281

Rating: 4.961165 out of 5

Keywords:

Id: mQhJX5W6E78

Length: 64min 6sec (3846 seconds)

Published: Fri Apr 30 2021