Master Figma UI Design in 15 Minutes | This Tutorial Is For You!

🏆 #1 Content Generator for Apps & Websites ➜ gravitywrite.com/
🌐 The Best Place to Host your Website ➜ webspacekit.com/
❤️ Start Here ➜ wl.tools/Figma
Watch this video to gain the skills to build user-friendly interfaces with Figma.
👉 Undraw ➜ undraw.co/illustrations
🎬𝗧𝗮𝗯𝗹𝗲 𝗼𝗳 𝗰𝗼𝗻𝘁𝗲𝗻𝘁𝘀
00:00 Intro
00:50 Create an account on Figma
01:40 Create a UI design for a website
03:30 Create a UI design For an app
03:52 Choose a template for your UI design
04:40 Edit this UI design.
06:16 Add a brand logo to your design
06:40 Create another frame from scratch
08:57 Add navigation icon to the design
11:04 Create an interactive prototype of our app.
13:16 Share the design with anyone we want.
14:17 Download the design to your computer.
14:50 Share the design on your phone
📌 𝗙𝗼𝗹𝗹𝗼𝘄 𝘁𝗵𝗲𝘀𝗲 𝘀𝗶𝗺𝗽𝗹𝗲 𝘀𝘁𝗲𝗽𝘀
First, Click here ➜ www.figma.com and create your account on Figma.
Then explore Figma and its tools, start your design journey from scratch.
You can create UI design for your website and even for an App.
Next, let’s use templates to create our design.
Step 1: Choose a template for UI design
Go to files, click ‘Explore Community’,
Choose a template,
Click on ‘get a copy’
As you can see, we have got the UI design.
Once you have chosen a UI design template,
Step 2: Edit the UI design:
Just double click on the element, And edit it.
To change the background image,
Just double click on it,
On the right side, you will get options to change your image .
To add a brand logo to your design.
Just drag and drop the logo from your computer.
how to create a UI design from scratch.
So we will create another frame called tour details
To create a frame, just click on “frame’.
Select iPhone 13 mini.
Then add an image , content for the package, and a button.
To add a navigation icon to your design.
To do that, install an icon plugin in Figma.
So choose Iconscout,
Select the icon you want, And click insert.
And the icon will be added to your design.
When you're designing in Figma, you may need some illustrations for your design, so there's a website called Undraw (click here➜undraw.co/illustrations ) where you can download and use illustrations for free.
Step 3: Create an interactive prototype of our app.
Select the element that you want visitors to click on to get the next frame.
and click ‘prototype’.
click on this circle, drag and connect it to the next frame.
Share the design with anyone you want.
Also, you can get comments, which you can easily view and reply.
To download this design to your computer.
Just select the design, and click export.
Then again click export.
And the design will be downloaded
You can also share the design to your phone,
And see how it looks on it.
This is how you can create a UI design in Figma.
#FigmaTutorials #UIDesign #FigmaTips #DesignersOfInstagram #FigmaDesign #WebDesigning #AppDesigning #CreativeMinds #DesigningFromScratch #DesignTutorial #UIUXDesign
🎁 𝗖𝗼𝘂𝗽𝗼𝗻𝘀
🟡 🔍 Grammarly｜20% off｜wl.coupons/Grammarly
🟡 📲 Publer｜10% off｜wl.coupons/publer
🟡 📈 Mangools ｜10% off｜wl.coupons/mangools
🟡 💼 Fiverr｜10% off Coupon WEBSITELEARNERS10｜wl.tools/fiverr
🟡 🖼️ Astra｜10% off Coupon WLDiscount｜wl.coupons/Astra
🟡 📊 SEMScoop｜20% off Coupon SAVE20LT｜wl.coupons/SEMScoop
🟡 📝Anyword｜20 % off Coupon Anyword20｜wl.tools/Anyword
🙌 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹𝗹𝘆:
𝗪𝗲❜𝗿𝗲 𝗛𝗶𝗿𝗶𝗻𝗴: websitelearners.com/careers/
Want your website developed by us? Email us your requirements to [e-mail]
💬 𝗙𝗼𝗹𝗹𝗼𝘄 & 𝗖𝗵𝗮𝘁 𝘄𝗶𝘁𝗵 𝘂𝘀:
Instagram ➜ / websitelearners
Facebook ➜ / websitelearners
LinkedIn ➜ / website-learners
Tags
FigmaDesign , UIDesign , UXDesign , FigmaTutorial , UIUXDesign ,DesignTutorial ,BeginnersGuide ,CollaborativeDesign ,Prototyping ,DesignWorkflow
SEO-optimized Hashtags:
#FigmaTutorial #UIUXDesign #FigmaTips #FigmaTricks # UIUXDesign #UIDesign #UXDesign
#WebDesign #AppDesign #GraphicDesign #PrototypingTool #CreativeDesign #DigitalDesign #Figma2023 #DesignInspiration
#DesignSkills

[@PaschalAOgba]

The best 15 minutes of my time well spent. Short Figma tutorial but has very rich lessons. Well done.

[@yarcofreelance]

hey can you tell me what is meant by FIGMA

[@uniquega2445]

How to covert in to code

[@Mu-bz7jd]

Exactly bro i also believe that

[@Anzy_Zaya]

This is the most invaluable tutorial video I've ever watched, and it's only 15 minutes long. Thank you, sir!

[@mamgbigeofrey]

One of the shortest but very detailed videos i have ever watched, in under 15 mins, you have made me become a pro in figma. video well compiled and content is worthy. Thanks a lot sir

[@rahulnaik632]

Thank you for this tutorial! This is the best - most concise intro to FIGMA I have seen! Well done bro!

[@ektaarora9812]

The shortest most helpful lesson I have ever watched. This gave me so much confidence. Thanks for this.

[@Irfan-kakar]

Feel proud to watch your content ❤

[@user-dd1rf2eu5y]

Thank you for your amazing content. Love watching your videos. Thank you so much. Keep posting great content like this.

[@seshubabusc]

Thanks a lot Bro, this is the best video I have seen on Figma, rather than exploring all the menu items it's simple straightforward and to the point. Subscribed to your channel.

[@harshaldave9775]

Website Learners solved my problems since 2 years for WordPress and now solving it for Figma. Worth it. Please make a quick 2-3 hrs tutorial on HTML,CSS, JS Fundamentals too.

[@arjunkrishnakj507]

This 15mins is insane. Quality is top notch. Requesting more videos on UI UX design 🤗😍

[@jabirts6023]

Very helpful for me as I am just started to learn Figma. Thank you so much for this short time video with big lessons

[@Dprinceuknow]

This is amazing short but very impactful… pls can you make a more detailed video of what the different icon does and how to best use them

[@jsross3353]

Superb tutorial video! You’ve made this Figma lesson sooo easy to follow! Thank you so much 😊

[@pinakidash100]

no extra talks, on point tutorial. perfect 👍

[@lawrencepaul6780]

Excellent intro in short and precise presentation. Great work.

[@mamolugaundaduYt]

15 minutes fluent workshop really save my time Tq

[@dilakshankamalathasan6070]

Everything in 15 minutes. Thank man

[@mr_shan_nu4045]

This is best.... I open video with zero expectations

[@arundevarajan2682]

Love it - thanks for the explanation!

[@paulineds2015]

I'm a newbie and this video really helps me a lot! Thank you so much

[@AviBuxton]

I just so much value from this video, man. Thanks alot

[@KhauheloMosehle]

My first time using Figma but after watching this video I can do anything I want thanks for your good work

[@arinsworld23]

Best Figma Tutorial so far❤

[@holamoz]

thanks for this video make me more interested to learn figma or ux/ui design

[@amoghdeshmukh8559]

Goddamnn this guy makes the best "how to" videos!!! Thankyou so much dude ❤️

[@bhargaviayitha8494]

Thanks for sharing amazing content

[@dev2174]

You're Superb Brother!

[@shashiniprawardhitha8188]

Thank you very much.. Excellent video. I can clearly understand very well . Now i can create a UI design through this valuable video . ❤❤

[@tauhidalam1284]

That's awesome ❤❤❤

[@prakashgck]

Great tutorial, thanks a lot. Umm.. I request to create a tutorial about Family Tree(ancestor type)

[@sheela1445]

May Allah bless you right path of life. Brilliant & amazing brains 🧠 you have.i wish and pray for the same to eran huge knowledge as you and your team have.

[@BahirCodeTips]

wow only 15 minute completely done. thank you

[@MIbrahimA920]

Nice video thanks for your knowledge

[@user-iv1zf7ut5g]

Excellent quick tutorial, very well presented!

[@RealMeC20-vv3sz]

Bro,I'm First time watching you're channel.. i really like You're presentation ❤..

[@allinonevav3885]

Really super sir ur easy way of telling can reach to anybody 😊

[@bhardwaj6946]

Please make full figma course for ui ux design

[@syedatabassumunissa8623]

If you say 15mints then you really mean it… love watching your videos it was sooo easy explanation of each nd everything thanks a lot ☺️

[@deepaligeet8953]

Very helpful video 🤩🤩
Thank you

[@kavuthamyvisuvanathan5906]

thank you brother for the clear and amazing explanation. could you plz give us more in figma

[@VenkatachalamRavindran]

Excellent video.

[@HMmlbb]

nice, clear and easy explanation. thank you Boss

[@hemanthrd]

Nice intro, clean and neat explanation and example.

[@mdselimahmed2120]

We want Webflow tutorial please....❤

[@perfectopadilla2564]

WOW! Ai now are very interesting! Sir your always very compac in your Work. Always so easy to understand! Love from philippines ❤

[@mahimasharon369]

Thanks for making a eye open video....🔥

[@dr11_99]

Thanks man nice video and good editing too

[@biswassingh6511]

15 minutes was worth the watch

[@muhammedzubair3120]

Yow, you are great, thanks for this tutorial🤩

[@Bs-hj8jd]

This video is very helpful. Thank You so much 😄

[@Emitheospeaks]

The best 15 minutes of my life

[@iwandev7798]

Wow..excellent tutorial.. Thank you for sharing

[@kartik7775]

Thank you!

[@uifry]

Great Content!!!

[@vypindelhi9458]

Can we do webstories on the news website by using figma?

[@krishanubasu3633]

Fantastic Demonstration! very help full.

[@Shanifshanpk]

Can we able to use it in elementor. If yes shall we know how ?

[@Xubair_ubi]

One of the best youtube channels i have ever seen ❤️

[@thecreator5020]

This video is really so easy to learn and helpful too...

[@SL_Edits143]

Very clean explanation ,thank you

[@manojparuchuri5181]

Bro where do you get such background images from

[@shreyasen4018]

You are the best teacher!

[@gebreajax3227]

Thank you Very much, this is what I need.

[@Classwork420]

please vai, make one for Dora as well. your explaination stays in mind without taking any notes. have a nice day

[@HungryBOY1998]

Tqsm very helpful for beginners

[@Last_Hope_FreeFire_Edits21]

Thanks You So much sir Clear explanation🎉😇

[@enishad]

This is what i was looking for to know more about Figma. Thank you

[@ShedratulIslam-ys4kn]

Thank you so much , This video Was very helpful to me

[@deldridg]

Great intro by Bryan and thanks from Sydney! BTW - having done much trekking in the Himalayas, including near Everest Base Camp, I think your pricing is a touch low... Cheers, Dave 😉😋

[@user-dc1fk8qb8f]

very well explained in a short lesson.

[@dkstyle9800]

Thanks sir great 👍

[@iahmedsh_]

Thank you so much sir this is really helpful

[@IrfansCode]

This video make me learn a lots of things ~ great ❤

[@yourvideos2994]

It is enough bro to roar as lion. Thank you bro. its very helpfull.

[@wyneei2301]

Super explanation ❤

[@AmrMekkawy]

Great work. This is the best tutorial video that beginners can start with to learn how to use Figma.

[@labitnelsonlangan4478]

You are just the best thank you Soo much🎉

[@abdulrehmankhan4521]

Thanks man

[@cosmolustosa972]

Brazilian greetings. I discovered your channel yesterday and I've already learned a lot. Thank you very much.

[@metxayd]

perfect explanation!

[@perfectopadilla2564]

#Amazing search, Amazing proctor, amazing course. Hiyaa! Long live Sir!

[@balqeezsulyman3806]

You are the best 👍 wonderful presentation. Please can you show us how to design a pattern library ?

[@stanleymaina8480]

the best youtube teacher

[@firozkamarudin]

smart presentation -keep it up

[@user-bt7nm8yx7h]

it's really a great explanation

[@leoworld6391]

Thank you sir🥺❤️

[@rafeeqtalr8309]

Thank you so much for the video

[@Abhishek.suruse_]

Thank you so much sir😊. I found it best teacher in TH-cam. Teaching technique was next level.

[@madeintwin3824]

Please upload best social sharing platforms for blogger and youtuber bro😊

[@ak2005]

Thanks 😊

[@vighneshsm7941]

bro you are great

[@bhumi4159]

THANK YOU SO MUCH!!!!

[@DaretoSituations]

Ohh my God, the most confusing thing was me to understand PROTOTYPE and your this Video has make it clear in a very simplest way.... about what is the PROTOTYPE!!!
#Love

[@arabicvoice1]

Need more figma or ux/ ui design detailed videos

[@WebsiteLearners]

😥 *Save Time Let AI Write Content For Your Designs* ➜ Visit GravityWrite.com
⚡ *Get Lightning Fast Website at WebSpaceKit* ➜ WebSpaceKit.com

[@user-us7eu6lc1b]

Hei can you make a video on Wordpress based webinar platforms like webinarignition, webinarpress etc.

[@iqbalahmedtareenofficial]

Please make a video on how you edit 😮😮

[@vaishu.b9217]

Thank you ❤

[@azmathullahtlazmathullah375]

Can we use this app in mobile , it will work as its in laptop ?

[@manavjoshi580]

Best tutorial ever