Build it in Figma: Design a cohesive icon set

and we are going to start broadcasting that sweet hey everyone this is Roger King with building in figma and I've got my friend Noah Jacobus here uh I also need to ask Noah is it Jacobus or Jacobus or am i completely butchering the last name you've actually done very well compared to most of the uninitiated folks it is Jacobus so the the co is the emphasis it is apparently Dutch is what I was told by my parents I will bet that the Dutch were excellent Vikon Somali A's and craftspeople and so Noah Jacobus everyone while you're coming in we're just gonna wait for a bit to make sure that as many people come in and we don't start without you but a couple of things a little bit of shopkeeping here make sure when you're chatting that you're chatting to all panelists and attendees and not just sort of to yourself alone in a room or just to us panelists we'd love to make the conversation with all of you since we're all going to be doing the workshop together as well as we would absolutely know to love to know what you're doing here what you're hoping to learn maybe where you're from so please keep the chat alive here and we will go ahead and wait just a bit hi Bruno and Adam good to see ya metaphorically of course hi Joanne yes so instance we're talking about where we're from I am in Grand Rapids Michigan which is a lovely little town well I say a little it's a little bit larger than where I used to live but it's in the west coast of Michigan so on the Lake Michigan side we were depending on how far you can throw a stone we are a stone's throw away from Chicago kind of it's across the way but it's it's nice I'm a big fan it's like a like 100 mile throw or something like that a hundred mile stones throw them you can take a ferry from from the coast all the way over to Wisconsin and also down to Chicago if you want to from here but what's up what's Michigan like this time of year oh it's actually been a little hot recently I know it as hot as some but we've we've we've cracked into the 80s so for four with Michigan oh that's hot yeah but uh yeah typically summers are pretty are pretty temperent which were we're big fans of we lived in my wife when I lived in Kentucky before so it was a lot more sticky humid summer situation down there but here we've got you know the lake Lake Michigan we've also got the Grand River which helps regulate is some of that temperature and bring in the cooler temps so we like it awesome looks like we got quite a few we've got Caroline from Oakland hey what's up thanks for coming I love it I'm gonna put troupe of Mudd history from India sometimes we do get like a pretty global audience on this which essentially means people showing up at like 2:00 a.m. their time which y'all are troopers that's amazing Holly have you been to Grand Rapids sounds like you'd have since it's good you say it's cool I'd be curious to hear what your favorite part of Grand Rapids is I've only been here a couple years so I have not explored everything yet humor man stuff go ahead man what were you saying I was just saying it most if that's been from working from my home office so it's you know I'm not like out there traveling around a ton but Ovid Michigan is very different in regular Michigan oh cool yeah oh hey Adam I know madam on Twitter Prague awesome so very cool Mustafa from Turkey mica from the bustling metropolis of Nashville amazing so good to have y'all so good a mule on hey John hey John from Calgary excuse me from Lagos Nigeria tell me what time is it over there in Nigeria Wow what well thanks for staying up this one's on you Noah to make it worth it no this person's on at 11 p.m. whoop this is bed time to make this interesting so awesome well we'll go ahead and get started I know no it's got a ton of great material to share with you and that's great Bruno's got a little suggestion we'll go ahead and do this before we get going let's uh let's reaffirm that when we do chat make sure that little blue drop-down box over there that says chat to doesn't just say all panelists then it also says all panelists and attendees so just choose the all panelists and attendees so we can kind of have this conversation going on as soon as we jump into the figma file together and just a little bit then we're gonna be a lot better off to be able to be Co designing together but um without further ado I just wanted to introduce my friend Noah Jacobus I met Noah many many years ago actually I don't even know if it was many many years ago but it sure seems like it covetous definitely affected my timescales but we met going to conferences no has actually been a part of one of my art shows for a Star Wars gallery and so he's done some cool pieces of art I've always respected Noah because of his love of geometry and minimalism he brings that into his art as well as it's why I wanted him to be on this webinar to teach you all about minimalism geometry working with like reductionism and kind of showing you his flavor of icon design so Noah tell us a little bit about yourself and then and maybe one false detail about yourself as well all right false detail okay well we'll start with the truth stuff yeah for people who aren't familiar with me at all yes as Roger said I'm Noah Jacobus I am a design specialist at a company called metal lab they're based out of British Columbia you may have be aware of them originally kind of rose to fame by being the the folks who designed the first version of slack back in the day I joined much later than that I can't take any credit for that but I I joined and we were much smaller we had about four designers at the time and now we have upwards of 40 maybe but we've grown a lot we're a product design agency with folks all over the world and they started out my time there as a product designer before being able to really dig in and explore my love of iconography actually might advance to you since we're talking about me I'll be vein with my spinning slide yeah so I get my hands dirty these days with illustration and iconography other kinds of visual work for the clients that we work for there it's it's super fun get to work on a lot of different stuff all the time let's see so interesting this is a physically this is kind of I got two truths in alive and if we needed to come up with something I may go with it if that's your if you're feeling it ride that wave let's see let's say I have I used to be able to put both legs behind my head I have performed at the Sydney Opera House and I've shaken the hands of four different American presidents I hope you didn't just go sequential like it really feels like you would one led to the other okay y'all can vote on what you think the lie is I am like that's a lot of presidents mm-hmm so I want to go ahead and say that's the lie see Adam thinks the the legs is the lie well the thing with shaking Trump's hand would you kind of crush it because they're so tiny but Opera House for presidents legs yeah I'll go ahead and reveal here the presidents was the lie I have actually met George Bush Senior but yes I did I did actually be able to put my legs behind my head until I began to grow old and lose mobility I had been and then yeah my high school band performed at the Sydney Opera House in let see the crowd here was at to 2004 I believe it was so no what did you play did you play in band clarinet amazing are you still are you still playing occasionally not as much as I used to it's a little hard you know when you have of a young child to get in the practice time when they're napping fairly regularly so we tend to we tend to keep the noise down but the next stream I request a jazz clarinet rendition of a thriller by Michael Jackson I feel like it's the only right choice for this so I would love it I would love it it'd be like like Benny Goodman swing style we can try to get something in there I feel like I know what that name is and so I'm gonna just nod and say heck yes that's sounds really good yes well they might otherwise you but this is gonna lie but my other thing probably should have been that before I got into design I got a bachelor's degree in music history so that's where that's coming up but now I don't use that much so cool all right so cool well I'm gonna I'm gonna let the reins go here and let you let you talk to us about sir your background and then what you've got to teach us on this for you all who want to ask questions go ahead and ask the question with the Q&A feature that would be amazing of you and we'll go ahead and wait till Noah's done right before the workshop and then we'll just answer and open up those questions so thanks so much know what thanks for joining us let's hop in yes absolutely so yeah I've got a little bit of background so why are you here listening to me talk about icons today well ever since I can remember since I was very small I used to draw a super tiny and I didn't know why I like my my mom and my parents and friends would be like why are you like you had this giant sheet of paper but I would like be up in the corner drawing these tiny little things I didn't know why but I think like after years of doing this I've kind of figured it out where I've always really enjoyed like trying to dis still imagery down to its simplest concept and that's kind of how I like to approach iconography because it's kind of especially for the context that we're looking at today which is like digital products apps and stuff icons are like microcosms of products and brands through what they depict and how you can glean a lot about what a product is and how it functions and how you should feel while you're interacting with it at any given point so in light event like why isn't more care given to iconography they're often an afterthought if they're thought about it all sometimes like in my experience doesn't have they don't change at all from like the wireframe of an app all the way through what you ship and I do have that of course you know due to scope and budget and time frames and a whole myriad of factors not every project that you work on is gonna call for custom icons mmm excuse me but relying on like stock iconography is a lot like relying on stock photography because it can it can functionally do the job but its generic you know it's uh Nona belit doesn't speak to a brand or a product's particular strengths and quirks and so like some things that I try to use some aspects I try to use to like sell the idea to stakeholders or to clients about like why custom icons might be a good idea are like the set that you have isn't extensive enough or expandable like it doesn't have a consistent set of rules that you can like build on or maybe it's something where the product of the brand is using uncommon or new visual metaphors like maybe there's some kind of a new interaction pattern or something that you know you want to represent but there isn't something that already exists maybe it's workflow heavy has some tool functionality that hasn't been represented before like that's a lot of a lot of things we build at meta lab are you know there's some very you know workhorse web applications that need a lot of tools represented or some things like that you know and that's hard to track down in a stock set maybe there's some funky UI or type choices that should be paired and reflected in the iconography like maybe there's some really unique visual assets or patterning that's being used that you can accentuate or contrast you know on purpose maybe that's you want to do so today like I'm chatting through iconography well you know of course be building that in figma but beyond just like using though using that tool and the tools here we're hoping that the info that we're gonna talk through will help you in a few ways like better pick an icon set that it will serve your products needs whatever you're building and designing right now identify problem areas in a set they can be avoided or corrected this happens a lot in my work where let me be a client has come to metal lab and they just recently gotten like a big rebrand and whatever agency did that for them maybe did some small icons to go with it but you know they were they were built in isolation as a as an expression of the brand but they don't necessarily work in the context of a mobile app product or something so figuring out what the rules are so that we can expand on it or correct it and especially if you're building from the ground up being able to think through iconography as part of a cohesive branding and product experience and not just you know a nice padded coat of paint at the end you know like the last minutes like oh we need some new icons we'll just throw something in so if we jump into the real meteor style rules this is kind of where a big area focus for me for the past few years has kind of been like figuring out trying to codify a lot of the things that I've noticed in icons but you know I could be like this looks wrong or this looks strange I don't know why so this has been kind of a running list of things that I've been I've been building over the years but um we really should probably start at the very beginning which is what is an icon and rudder and eyes friend Meg who is a designer and illustrator over at lyft has this great quote which is from an article about illustration that she wrote which is fantastic if you ever read any of her writing an icon is a symbol representing a larger idea above all else an icon should be something you can easily interact with it should be intuitive concisely capture the idea it represents and that's really where it sets a iconography apart from some other related stuff like spa illustrations and things like that or more illustrative elements that art like an interactive piece of the UI per se so of course this can cover a lot of ground being like a symbol so the interest of time like we're talking about just UI icons in a mobile product and that's what we're gonna be drawing together later but this is also where in an app you can let its personality really shine so so where do we begin that's kind of a great place to think about wedding when you're starting any design project is like where where are we gonna start and excuse me another one my favorite designers Alex griddling who is a designer at Bungie now doing fantastic work on destiny he has a great article called an icon design that kind of collects some of his writings about his years in the icon design field and he says the start of any design project is overwhelming and filing restrictions to impose on yourself and focus your attention and lead to more creative solutions by considering an icons context you're immediately able to tick off a number of decisions and direct your focus accordingly and this really spoke to me when I first read it a while ago and it kind of inspired like the subtitle of this talk about like how to stop worrying and love the limitations because this is something that I love to try to get out of the way at the start of a project because one of the things I hear most often about icon design is that sounds miserable there's so little space like you can't do anything with this is 24 pixels well the second half is true there is little space embracing those inherent constraints can simultaneously do a lot of work for you of things you have to figure out for an icon project and it can free your mind up for new ideas elsewhere imposing limitations on yourself it's one of the most valuable things you can do in icon design or most design for that matter not only can it save a lot of headaches down the road if you understand and plan for those limits patience but it allows creativity to flourish from once you've narrowed your scope and beginning with a common grid system and a set of aesthetic rules is a fantastic place to start once you've kind of gotten that figured out so this is something that I stare at day in and day out and it is the grid skeleton of every icon set is its underlying grid system if you use Gmail or YouTube or anything Google in the past few years you're probably really familiar with Google's material design icon system and those are built on a 24 by 24 pixel grid for the most part and that's kind of where I learned a lot of this too was dissecting Google icons back in the day but with a lot of icon design other multiples of 8 size 24 can also be pretty common you know you've you can see 8 by 8 all the way up to you know 64 by 64 or more though that sometimes starts to infringe on like spot illustrations and some of that other stuff and a discussion about icons wouldn't be complete without mentioning key lines and this was a this was a revelation to me when I first started thinking about this and it worked out that it was about the same time that I was starting to learn about typed kerning as well because there's a lot of similarities between how these function key lines like we see here our guides that help keep icon sets visually consistent regardless of the orientation of their component parts so like visual balance is the key here and it's interesting when you realize that most app UI icons are based on a handful of core silhouette so you've got at their heart they're mostly just squares circles and then vertical and horizontal rectangles are kind of the building blocks of almost everything there are of course variants and you know different stuff that we'll get into but key lines can help keep your icons balanced when seen and used together so especially if they're in toolbars and tab bars and any place where they need to look good together as as a quick example of how these work let's look at circle in a square so you're making some icons you're like okay one's gonna be circle based maybe it's you know an emoji typeface or it's gonna be like a settings cog and the square is gonna be I don't know like a calendar or something or a sticky note so your first instinct when you're making these icons might be to make their dimensions the same so you know why not sure there should take up the same amount of space but we're dealing with more visual area than exact exterior dimensions at their target size and placement like how will these two state shapes excuse me stack up with each other cuz the square will invariably feel heavier because it's geometric area is larger because it has these extra space in the corners a quick way to test this same way with with visual hierarchy when you're working with like web or print layout is to kind of unfocus your eyes or like kind of squint and like focus on beyond or somewhere else and you can kind of get an idea for how that visual balance is going to shake out and square feels much heavier so let's try in the background we'll implement some key lines and size that Square down a little and you can tell how they feel more balanced with each other even though they're a little bit different size now if we look at how that shakes out with key lines in this case shaving off a little bit of each side even in this case just a pixel on each side makes a huge difference when you're dealing with stuff that's this small it makes a big difference and of course these are just guidelines you know but it provides a really good foundation for icon consistency and this was a revelation to me to learn about and figure out like oh why this is why my icons are feeling crazy and balanced with each other because I was making everything going straight up to the edges and everything was the same and it was all super heavy and disjointed excuse me and that's also one of the reasons why I really like Google a set of key lines in that it gives you a lot of room to play around with so that you could you could keep elongating that rectangle if you wanted to so it gets thinner top to bottom a wider side to side so you could take these to the etheric streams even if you wanted to and kind of see how that all can continue to balance diagonals are a little bit of a different case but we can talk about that in a sec this is just a great foundation so if we look at those four base shapes what a lot of iconography is built out of and kind of how that can translate into some base actually I'll go back and do that one more time so if you go with your circle your square your a couple of rectangles you know that could be turned into all kinds of stuff with various levels of detail you know they don't all have to be exact rectangles or exact circles this is kind of where the art part comes in like once you've kind of gotten your base silhouettes down so let's talk about some more rules and consistency look at this handsome icon this is something I like to get into first before we get to nitty-gritty on a lot of other things because this is where a lot of icon designers stumble myself included I do this all the time especially when I'm you know really gung-ho on a new icon project or or I don't necessarily have all the limitations set for myself that I don't know about say where these icons are going to be used but the context is going to be what the target size is gonna be or I make something at it ends up getting scaled down smaller than intended and that's the level of detail in the icons it's very tempting like to cram as much content as you can into this space you know because you're working oftentimes out of enlarge size I often do I work I've been drawing a lot more in figma for my icons but before that like I'm sure many of you was working in Adobe Illustrator or something like that and I would I was working at you know four hundred eight hundred percent yes I just saw a comment from Matt gushin yes Matt and I worked at meta lab together and so he's experienced some of this too so yeah checking the level of detail and the intended context of where these icons are going to land because it's always easier to add elements than to remove them so erring on the side of simplicity and constantly checking icons against their type of context for example this this icon right here this is kind of like editing a document or something like that like it looks good this size but if you check it against you know the target which in the case of this product I found that later was 16 pixels it gets it can get pretty muddy and illegible pretty quick especially if you know you're working with detail that's gonna get muddied by if you focus we don't have high density display maybe in a web context you know this could get real smeary real quick so yeah things to look out for but to get more granular and to talk about some things that we're gonna dissect on another set before the before we build with each other something that we like to look at first is element size kind of goes hand-in-hand with that level of detail it can be helpful to start with whatever the smallest element of your icon needs to be and add detail from there cuz cramming that more more elements into an icon is always tempting but it rarely pays off because that's gonna be a huge headache when you have to balance other icons with it so in this case this was for a a travel recommendations product and we needed to have some kind of like a food or a restaurant icon and I was like okay I'm think I'm gonna try doing like you know a fork and a knife together and so I knew in that context that the the tines of the fork were going to be the most detailed piece and the the the most detail that I would need to pack into this thing because the rest of it could be pretty straightforward in terms of the foundational strokes so you can see like figuring out where I wanted those end points to land on the grid figuring out the spacing I wanted and making sure that would work before doing the rest of it and figuring out how those forms were going to interact with each other another big one that I look out for this is something that I haven't had to bake into as many sets but it's something that I've definitely had to correct in other sets that I've received is dimension and perspective which are super interesting when they're when they're put into an icon set on purpose it could really set an icon set apart that there's like some cool like you know forced perspective side view type stuff or like some kind of z-axis depth or even you know isometry or something like that but making sure that that treatment is carried throughout the set because I've seen lots of icon sets where there'll be you know the majority of them will be flat and there will be two or three that kind of have this you know side depth or something and that's really interesting but it also makes them feel like they don't belong to you know in the same set with each other because there's this weird kind of like lack of perspective like you're looking at half the set we know with one eye shut or something along some of those same lines looking at how overlaps are treated this is a big consistency thing that I that I'd try to figure out because you can't always communicate complex concepts with singular objects a lot of icons rely on juxtaposing two or more elements together things interacting with stuff or like you know adding things removing things you know edit pencils other various things cards you see that kind of stuff a lot with overlapped objects so figuring out like do the elements fit snugly together is there a line break if these are outlined icons do you do some kind of like a color fill or you know gradients or something when when objects are in the background versus the foreground all really important stuff to consider that they remain consistent with each other nothing makes an icon stick out more than a mismatched corner treatment or a stroke wait this is probably the biggest offender in my own work too when you can notice that things don't look like they belong together these kind of things shine like a beacon a mile away and they're like we we don't belong so if we look at this quick example this is actually from some of the rounds that we went through a metal lab working on pitch which we have are not that long ago we launched our case study on our website about that actually and shout out to Matt in the chat who also worked on that and that rhymed quite a bit not on purpose but we went through a number of high five versions of the UI that we were all thanks rowdy yeah there's not like a high five versions of the UI that we pitched upon intended to them that took on a lot of different characteristics and so along with that there was a wide array of different icon styles that would work in those different pitches and so this is a good example of like some various working tools because you have things like you know pictures movies stickers you know some kind of commenting there's a cart there's like a favorite you know inserting charts and settings and plugins and all this kind of stuff that you wouldn't necessarily be able to find in a stock set when you're trying to get client buy-in on one of these HiFi directions so we were able to kind of make some quick and dirty versions of the tool bars with these different directions and you can see like how the how the corner treatments changed how the stroke weight changes it's these subtle little things but any one of these mixed with another you'd be able to tell it didn't belong just with that little bit of just with those little stylistic aspects I think this was this was the version we ended up going with which was kind of a hybrid between some of these when we finally got a little more settled in the UI which was a one pixel strokes with rounded exteriors and sharpened interiors and that was actually done largely to reflect the typeface choices that were you being used in the product some of the terminals and counters and the typeface exhibited these same things so being able to pair those tiny little aspects of the iconography with the type like that's the kind of thing you can't get in a stock set and it's it's really cool when you could make that kind of stuff work oh yeah there's another quick look at that some of the documentation that we like to send over along with you know style guides we help document those rules as well and also point out when it's okay to bend them potentially if you need to do like some minor optical Corrections to things and stuff which is always fun to figure out those edge cases and this is a big one this is kind of you know if you can do it it's it's a nice cherry cherry on the top of being able to explore you know color usage and active and inactive states for icons especially with tab bars which is what we're gonna be looking at it's a great way to inject personality into your iconography also from an accessibility of stand for it to be able to have you know clear visual distinction between when things are being used and when they're not and it's a great way to set stuff apart from run-of-the-mill sets you know one color icons are classic easy to implement and they're fantastic but tab bars and other parts of a product can really shine with some extra love like this so these are some quick examples of some other past work that we've done at at metal lab some really fun tab bar work and different icon explorations that we've done and it's also a nice a good differentiator when you're considering some accessibility things as well as light mode versus dark mode something that we've been talking about more internally at metal lab as well are some of the some of the cognitive load issues associated with using one kind of icon style in different contexts like this there's been research and studies this show of outlined icons taking it is a matter of milliseconds often times but it still takes longer to parse in dark mode then then filled icons so I encourage people to read up more on that Apple's human interface guidelines actually is another source that recommends keeping filled icons and dark modes so that's another great limitation to keep in mind as you're building a set to know if they will be implemented in such a way that you can build them from the start so that their flexible between both but it's a fun exercise yes thanks Reggie but accessibility and all that kind of stuff wonderful stuff to think about is you could have a whole nother session just about that a cognitive load around iconography and parsing metaphors but for the sake of this with some of those rules we just talked about I think let's actually dive in and draw something so I believe you know this worksheet believe I will or do you know we only had one question we may have a few others we also may hit the 50 person 50 editor limit on that file so if we want to if you would create a duplicate just a prep for having an overflow so we can have more people in there they're feeling like it yeah but the only question that we have right now is from an anonymous attendee welcome anonymous for starters how large should an icon set be and I'm not sure if they meant icon set or icons so maybe maybe answer both yeah let me resume sharing here know that I'm not looking at secret stuff yeah so I'll talk about both so probably like if we're talking about like the dimensions of the icons themselves versus like the breadth of the set that you need to create the breath can be converted s that depends on how will be used if you're making kind of a a generic kind of catch-all set like if you think about feather icons or something like that something that can you know a wide range of icons and every kind of app would need I would probably use maybe even feather as a guideline but like this is a good standard set of the amount of things we're going to need if it's if it's custom work for a specific client how I also always start a project is performing an icon audit and that's basically sitting down with our product team and running through the entire product top to bottom and identifying every single icon in the product how it's being used where it's being used what sizes it needs if it needs active and inactive States or other various considerations and so that will that will often be a giant document and categorizing them all yeah by name and location what kind of icon it is if it's you know an interactive piece of the UI or if it's more of an illustrative element potentially or some kind of indicator maybe it's more of a like an empty or a success state type of type of content but determining all that where it lives what sizes it needs because I'm a firm proponent of redrawing icons at every target size that they need to appear rather than say scaling up and scaling down iconography just because you're gonna end up with some depending on how you make them if they're line based or if they're solid shape based you're gonna end up with some wonky corners or some element gaps that aren't matching up anymore because the scale is changed or something like that and we had one more question which is from Megan who says at which scale do you typically design icons are you frequently checking how things look at 100 yeah yeah I'm always designing I'll often start out in isolation just to get an icon basic forms down but I'll constantly be checking it in context which is something we'll actually see here in the in the worksheet in a sec where I've kind of got some components linked up that as I'm drawing my icons they will live populate my tab bar so I can kind of see them as they go in there is a way to kind of safeguard as you're starting how the icon will probably appear and that's taking a lot of cues from other UI elements and typography around where it's going to live so looking at like stroke widths and corners of UI elements that are nearby looking at whatever type is going to be near these icons to look at like the how the terminals or the the stems of the type glyphs are appearing that can go a long way towards making sure that it won't look too strange in context before you even place it yeah it's kind of setting that up for yourself awesome man I went ahead and created an overflow figma file that way you can just do what you do best and hop in there so don't worry about you know reaching max editor limits on there just hop in and do your thing and share your screen yeah cool so this is yeah cool it's fun to see everybody so this is a fun little fake app I made here with Roger Roger and me and our friend Justin planning on meeting up to placement D&B so in this case what kind of wanted to explore that idea of like we were maybe given an icon set by a client or there was some rebrand or something was happening and so we have like this set of icons here that are like okay this is icons in the brand set that we need to use or we need to they had this set to to do what we need to do for this tab bar which if we look is just some some blank squares right now so we've got like five major pieces of the app architecture which are like you know chats faves stickers activity profiles so some some pretty straightforward stuff but this this product is very colorful it's very know round and bubbly and there's a lot of thick strokes going on and there's a couple more examples of the same set up here so we can kind of look at these icons and maybe try to parse what their rules are to that and expand upon them and maybe take some inspiration from the UI as well like we talked about that might that might come in handy for some of these so we have yeah some some more zones if people want to also try drawing out some of this stuff just to see what we've got here so this is the sample set of some iconography and so if we look at it I might try to see what the rules are here that we can that we can draw upon so if we zoom in on some of these can see we've already got some base shapes going on we've got kind of a square we've got a few rectangles and horizontals in vertical this is kind of more circular form so we can kind of base some of our key line decisions off of this and see that what we can expand on so let's see I've got I've got a dummy key line here and I'm gonna have that populate all the metal components down here but feel free to draw along and as we figure out what these are so it looks like we zoom way in which is my favorite looks like we've got a two pixel stroke on all of these shapes for the most parts most of the corners seem to be rounded on the outside sharp on the inside except in a couple places I'm assuming this is supposed to be like a phone shape so it's a little rounder whereas the envelope is a little bit sharper because it's supposed to be more of a straight up rectangle same with the lock and the trash can so we have the sharp interiors the rounded exteriors it looks like all the terminals are sharp on the end too so there isn't any rounding going on there and then we've also got some shapes that also kind of have a little bit of just filled decoration as kind of a visual balance thing it seems like so not everything is a stroke so if we look at let's start with this because this is a circle kind of so I'm gonna just going to draw an oval so I can get an idea of how big this is so it looks like it's about an outline mode my other favorite a hum it's about 20 pixels a 20 pixels circle so if we use our key lines here this is just a 24 by 24 shape which is pretty standard for a lot of UI icons I'm gonna to go ahead and draw that 20 by 20 I'll make this thinner so it's easier to see at this size so we know that this is probably what we're gonna use as a base for our circle shapes and we wouldn't even necessarily have to measure the rest because this is like basically all you need is one foundation to start but if we look at maybe some rectangles we can see that's about a twenty by sixteen if we want to see if that's gonna match up with our expectations here and we will do that maybe give it a nice little bit of a rounded corner so we can see that that kind of what we talked about that does kind of match up with the general resizing for visual balance that we looked at with key lines before and we can double check that by maybe doing something like that for verticals looks good and also maybe making a square so can double-check to see if that kind of matches up with our general idea of it mostly does match up and it is balanced in the center it looks like these were drawn a little bit higher just to give it a little bit of visual balance and that's where that extra padding within the component itself really comes in handy so that you can do some of these little visual balance things like these little calendar notches so cool so I think we've got a good what excuse me Jan thank you these key lines are a great base because I kind of gives us all of our foundational pieces and so if I look down here I've already linked these up so that's working out really well so far and also coming up hey Bruno is already on a roll check that out I actually kind of like this hand-drawn look that's pretty cool I'm dig it dig it keep going Bruno that's really cool I love seeing all these key lines around here that's awesome so what I'll start with I actually don't want that up yet I just gave myself plenty of space here so let's think let's start with something simple let's start with let's start with chats so if we've got chats as our first tab bar piece what I might do is maybe even base that off of the UI a little bit because we've got all these bubbles which is a little bit more interesting than just doing you know more of your generic I'll actually going to take a cue from Bruno there and draw a quick sketch in here you know rather than you know doing your board you know kind of like a speech bubble thing rather than doing something more generic like that I might actually take advantage of this uy and tie it into some of these bubbles because that's kind of an interesting shape so what I'm gonna do over here is probably start out with Oh let's start with a rectangle and for some of these solid shapes they'll probably be drawing shapes and then switching them from fills to outlines really quick which is shift X in figma which I love and I learned that because it is the same as illustrator which is what I came from so if I hit shift X I will just outline that shape and then I kind of just my strokes and I have some color styles set up in here too which were from the presentation so I think I'll stir it out with just a nice dark dark stuff keep it simple to start while I'm drawing these and like we've looked at before these were two pixel strokes so I'll do that and then I'll just round it off to start maybe make it a little taller to kind of get that bubble idea and then I think I what I want to do I think I want to make these overlapping since we did see some overlap up here not a lot of these had overlap in the existing set but we know we can see that with with the photos has two photos overlapped and there's like this two pixel line break around them kind of same here with like this external link or this like exit app exit app type icon here where there's a there's a break with overlapping elements so whereas some of these are all unified like the trash is one piece the lock is one piece and what these are have breaks in them so I think we won't might want to take advantage of that kind of reinforce that design language so let's make another one to kind of keep that interactivity showing a little bit maybe bring it down a little bit he's spaced him out even a little bit more taking advantage of kind of that horizontal rectangle look COUNTA keeping it within those bounds more or less and I think we'll probably want to do so we want to get that break one of the things I love about figma as well is that you can use solid objects or filled objects within boolean operations to remove from strokes which I love and it's crazy handy for icon design so I'm gonna do is I'm gonna make another one of these rectangles up top I'm gonna expand it by two this way by two this way I think I'll need to do one more because we've got two pixel strokes and I will make that over the top take that that and I'm going to subtract there we go so that way I can keep kind of a nice little chat bubble thing and just as a quick idea let me turn the key lines on this one off I'm just hiding them since they're an instanced component in there I'm gonna go look over here at my tab bar where I've had it appear I think that might work for chats just as a quick and dirty start since we're following some of the rules already we've got the two pixel strokes we've got the line break it's fitting into the key lines that we set up already I think that's a good foundational start at least so we can get maybe a little more interesting kind of keeping keeping in touch with that UI inspiration I noticed that there's this little bubble on this and this one chat and it kind of feels like a reaction from maybe the other folks in the chat or something that's being put on to this and so if I were working with the folks on this app you know could find out of course exactly what that means but it kind of feels like maybe it's like people are favoriting it so maybe favorites in this app aren't necessarily treated as hearts or stars or five-pointed stars in the traditional sense but they're more of like a sparkle or something maybe that's the kind of brand design language this app is using so we could break out of kind of that star or heart kind of Foundation and maybe try something a little bit more interesting well let's go I'm I can actually take a peek down here real quick before I get into this next one if there's any questions about anything this is really cool he's doing here some extra character on these that's really neat I like that out that chat shape is really cool that's really cool too yeah the three dots it is a good way to indicate that there's a chat happening - that's a nice visual shorthand in a lot of mobile products for getting that point across so it's a good that's a good move - so yeah let's jump into faves so use my key lines here and I'll use another interesting thing that I haven't used a ton until recently which is figmas star tool which is super fun so the nice thing about this is I didn't select it actually that we can actually create a shape from the center point by holding option or option shift if you want to scale it you know straight up so then we can choose exactly what key lines we want to tap into so in this case I'm going to you since I didn't want to make it more of a sparkle more like that emoji really I'm probably going to make a shape to start and then I'll actually you know at least do it again because we are gonna have it - pixel stroke on this thing they want this stroke to match up with the key lines rather than the shape itself so we're gonna make this a four pointed star really easily up here in the inside bar which is it's just too much fun playing with the star tool and I think we'll outline it again like we did maybe you some of that and since we kind of have like I remember that it wasn't super rounded corners and also wasn't sharp corners on most of these they was kind of a rounded exterior and a sharp interior that we're trying to it we're trying to replicate so I think we can get away with that with probably a one since worse have a centered stroke going on if we do like a one pixel yeah there we go it is a little small now though cuz we've rounded everything off so it's a it's really cutting in so we'll probably just want to make this a little bit bigger maybe something like that and then we're matching up with that circular key line but like we mentioned earlier with some of that visual balance stuff there are all of these gaps kind of cut out so it might feel a little bit bit lighter in context like in this case if we kind of look out it doesn't too far off but it does feel a little bit emptier just because we have all of these kind of pieces cut out of it so what I might do is take a leave in a little more q.how this kind of has some extra little bits around it in the emoji and the existing set kind of had some of these smaller darker elements like the lock and settings so maybe we can add a couple little flares or something around here so maybe I'll just use the straight-up oval tool maybe make just a little guy here maybe another one down here maybe a little smaller add some variety and it doesn't even have to you know be exactly centered we can have a little bit of extra but you know just moving in one pixel it can add a little bit of extra flavor to it so maybe something like that you turn the key lines off so you can see how that balances I'm curious if you if you all always use a centered stroke are there reasons to use an inside oriented stroke and what your kind of philosophy on that is yeah for these I'm using Center just because if we wanted to change the stroke later on it might help a little bit stay with the key lines but absolutely I have done icon projects where I've used interior and exterior pitch it was actually in one because when we had the 1.5 pixel stroke versions and the 1 pixel versions 1.5 especially because of that extra half pixel and if you're designing a web product you're not guaranteed that all of your users are going to be using a high-density display so they can look really muddy if they're centered because you're getting kind of blurry on both sides so I might do an interior stroke so that one side of the shape is always going to be sharp no matter what the display is if it snaps to the grid so well typically yeah either I'll typically do interior that's usually easier so I can create my base form and then create the interior stroke from that if it's if we're dealing at half pixels so then regardless of what screen the user has we can at least keep try to get as much of it as sharp and crisp as we possibly can but yeah or sometimes if I'm working on an icon that has to have a lot of connected circular pieces I might kind of do that as well which I don't know if this is an appropriate time to put in a feature request rush but if we could do if it's a I know that figma has so many amazing things coming down the pipe but I mean being able to create a tangent line between two circles or two curves yeah I feel like there's a lot of work that we could do in the world of tangent lines and snapping and just a smart sensing of when things would intersect just coming from the world of Illustrator I know they do a lot of those very well and I think there's a lot of room to grow so any of y'all's feedback would be great just to help us keep building a better tool and better tool for drawing vectors yeah that's awesome cool so let's look over here yeah that's working out I might actually while I'm at it oh I locked this didn't I ha ha ha I might actually just do a quick and dirty active stayed there just change the color easy way to do it so those are actually seeming to mesh with the UI pretty well since we've already got all of these to pixel strokes even on even on the bubbles it looks like so those matched pretty well so far stickers we might be able to get something a little bit interesting so you actually might take a look down here real quick I actually really do dig these hand-drawn it's at the Apple pencil that's a lot of fun well this is cool a few different versions that's actually really cool that's a nice cue from the UI to having kind of that either the reaction or the this speaker bubble kind of being functioning as an overlap as well that's a nice cue I'm always a sucker for those really liquidy smooth buttery ones like the third up on the top yes I always love those I love yeah I love that that's really nice too and I love how the non-destructive aspect of the boolean operations is so nice that is fancy that's really cool that makes me think of stained glass that's a neat way to do that got an artist over here huh nice boolean operation that's really cool so let's see stickers so we've kind of got a circle based one we've kind of got a horizontal based one stickers would probably work out okay as I think it may be a square there's another nice thing to think about with with tab bars especially since they're kind of be always seen together and they're pretty omnipresent is keeping kind of the base shapes distinct from each other that's something we've kind of learned more through trial and error but there has been some research done around this - about keeping your the base foundational shapes as different as you can in in Lissette like a tab bar because there's just a little bit of difference helps again shave off milliseconds of user interaction when somebody's trying to parse through I said if icons like this so knowing that those you know being able to quickly differentiate between more of a circle more of a square it's kind of that same like squint test of just they're kind of at their basic core if they're different enough at that foundational level it helps speed up parsing the difference between them so if we do a more square type thing for stickers I might actually trying some more vector networks for this because maybe we'll try something because we do have some depth in some of these but I don't know if I want to do an overlap like this for a sticker because it's more of a solid you know kind of like the envelope so I might try like a folded corner or something but I think I'll keep it all one solid unit and just see how that goes so start out with start with a square we'll just match it up to our square keyline outline it signs it back in a wee bit so the strokes will match up and I noticed in some of these like they'd seem like the round outside sharp inside was not a hard and fast rule like the phone was kind of suggesting rounder corners it seems like it was things that would in the real world have a right corner like a right angled edge kind of have that treatment like your envelope or the calendar but some things like the top of the trash can which might be rounded or this phone have a little bit more round to them so it's an interesting bending the rule in this existing set so we might capitalize on that by making this have a little bit more roundness to it if it's a sticker you know those if you have like a die-cut sticker or something you usually don't have pretty sharp corners there's always a little bit of rounding to them because of the cutting tools that are used so maybe even a little rounder than that maybe like a three so let's try I might actually jump in here well this is a great thing jumping into the actual vector nodes you can if you have a shape like the selected you can always double click it I actually did it right or you can if it's selected you can just hit return or enter and get into edit mode which is fantastic so it might actually add a couple of points and I think I want to ditch this corner because that's where I want my fold to be like it's being peeled off so if I have that actually I take that back ignore me I'm gonna keep that I think I'm actually going to move it so that it goes keep these though so that we can have a corner maybe move it up to there so we've already got a nice like implication that this is happening and we can keep these all the same stroke I think I think that'll work so we just need kind of that suggestion of the back edge of its being peeled up so what I might do for that is maybe make another vector object here I'll just do a line to a line maybe add something here add a couple more points I think and that way that'll let me play around with these a little bit just to figure out how much of a corner I want this thing to have it would be important though to make it the same stroke width is the rest of it I do something like that maybe movies in a little bit this is more like playing by playing by ear playing by eye I guess just try out some different rounding on this and see if I can more than that I think if I want to try to make it look like it's meshed in here a little bit maybe something like that kind of give that implication that it's being peeled off and I could also make this all part of the same vector network too if I wanted to so I could even copy that jump in whoops I don't know what that is don't know where that came from I probably selected too many things for an interest of time we'll keep it separate turn those key lines off and see how that works and I think that might work out and it's kind of more of the square base but it has a little bit of flavor in it so that kind of plays out since we don't really have a sticker that's in the UI to base that off of we can just kind of guess for now I think that workout activity activity so we've got some rectangles going maybe we'll do another rectangle let's do a vertical rectangle maybe something a little more straightforward than just as a sticker so we could do an activity we don't really know what that section looks like so maybe we'll just go with something like a bell since there isn't anything like that in the existing set so let's start out with you could stop me if we were running at any time issues your question issues Roger you feel free I've got ya now I'm digging the rambling and I'm digging all the little insights that we're getting I think we're at about about five minutes over okay we do have a few questions let's hit some questions real quick since you have enzyme icon water and then no but we can go over just a little bit if we want to try to make one more icon all right so first of all Kaitlyn Sowers has asked for the key lines template be available after this presentation so I think maybe we can make that available or she can just do negate the current file right yeah absolutely great they'll all be in here if you want to take that as a starting point for yourself yeah absolutely awesome as editors kind of pour out of that file you'll be able to jump back in and edit mode and then you can just duplicate that file for yourself all right so we got that for for Kaitlyn uh the last one's a little bit more of a large question from Fabian okay what's the best way to show icon work on a portfolio hmm I would say it's probably best to show it in a couple of ways or even more than that it also depends a little bit on how the portfolios target audiences being kind of set up if you're more if your portfolio is targeted more at designers you can probably get away with showing more of the the craft and the artistry of the icons in isolation but if you're doing something that's more of like thick a client focused case study or something you would definitely want to show them in context especially with the UI cons as opposed to you know fine art or like even product illustration if you think about like spot illustration in a digital product icons are there to do like a very specific functional job in a UI so exhibiting that they're doing that job in the context of the app is super important and you can even highlight that in the portfolio too talking about like if you're allowed to you know doing even some before and after like this is what the app had before or the placeholders or as we were developing it this is what was there and this is why it didn't work like it wasn't tapping into this particular aspect of the products brand or these metaphors were too confusing and esoteric or or something like that and then being able to show them doing their job in the context is always valuable so I'd say probably it's probably always better to err on the side of making sure that they're shown doing their job yeah I was also gonna add to that like so within the context of the app and I think context is king showing them in context to the app how they're working how they're functioning if they animate showcase that work if there's active states showcase those and I think really the point of this this lesson here this workshop is really showing how they all work together so make sure they're never in isolation and you're showing how the entire set actually like works together but also how they feel like a family how they don't feel for one doesn't feel foreign from each other so I think it's important to show like a lot of those different states so that people can see that hey you're good at what you do you thought about these things yep absolutely all right so I do think we're I do think we're getting to the end and I do think that we're getting more questions now so let's go ahead and just answer those yeah let's go ahead your be asks how do you manage different sized icons and their stroke do you define a stroke for a 40 by 40 icon for example or do you just scale them thanks this has been so good to watch well thanks Ben I typically define 1 stroke width for the entire set if they are going to be stroked and that stroke that decision of that stroke is often influenced by you know how the UI is treated and how the typography is treated like it type weights and like the strokes on say type fields or info cards or different things in the UI and I'll want to reflect that typically throughout the entire set so I won't scale I will redraw at every single size like for example if I were to make a new a new envelope that needed to be you know 16 pixels if this icon needed to exist in one place at 16 pixels in another place of 24 I would redraw it at the 16 size to keep that stroke with consistent and also because sizing down means that you also need to eliminate detail which is something I talked about back in the in the presentation that kind of knowing that the smaller it is the less detail you can have and keep it legible and the converse is true so if you have like an icon that you're scaling up and you're making a 32 or a city or a 40 or something you can keep the stroke width the same so that all of these things look like the same family but you can add detail so say you had you know a pencil and you were making a larger version of it you could you could add extra details like you could add you know like there's writing on the side you could add the nib you could add in actually writing on to a document and so that's kind of and I think Justin Mizell has some wonderful articles about this kind of philosophy and illustration too of when you are abstracting something visually like for the case of a nikon determining what its smallest usage needs to be and whatever the most detailed element of that thing at that size is and starting there because you can always scale up you can always add more to it but you can't like not everything can be taken away as us-- careful down so that's that's usually that's my approach and i philosophy to different sizes awesome well thanks so much for coming obviously there was some more stuff that we could have gotten into but noah thank you for like showcasing all of this great knowledge as well as being our own personal icon somali a which we very into that term for you i love it yes i did have like one question like and you're gonna be put on the spot but if you could name your fate like your icon designer that you look up to the most of the design with its icon work that you look up to the most who would that be probably Louie mangia and I've come butchering his name I'm so sorry but he runs a little icon shop called parakeet he also working used to work at Apple back in the day but he's been a touchstone for me with iconography he's also very opinionated about it which I like Louie's great and he's he's been great for years even when he was like yes 16 year old designer so I think that's a person to look at his like I'm working parakeets icon work as well so cool so cool a close second would be Meg because she's so talented and also her extensive writing on the subject has been invaluable to me too so awesome well I'll drop a link for Meg as well just so people can you know look and be inspired awesome well in closing is there any last stuff you got to say man yeah just don't don't be afraid of the of the tiny icon space and the limitations that can really help save your bacon later on if you know what you're working with and where and where these things need to be used it's a ton of fun so feel free to finish these up if you want to keep keep drawing or try something completely different this is all still open so feel free to take all of this and do what you want with it so very cool thanks everyone for showing up today for build it in figma Noah thanks for taking the time to set up everything and the really thoughtful presentation at the beginning really appreciate that dude you're the best thanks so much so thank you thanks everybody bye

Channel: Figma

Views: 36,920

Rating: 4.9597316 out of 5

Keywords: icon design, icons, design, product design, mobile design, figma, noah jacobus, metalab, cohesive, ux, ui, ux design, ui design, build it in figma, rogie, rogie king, app design

Id: S9P7ob7Nx5I

Length: 77min 17sec (4637 seconds)

Published: Fri Jul 03 2020