Build it in Figma: Design a cohesive icon set
ฝัง
- เผยแพร่เมื่อ 2 ก.ค. 2020
- Jump in and create a cohesive icon set for a mobile app alongside Noah Jacobus from Metalab ( / jabronus ) and Designer Advocate Rogie King .
Figma file: www.figma.com/community/file/...
#Figma #BuildItInFigma #FigmaDesign #IconDesign #Icon - วิทยาศาสตร์และเทคโนโลยี
What a luxury you have to be able to design the same icons at different sizes; you must have a huge team! I thought I was going crazy wondering why some icons felt too large/small next to each other while trying to force them to be all the same size. SOOO many golden nuggets in this video, thank you so much Noah (and Figma for hosting)!
23:15 - Visual Balance between Circle and a Square icon
• Make it blurred and squint at it to get an idea
24:55 - Examples of what shapes can translate to
• A rectangle doesn't necessarily mean that it will be Rectangle only. It can be mostly rectangular.
26:04 - Scale. Add as many details as you can and then size them down and see what needs to go.
• Muddy icons - icons that are not legible
27:40 - Element size: Can be helpful to start in starting with the smallest element of an icon and then building onto it.
💭 *thought process:* Goal of the icon - What it is for, concept, what would be the most detailed piece, where you want the end points to end on the grid, figuring out the spacing, how the forms would interact with each other. - Notice the inner corner, outer corner (rounded, sharp, etc.)
29:13 - Dimension and perspective: Entire set should have similar icons, if some icons are jazzy some other sets need to be jazzy as well to be consistent.
30:19 - Overlapping objects - Colour fill, line break, gradient when objects are in the background and the foreground?
30:57 - Stroke weight needs to be consistent so that images look like they belong together (example image attached)
33:28 - Pairing icons with the type used
34:15 - Accessibility stand point, active state and in active state - using colours to make things stand out, light mode vs dark mode, outlined icons take longer to read in dark mode
👀 Apple's Human Interface Guidelines - can be an interesting read 📚
47:40 - Making Icons - Inspo, basing it off of the UI - instead of just doing it
• Shift X - to look at the strokes (designing in stroke ver instead of a filled ver from the start)
• Boolean operation easy in figma
1:14:43 - Scaling advice
Thank you!
Thank you for sharing this. I struggled with keeping my icon designs consistent and now I know why. Cheers!
Very good (fun) conversation and material. Very useful. I am a huge fan of Metalab work. The team there is a monster when dealing with product design! It was my first time watching Figma cast. I will be watching the next ones too. Congratulations!
Really nice work, one of the best videos I have seen on the subject. Thanks!
Noah created some really nice icons in the session, got plenty of tips from this thankyou!
This was very insightful. We need more of these 😅
Very helpful! Thanks for sharing ⭐
So useful, thanks Noah
Just love all your videos Rogie :)
I've never used Figma, but this was a really great run-through of how to build an icon system. Very useful info, thanks for posting.
Thanks so much, I learned some great new tips. This was awesome!
Thanksssss!!! great video I learned a lot from it and I was taking notes the whole time.
Greaaat video. Worth the watch for sure! Helped me get started with some icon design ;-)
Having a time limit when you have someone as knowledgeable and experienced is crazy
Nice, very useful, thanks
it will be great if Figma Separate this is session according to topics and put minute comment in Description area.
------------------------------------------
12:00 - Jump into
20:00 Material Design icon
32:00 icon Strok
42:00 icon Design In figma
Thanks a lot for taking your time to pass all these to us. God bless.
Thank you so much! Learned a lot from your wonderful video :)😁
very helpful! thank you very much!
Nice video. Great tool for developers like me who want low learning curve design tool. I was able to design my own icons, logo, mobile and web application with no design training.
Really nice push lately with these live sessions 😍
OMG, the work showed here is so awesome!! Any chance to have the link to the file?
@@remusb It's available on the Community! www.figma.com/community/file/868494350497530898/Icons-%26-You-%E2%80%93-Fundamentals-Worksheet
I’m not one too comment, but I was quite scared when I saw it would last an hour. Super happy I took the time, my icon design game is about to take a new level
Glad to hear it, John! Thanks for sticking around 🤗
thank you
Muchas gracias!!!!
Hell yeah
Great work here! Love metalab... I'm really curious as to how they designed the icon they're talking about at 1:01:08. Tried using booleans but didn't quite make it.
Looks like a Union boolean with some rounding applied
Question - at approximately 50:40 you push the edge of the "chat bubbles' one pixel outside of the horizontal rectangle keyline, and say you are more-or-less using those bounds - Just wondering, since I've never used keylines before, how strict / loose can you be with those keyline guides? Is there a general rule on that? Thanks so much for this great video!
Keylines are really just a starting point-you'll need to rely on your eye, intuition, and context with other icons to make sure they're visually balanced :) To do that, you might have to bend the. rules a little here and there
Can you please suggest the stream regarding learning spot illustration?
Key lines :D
Hi, very nice video!
I'd talk to your developer to determine the best way for your particular constraints, but SVG is probably a safe bet. The padding area around the keylines is part of the export, so that you get a consistent bounding box. Makes it easier to implement, design around, and swap if need be!
fucking crazy i love figma
Where do these live video discussions take from?
You should've let him at least finish this icon set we don't care about the video's lenght or it should've been a multi-videos "Build it in Figma", it takes 10 minutes only to really start the video. But great content as always Figma and especially Rogie.
Hey! Which typeface is used for the cover of the video?
do you usually design icons in a 24px container or a 16px container?
Isn't it best to scale down-> up?
It depends on what the project needs. A lot of times I version multiple versions of the same icon at different sizes, so they look good together in context.
I've had problems exporting icons from Figma so the vector width scales properly when the image is resized. Any ideas how to fix this?
Hi George! If you’re wanting the stroke width to scale along with the icon, I would outline the shapes in Figma before exporting.
Can we have a weblink for the second icon designer Noah mentioned? 'Meg', i guess. Are we talking about Meg Robichaud or someone else?
Yep, Meg Robichaud.
Is "icons and you" trademarked or can I use it?😅
Keep all the strokes setting to "center" and don´t use masks or boolean. Just edit the vector network. Otherwise you can have problems when exporting to SVG. Looks nice on Figma, but will have bugs on SVG.
I flatten and expand everything before I export, so everything works in SVG :)
@figma Would it be possible to get access to the worksheet?
It's available on the Community! www.figma.com/community/file/868494350497530898/Icons-%26-You-%E2%80%93-Fundamentals-Worksheet
What's the name of the second Icon designer? Megg or what..? Thanks in advance
Figma my imagination
Is 1.5px a valid size? There is no half Pixel i thought :-)
On high-density displays, you can't see the half pixels.
@@NoahJacobus this was not my question.
Did anyone catch the name of the icon creator @1:15:20 ? thx
Louie Mantia
@@NoahJacobus cool thx!
Actual icon related content start around 12:16 ;)
12:15 is where you can start listening to actual conversation about icons
Real Meat 16:35
the realest
These videos are WAY too long.
We're listening and thanks for sharing. Stay posted for shorter form content, my friend!
@@rogieking8773 It was perfect for me! So informative, loved it! Thank you!
The ums and ahs are annoying had to turn it off.
You're good, but you reaaaaally should work on eliminating 90% of your "umm", it gets very distracting. Also, you need to finish your sentences more often.
Please if you have a whatsapp group where people can ask questions and get answers... Please add me up.