Instructor: Website Learners |
Runtime: 15:28 mins |
Students / Views: 904,993
โค๏ธ *LIMITED TODAY:* Get *1 Year* of GravityWrite at _$97_ ๐ฅ
๐ Visit โ https://gravitywrite.com/
๐ *The Best Place to Host your Website* โ https://webspacekit.com/
โค๏ธ *Start Here* โ https://wl.tools/Figma
Watch this video to gain the skills to build user-friendly interfaces with Figma.
๐ *Undraw* โ https://undraw.co/illustrations
๐ *Get New Video Updates* โ https://whatsapp.com/channel/0029VaAYBig7IUYaC6vcu53s
๐ฌ๐ง๐ฎ๐ฏ๐น๐ฒ ๐ผ๐ณ ๐ฐ๐ผ๐ป๐๐ฒ๐ป๐๐
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 โ https://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โhttps://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๏ฝhttps://wl.coupons/Grammarly
๐ก ๐ฒ Publer๏ฝ10% off๏ฝhttps://wl.coupons/publer
๐ก ๐ Mangools ๏ฝ10% off๏ฝhttps://wl.coupons/mangools
๐ก ๐ผ Fiverr๏ฝ10% off Coupon WEBSITELEARNERS10๏ฝhttps://wl.tools/fiverr
๐ก ๐ผ๏ธ Astra๏ฝ10% off Coupon WLDiscount๏ฝhttps://wl.coupons/Astra
๐ก ๐ SEMScoop๏ฝ20% off Coupon SAVE20LT๏ฝhttps://wl.coupons/SEMScoop
๐ก ๐Anyword๏ฝ20 % off Coupon Anyword20๏ฝhttps://wl.tools/Anyword
๐ ๐ข๐ณ๐ณ๐ถ๐ฐ๐ถ๐ฎ๐น๐น๐:
๐ช๐ฒโ๐ฟ๐ฒ ๐๐ถ๐ฟ๐ถ๐ป๐ด: https://websitelearners.com/careers/
Want your website developed by us? Email us your requirements to contact@websitelearners.com
๐ฌ ๐๐ผ๐น๐น๐ผ๐ & ๐๐ต๐ฎ๐ ๐๐ถ๐๐ต ๐๐:
Instagram โ https://www.instagram.com/websitelearners
Facebook โ https://www.facebook.com/websitelearners
LinkedIn โ https://www.linkedin.com/company/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
Key Highlights & Overview:
Understanding <strong>Figma Ui Ux Design Tutorial From Scratch</strong> is essential for modern technical workflows and software skills. Follow along with top-rated video tutorials from industry experts today on <strong>TutorTube</strong>.
