How to Create an App Icon in Figma - Tutorial

In this tutorial, I am going to show you how you can create an app icon in Figma. Figma is a UI Design that is used to design the user interface (UI) of websites and apps. I will use simple effects like Inner Shadow, Drop Shadow and Blur. I am going to apply all these effects to the Figma logo itself.
Checkout my Design Course on Udemy:
www.udemy.com/design-animate-...
Get exclusive perks and benefits by becoming an Official Patron:
/ chethankvs
Join my Design Community on Discord:
/ discord
Download project file:
gum.co/uCddSX
--------------------------------------­---
Photoshop Tutorials:
• Photoshop CC Tutorials
Illustrator Tutorials:
• Illustrator CC Tutorials
After Effects Tutorials:
• After Effects CC Tutor...
UI Design Tutorials:
• UI Animation/Interacti...
Design Resources, Tools and Softwares:
• Design Resources, Tool...
Adobe XD CC Tutorials:
• Adobe XD CC Tutorials
eSports Design Tutorials:
• eSports Design Tutorials
--------------------------------------------------------------------------------------------
Contact me :
Twitter : / kvschethan
Facebook : / designpilot
Mail : [e-mail]
Portfolio : behance.net/chethankvs
Instagram : / design_pilot
Discord: / discord
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#figma #appicon #figmatutorial

[@faizalmazlan]

Exactly what I needed. Love your no-frills approach. Sharp and focused on the task at hand. Thank you so much!

[@stealth_chain]

For practical purposes, if you were to export this for an actual project, you probably wouldn't want to round the corners as apple and google systems do this automatically when your app gets published. best to leave it as square corners.

[@DesignPilot]

Yes! That is true

[@wisemiro7613]

thanks

[@sauravsharma2617]

this is probably the most energetic design channel in india and amazing to with so many tutorials
thanks chetan

[@chumbazzo]

Great tutorial! Learn a lot, thank you so much Chethan!

[@DesignPilot]

Happy to hear that Sergio. No worries

[@Marz259]

So great, thanks! Q: when exporting as icns file, how come when applied to an app, the icon is larger compared to the other native app icon sizes?

[@user-tb1hk8oi8w]

Hello.
Could i ask you one?
When i add radius to a small rectangle or a small triangle, the radius looks good but once i resize it much bigger, i can barely see radius. This is the other way around, if i add radius when the rectangle is big and i resize it much smaller. I see very big radius. Is there any way to keep it even when the size of the rectangle changes?
Thank you!

[@programmingwithjamshedqureshi]

Great videos as always. Waiting for your Figma tutorial playlist to add in my list.

[@DesignPilot]

👍

[@MultiFacebookers]

This video is just what I was looking for , needed to make a logo for an app and needed a quick idea of how to get started about it.

[@DesignPilot]

Yay!!!

[@MultiFacebookers]

@@DesignPilot A suggestion - Would be great if you could do a tutorial/video about building design systems too .

[@jessinvests]

TYSM!!

[@shashwataditya6685]

Loved it!

[@DesignPilot]

💥💥💥

[@shashwataditya6685]

@@DesignPilot Would be great, if you can review my app icon design: i.imgur.com/agswyM4.png based on this tutorial

[@DesignPilot]

Message me on IG

[@shashwataditya6685]

@@DesignPilot Sure!

[@shashwataditya6685]

@@DesignPilot Dropped a text from my handle @shashwataditya

[@warren1527]

this tutorial would have been useful if you showed us how to import the .svg files

[@DesignPilot]

All you have to do is drag and drop

[@timothyduke100]

should have included all steps

[@AntonioArnoldoLimadaSilva]

Send more ! 😈

[@marinamaievska5554]

thanks

[@DesignPilot]

No problem Marina

[@jai7787]

centre allignment button is not working in my figma, can anyone tell why?

[@woman1421]

i have made the figma icon but i was trying to make it for the app store but it didnt look very good can you make a tutorial on how to make the vector based thing like the figma icon?

[@DesignPilot]

Not sure what you mean.b

[@woman1421]

@@DesignPilot i mean how do you make an svg for any icon? lets say snap chat, how do you get the ghost made into a vector

[@DesignPilot]

Use illustrator.

[@woman1421]

@@DesignPilot kk

[@woman1421]

@@DesignPilot but it costs money that i dont have

[@jacobcyril9648]

Where did you learn to design this good,I too wanna get good at designing

[@DesignPilot]

Haha. Keep designing, getting feedback and reaching out to people who you want o learn from. It's hard work, but worth it 😁

[@jacobcyril9648]

@@DesignPilot can I dm u?

[@jacobcyril9648]

@@DesignPilot on IG?

[@DesignPilot]

Sure man. Join my Discord Server.

[@DesignPilot]

Ok

[@konnorbeaman9916]

How do you get the svg image?

[@DesignPilot]

Google

[@tomekmar7517]

Great, but it looks like your tutorial is for advanced users. I am totally lost. Especially when playing with shadows. Sometimes I barely can see an effect while you talk very fast and jump into the next part of the icon stating something like: now make x 5 y -30, blur 20 and in this one x 10 y 60 blur 15 and lets see that glossy effect. I 'm lost. Is there like a principle behind those values or shell I just memorize them? Why those values? You just stating those with no explanation. Also....you speak normally for a minute and then you speed up immensely as if you were rushing somewhere...and then again same cycle.

[@DesignPilot]

Those values are based on trial and error and my personal preference

[@DesignPilot]

Feel free to add your own values

[@cherry-lp8yq]

and the name of the app shouldn i add it to the icon

[@DesignPilot]

No

[@dominikd9834]

Video Copilot

[@ertugrulharman]

Free accounts are limited with 3 projects as of the date of this comment.

[@DesignPilot]

Nope. It's unlimited projects.

[@timothyduke100]

this is not a good video to follow, you need to test drive these with someone , you skipped through so many steps I might as well just randomly learn on my own