Figma is a web-based (with a companion desktop app enabled by Electron) UI design and prototyping tool. In this tutorial, I create a mobile layout while discovering many of its features. I have to say, this is perhaps the strongest contender against Adobe XD. What do you think?

https://www.figma.com

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS weekly!


My site:                                 https://designcourse.com
My personal FB account:   http://fb.com/logodesigner
Coursetro FB:                       http://fb.com/coursetro
Coursetro's Twitter:             http://twitter.com/designcoursecom

Join my Discord!                https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon?  Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. 

Now, I focus all of my time and energy on this channel and my website Coursetro.com.

Come to my discord server or add me on social media and say Hi!

Figma Tutorial - A Free UI Design/Prototyping Tool. It's awesome.

Check out my courses and become more creative!
https://developedbyed.com

Check out Web Dev Simplified Here:
https://youtu.be/RZ-Oe4_Ew7g 


Design A Website In Under 1 Hour With Figma

Today I am super excited to bring you a full website design from scratch video using figma. We are going to learn how to use all the tools that figma gives us to create a website design in just under 1 hour.

I will also teach you how to prototype in figma, design a logo and structure all the pages that we are going to be designing.
These concepts don't only apply to web design, you can implement these techniques in apps, games and more.
 
This video is intended to help beginners learn about web design (color theory, fonts, structuring, creating CTA's) to create nicer looking websites.

❤Become a patreon for exclusive videos and more!
https://www.patreon.com/dev_ed

Microphones I Use
Audio-Technica AT2020 - https://geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - https://geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - https://geni.us/AcbCpd9 (Amazon)

Camera Gear
Fujifilm X-T3 - https://geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - https://geni.us/sztaN (Amazon)

PC Specs
Kingston SQ500S37/480G 480GB - https://geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - https://geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - https://geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - https://geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - https://geni.us/YAtI (Amazon) 
DeepCool ATX Mid Tower - https://geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - https://geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - https://geni.us/bilekX (Amazon)
Logitech G305 - https://geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - https://geni.us/YBsCVX0 (Amazon)

DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.



📔 Materials used in this video:

 Images and Code: https://t.co/GYtZZvZ72V

🛴 Follow me on:

Twitter: https://twitter.com/deved94
Github: https://github.com/DevEdwin

🎵 Music:

Outro: 
LAKEY INSPIRED - Me 2 (Feat. Julian Avila)
Music By: https://soundcloud.com/lakeyinspired

Intro:
Dj Quads
Track Name: "Every Morning"
Music By: Dj Quads @ https://soundcloud.com/aka-dj-quads

Creative Commons — Attribution-ShareAlike 3.0 Unported— CC BY-SA 3.0 
http://creativecommons.org/licenses/b...

Design A Website In Under 1 Hour With Figma

http://bit.ly/3WUxFfn 👈 Learn UI/UX Today. Use "UI2022" for 22% Off!
-- Today, I'm going to show you how I approach design refactoring (refactoring, as in revising, improving, editing, etc..). This particular design was submitted by a discord user and I thought it'd be fun to recreate it with modern design and fundamentals in mind.

0:00 - Introduction
0:38 - Refactoring in Figma
14:26 - Before and After

Let's get started!

#uiux #uidesign 

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

Learn UI/UX:                         https://designcourse.com
My personal FB account:   http://fb.com/logodesigner
Coursetro FB:                       http://fb.com/coursetro
Coursetro's Twitter:             http://twitter.com/designcoursecom

Join my Discord!                https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon?  Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. 

Now, I focus all of my time and energy on this channel and my website Designcourse.com.

Come to my discord server or add me on social media and say Hi!

How to Refactor a Web Design - Like a Pro

https://bit.ly/3IhZwSx 👈 Learn UI/UX Today. Use "UI2023" for 23% Off!
-- Today, I'm releasing my annual UI/UX crash course. You're going to learn about UI/UX design by creating a landing page for a fictional business called 'Fauxica'. We're going to use Figma (https://figma.com) so be sure to create an account. 

Watch the HTML/CSS process of this design: https://youtu.be/Kl3nOXQjVnQ

You're going to a lot about UI/UX design, along with many of the features and workflows of Figma. From UI design fundamentals such as colors, typography, white space, contrast, color, visual hierarchy & more.. To Figma components, component variants, auto-layout, the grid, prototyping & more..

Resource file (just a logo!):
https://coursetro.s3.amazonaws.com/stuff/fauxica.svg (right click / save as)

0:00 - Intro
1:11 - Figma UI Overview
4:00 - Getting Started
5:55 - Creating a Grid
7:10 - Placing a Logo
10:42 - Navigation & Components
19:13 - Component Variants
31:16 - Heading
36:30 - Subheadline
41:20 - Call to Action Buttons
53:20 - News section
55:15 - Stark Contrast Plugin
1:02:39 - Using the Figma Community
1:05:21 - Gallery Section
1:16:24 - Final Result

Let's get started!

#uiux #webdesign #figma 

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

Learn UI/UX:                         https://designcourse.com
My personal FB account:   http://fb.com/logodesigner
Coursetro FB:                       http://fb.com/coursetro
Coursetro's Twitter:             http://twitter.com/designcoursecom

Join my Discord!                https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon?  Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. 

Now, I focus all of my time and energy on this channel and my website Designcourse.com.

Come to my discord server or add me on social media and say Hi!

The UI/UX Crash Course for 2023 - Learn UI/UX Design

https://hostinger.com/design (Use code: DESIGNCOURSE for 10% off!)
http://bit.ly/3ECKzr1 👈 Learn UI/UX Today. Use "BF40" for 40% Off!
-- Today, I'm releasing my annual Figma Crash Course, which will teach you Figma through the process of designing a full layout for desktop, tablet and mobile. There's a lot of stuff packed in here, so take it nice and easy! ;)

Project logo:
https://coursetro.s3.amazonaws.com/stuff/couply.svg

0:00 - Introduction
0:51 - An Awesome Offer
1:48 - UI Overview
4:01 - Navigation Design
22:30 - Hero Section
39:40 - Logo Section
43:00 - Product Gallery
53:00 - Footer Design
54:45 - Responsive Tablet Design
1:01:19 - Responsive Mobile Design
1:08:26 - Mobile Navigation Prototyping
1:11:00 - Website Deployment

Let's get started!

#figma #uiux #uidesign

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

Learn UI/UX:                         https://designcourse.com
My personal FB account:   http://fb.com/logodesigner
Coursetro FB:                       http://fb.com/coursetro
Coursetro's Twitter:             http://twitter.com/designcoursecom

Join my Discord!                https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon?  Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. 

Now, I focus all of my time and energy on this channel and my website Designcourse.com.

Come to my discord server or add me on social media and say Hi!

Ultimate Figma Crash Course 2023 - Full Layout by Example

https://bit.ly/3rUfpUy - Take my UI Bootcamp now!
-- https://bit.ly/3q25PAp 👈 Learn UI/UX Today. Use "LAUNCH" for 15% Off!
-- Today, we're going to step into the world of UI/UX design and cover Figma here in 2021. Figma is a UI/UX design and prototyping tool. In this crash course, I'm going to show you how to use Figma to design a website with multiple pages, interactions and animations. 

https://figma.com
https://www.figma.com/community/plugin/738454987945972471/Unsplash
https://www.figma.com/community/plugin/735098390272716381/Iconify
https://www.figma.com/community/plugin/736000994034548392/Lorem-ipsum

0:00 - Introduction
2:58 - An awesome offer from Scrimba
3:36 - Getting Started
10:46 - Navbar
23:45 - Hero Section
42:03 - Finishing the Home Page
55:52 - "Our work" Page
1:02:46 - Prototyping
1:05:41 - Hover Interaction
1:07:48 - Smart Animate
1:11:15 - Closing Thoughts!

Let's get started!

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

Learn UI/UX:                         https://designcourse.com
My personal FB account:   http://fb.com/logodesigner
Coursetro FB:                       http://fb.com/coursetro
Coursetro's Twitter:             http://twitter.com/designcoursecom

Join my Discord!                https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon?  Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. 

Now, I focus all of my time and energy on this channel and my website Designcourse.com.

Come to my discord server or add me on social media and say Hi!