ฝัง
- เผยแพร่เมื่อ 2 มิ.ย. 2024
- Learn how to start designing pixel perfect icons using a grid system, basic shapes, and the pen tool!
Here's my official Figma paid course which you can check out on:
www.asaadmahmood.com/courses/...
Use AMSUBSCRIBER voucher to get a 50% off. I can’t wait to see you all inside.
Be sure to subscribe and hit the notification icon! It really helps me help you and others like you be better designers, freelancers, entrepreneurs, and people in general!
/ @amdesignanddev
.
Subscribe to my newsletter to keep up to date on latest design/tech trends, update, tools and information! 🔥
the-optimal-designer.beehiiv....
.
Have a project? Send me a message on sales@thesmallsquare.com or contact me on LinkedIn.
.
👉 Follow me on LinkedIn and Twitter for more content.
/ asaadmahmood
/ asaadmahmood5
Here's my official Figma paid course which you can check out on:
www.asaadmahmood.com/courses/figma-noob-to-pro
Use AMSUBSCRIBER voucher to get a 50% off. I can’t wait to see you all inside.
"without further to do" made my day :D
Amazing tutorial. Learned so much in such a short one. Thanks!
Thank you so much! You just gave me what I have been looking for!
Amazing vedio...👍👍👍
in case you're not great with combining like me-
1. combine shapes with "union selection"
2. remove stroke from the shapes IN the union (not the union itself)
3. change union stroke to 1.5
4. remove union fill
Thanks a ton. I was struggling with this part. I spent 30 mins understanding why my combination failed. @AMDesignAndDev - Great stuff. Please slow down on such areas.
Thank you. This was very helpful
Thank you so much, it helped me a lot.
amazing tutorial
Perfect perfect 💯💯💯💯💯💯
Amazing! Totally love your videos. So insightful and way better than other videos. Learning a lot from here! 💯 Thank you so much for these.
Thank you Navya!
Amazing!
awesome video thx
Thank you for the informative video! I do have a question; when I make the check mark and try to round the edges, it doesn't round the ends of the checkmarks, only the center where the two lines converge. Is there a way I can troubleshoot this?
thanks brother
Man I learned so much out of your Figma videos, thank you so much!
I’m glad! Do you subscribe and share it with your friends!
And if you’d like to see specific videos please let me know.
Awesome video, thanks for the great content!
Thanks a lot Gavin :)
well you can't always be pixel-perfect because the round circle is visually smaller than square so you need to do a bit of oversize to make them visually equal size
Very helpful Indeed. Keep up the good work.
Okay sir :)
Nice guidelines and content mate. Well done
Thanks man!
hi thanks for tuts, Can i have your icon pack?
Wonderful, thank you! It would be great if you'll make a pen tool video for vector beginners : )
Sounds cool, will consider that :)
Question: What do you do after you've create them? You make a frame around them? Or straight up make them into a component? Do you use the "Flatten Selection" option?
You can create your own icon library with this.
And yes, you can use flatten selection, otherwise just combining the shapes is fine too.
Hey I wonder how I can do one Icon that has an open path, that way the INSIDE Stroke is not working. Any Clue, please?
Can u pls name the plugin where we can download all the icons ??
great tutorial. Does the grid that was created for 24px work for larger icon sizes? or do larger sizes require more margin?
You can just normally resize these icons to 2x, 3x, 4x, 5x, and all would be okay.
Can the size of icons be changed after exporting into SVG? Thanks for the video.
Yes, svg is scalable. So they can be changed to anything.
I'm missing something around 9:22. You remove the fill from the union. You call it combine, but I'm assuming you are doing Union Selection from the top? We can't really see that on screen.
You remove the fill from the union
then add a stroke
And now you just have the cog outline which is what I want,
However, I don't get that. I still have all the lines. I know how to do this in Illustrator, but trying to learn figma. Any pointers what I'm missing?
+1 Same issue here.
I found out how to do it because I was having the same issue. Before you combine them using the Union button from the top, remove the stroke on the rectangles/circle and just fill them in with a color. Then hit the union button, and it should give you the desired shape. After that you can remove the fill and do the stroke steps like in the video. Hope that helps!
@@ashgottacatchem thanks a bunch was having the same issue
@@ashgottacatchem Wow! You are amazing Ash!! Thank you so much 🙏
@@ashgottacatchem nice thx
Idk but 1.5px outline is not pixel perfect in my browser.
One important thing I'd like to add is, once you're done with the final icon, make sure its combined into a single shape/single stroke.
Be sure to subscribe and hit the notification icon! It really helps the channel grow and motivates me to keep on investing on the channel.
th-cam.com/channels/DDbr6k_AbXfGVMIjJLCZ1g.html
What did he do at 12:12 to add a new point to the shape? When I do that it just draws a new line...
He pressed enter while selecting the shape to go into edit mode
cool but how can i use it on css/html?
You can just export them as an svg, and import them as an image.
Son unos GIRLS18.Uno de los mejoresc conciertos Mañas no 3 se l 💯💞😍