Тёмный

Responsive Website/Web Design and Prototype with Figma 

Building Amazing Things
Подписаться 56 тыс.
Просмотров 75 тыс.
50% 1

Learn how to design a professional and responsive website/web UI using Figma. Also, you will learn how to prototype your design and use Smart animate feature in Figma to animate your design.
Here is the link to the Figma design: www.figma.com/file/I1w8axqzzn...
Here is the link to the colour theme on colours.co: coolors.co/f8f9fa-e9ecef-dee2...
Let me know what you think about this video and should in case you have any challenges, let me know in the comment section.
Remember to like, share, comment and subscribe. Also, hit on the notification bell to get notified when I upload a new video.
Subscribe to my channel my licking this link: / @buildingamazingthings
You can also reach me on :
Website: www.hyginusukeh.com
Facebook: / hyginusukeh2
Twitter: / hyginusukeh
Instagram: / hyginusukeh
RU-vid: / @buildingamazingthings
#figmawebdesign #figma #webdesign #webdesigninfigma #webdesignwithfigma #howtodesignwebsiteinfigma #webdesignfigma #designwebfigma #designwebinfigma #designwebwithfigma #howtodesignwebinfigma #howtodesignwebwithfigma #webdesigntutorial #webdesigntutorialinfigma #webdesigntutorialwithfigma #webdesigncourse #webdesigncoursefigma #webdesigncourseinfigma #webdesigncoursewithfigma #figmatutorial #ui #ux #web #design #website #figmatutorial #figmasmartanimate #figmaprototype

Опубликовано:

 

7 окт 2020

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 128   
@thefamilyguy7140
@thefamilyguy7140 Год назад
Guy..you are too good It's very nice seeing a video from a Nigerian on these courses. Thanks very much
@Doingjvstice
@Doingjvstice Год назад
Very very very x100 times simply explained, although no prototype for the mobile version but with the way you explained it i found it quite easy to do that . big ups man.
@ubaenoch2568
@ubaenoch2568 3 месяца назад
Love your simple, easy and detailed explanations! Thumbs up!👍
@zoeho3433
@zoeho3433 3 года назад
Thank you for sharing!!! Love your figma prototype work!!! Please share more videos about prototype animation
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
Thank you! Will do!
@SonuKumar-ll2en
@SonuKumar-ll2en 3 года назад
Great video, its very helpful and the best part of color selection. Nice Video.
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
Glad it was helpful!
@chiderafelix9921
@chiderafelix9921 3 года назад
Guy, you are good, thanks for the tutorials!!! Following on IG
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
Thanks
@mtvsan70
@mtvsan70 2 года назад
Really cool, I liked the way it is made and the way explain. Thank you!
@BuildingAmazingThings
@BuildingAmazingThings 2 года назад
You're welcome!
@sisiadebanke5007
@sisiadebanke5007 2 года назад
Omg you deserve much more than this followers Youre amazing Thank you so much
@BuildingAmazingThings
@BuildingAmazingThings 2 года назад
You're welcome 😊
@meetacharya1434
@meetacharya1434 Год назад
I tried ti make and it got the same amazing buddy thanks for making this much deep
@charlesajiboye4421
@charlesajiboye4421 3 года назад
Well done bro. This is Amazing.. Keep up the good work
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
Thank you so much 😀
@ayoolaidris7262
@ayoolaidris7262 2 года назад
This is really awesoem, now you have more than 2k subscribers.
@BuildingAmazingThings
@BuildingAmazingThings 2 года назад
Yeah thanks!
@nicholaschira7972
@nicholaschira7972 3 года назад
Wow, thank u so much for your lecture U are amazing🙏🙏🙏 thank u very very much
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
You are welcome
@adelekeadesewa8958
@adelekeadesewa8958 Год назад
Thank you so much for this
@romanmir8443
@romanmir8443 3 года назад
Thank you so much for your content you inspired me alot help me to make design thank you so much (Love from INDIA 🇮🇳)
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
I’m glad I inspired you
@johnmarvindigal3519
@johnmarvindigal3519 3 года назад
Thank you so much, this really helped me :))
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
Glad it helped!
@alinlasicka5187
@alinlasicka5187 3 года назад
Thank you really much, this really haped me. ♥
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
You are welcome
@dustinatatahak9707
@dustinatatahak9707 2 года назад
Really great video. I really enjoyed it.
@BuildingAmazingThings
@BuildingAmazingThings 2 года назад
Good to know Thanks 😊
@ayanbanerjee5508
@ayanbanerjee5508 2 года назад
KEEP DOING THE GREAT WORK MATE
@BuildingAmazingThings
@BuildingAmazingThings 2 года назад
Thanks, will do!
@ShreyasMakesSillyVideos
@ShreyasMakesSillyVideos 3 года назад
Thank you so much. You teaching very nicely.
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
Welcome 😊
@JakeTwist
@JakeTwist 7 месяцев назад
Amazing things agba
@BuildingAmazingThings
@BuildingAmazingThings 7 месяцев назад
Thanks man!
@neethukp3885
@neethukp3885 3 года назад
One of the best toutorial. best explanation, showings, etc. Not this video only all your video like this way
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
Wow, thanks!
@neethukp3885
@neethukp3885 3 года назад
@@BuildingAmazingThings Bro, I have one doubt regaring figma. Doubt: How this code to get us? Or how to use this design to other people? How This website connected to data base? If you dont understhand ma question, please contact me via insta personally: ms_neethuakhil
@oparahvictor9147
@oparahvictor9147 3 года назад
You inspire me bro. Thank you
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
You are welcome 😊
@Jane-ge7ho
@Jane-ge7ho 3 года назад
Thanks. it is really cool 👏👏👏
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
You are welcome 🙏
@lightpublicity1092
@lightpublicity1092 3 года назад
Ty, you are the best♥
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
Thanks 🙏
@amberfaisal4888
@amberfaisal4888 3 года назад
You are doinnnnng awsome work ur teaching method is amazing keep it up from Pakistan
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
Thanks for watching 💕
@umehmaryrose5960
@umehmaryrose5960 3 года назад
Thanks Alot, was a great help.
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
Glad it helped!
@atharvkulkarni7399
@atharvkulkarni7399 3 года назад
Very nice video sir👍
@BuildingAmazingThings
@BuildingAmazingThings 2 года назад
Thanks and welcome😍
@_Techshieldgame
@_Techshieldgame 2 года назад
Bro , I must say you doing amazing things , please can you create a video walking a beginner what UI/UX designs is all about, and what steps are needed to be taken. Thanks
@BuildingAmazingThings
@BuildingAmazingThings 2 года назад
Thanks Bro Go through the playlist I'm sure you'll find all you need
@mentordee
@mentordee 2 года назад
Hi. Thanks for this tutorials. Please I'm having issues with the prototyping. After creating the prototype, when I play it, it doesn't display exactly as yours. And I did exactly how you did yours. What could be the issue?
@dianejibbs7914
@dianejibbs7914 2 года назад
Thank you very much.
@Vocal_55
@Vocal_55 3 года назад
IAM tamilnadu this video I understanding ....wow masss
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
You are welcome.
@gaytribhusare5642
@gaytribhusare5642 3 года назад
Amazing 🙌🙌
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
💥💥💥
@manuelantonio2990
@manuelantonio2990 3 года назад
Thank you very much, I made it 🤓
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
I’m glad you did 😊
@srsrinath9778
@srsrinath9778 3 года назад
That's awesome explain sir
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
Thank you
@srsrinath9778
@srsrinath9778 3 года назад
@@BuildingAmazingThings sir did you do me the video for me sir please i send already attachment please sir reply me
@saadanimohamedamine9328
@saadanimohamedamine9328 3 года назад
really interesting video !!!
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
I’m glad you find it interesting
@suganya9838
@suganya9838 3 года назад
amazing video
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
You are welcome
@zmodunkwu
@zmodunkwu 3 года назад
Bros. good job. I hope you are safe back at home 🇳🇬
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
Bro I'm trying to be safe. Thanks for your concern.
@emmajohn183
@emmajohn183 3 года назад
This is dope boss
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
Thanks
@ray412m
@ray412m 2 года назад
Is it possible to auto-convert the prototype from desktop site to mobile site while resizing the browser without using any plugin?
@MrAd540
@MrAd540 3 года назад
Bro you are amazing...keep it up👍👍👍👍
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
Thank you very much 😊
@MrAd540
@MrAd540 3 года назад
Bro how to create professional design like Behance? Please make a video on that
@MrAd540
@MrAd540 3 года назад
@@BuildingAmazingThings my pleasure
@Afsharocksss
@Afsharocksss 3 года назад
Thank you so much for a nyc video .your explanation is very nice..love from india.
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
So nice of you
@Afsharocksss
@Afsharocksss 3 года назад
@@BuildingAmazingThings 😊😊😍
@dhynmmablessyn
@dhynmmablessyn 3 года назад
Great video. Can you make a video on how to communicate or submit your design to a programmer (Frontend, Mobile, Backend)
@BuildingAmazingThings
@BuildingAmazingThings 2 года назад
Great suggestion!
@jonjon296
@jonjon296 3 года назад
What a great video! Thank you! I have a question... You designed both desktop and mobile app. How do you then share the prototype so that it opens up the correct version for the user ?
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
You then new to prototype version. One for the web and the other for the mobile. I hope this helps you. 😍
@olamijutosin2089
@olamijutosin2089 Год назад
Pls another question, base on this design now, assume you need to showcase 50 cars, are you to duplicate the page in 50 places to set the smart animation?
@iqrayounas9926
@iqrayounas9926 2 года назад
Great work n really understandable ..thanks bro...😌😇 but i have a question ...u designed both web n mobile view... but prototype play is just presenting a webiste view ...what about mobile view ..plz clear my confusion...
@neethukp3885
@neethukp3885 3 года назад
Thankyou so much bro
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
you are welcome
@dorabenarbia6027
@dorabenarbia6027 2 года назад
thank you sir
@BuildingAmazingThings
@BuildingAmazingThings 2 года назад
You're welcome 😊
@kazimahbub4298
@kazimahbub4298 3 года назад
cool
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
Thank you very much
@solomonlasun1409
@solomonlasun1409 Год назад
I hope u answer this quickly, Is it not advisable to build the mobile or ipad version on another page if the file is big and they want it to be responsive
@hunainaimran9319
@hunainaimran9319 Год назад
Am i have no clue where the picture of the car came from and where i can get it?
@siddharthrathi1107
@siddharthrathi1107 3 года назад
Amazing work!!!! What's the shortcut of Autolayout in Figma?
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
Shift + A on windows
@afowowefeyisayo1308
@afowowefeyisayo1308 3 года назад
Really nice I really enjoy your tutorial How were able to change the color of the background of the image and that of the macbook Mine doesn't work
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
I think you should select the frame and under the property section select the color on the fill section. I hope this works. Cheers.
@sanzeest
@sanzeest 3 года назад
great video, thanks, but why my figma always shown mobile version when click present instead web version? how to change the version when we click present?
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
On your prototype panel, select the screen size you want.
@abbasrianat7674
@abbasrianat7674 3 года назад
Thank you, this is useful. Pls where do you get images like this
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
checkout unsplash.com
@MoiseDiarra
@MoiseDiarra 3 года назад
Very good my friend, now how we do to export design to Html and Css
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
There are tools online to convert your designs to HTML and CSS. I’m still making my research about those tools. Probably in my next video I will talk about that. Meanwhile for now you have to write the HTML codes yourself. And for the CSS the Inspect Tool on Figma will help you with some of the CSS codes for each layers. I hope this will help you to some extent. 🤔 Also check out this video on my channel : Build a website with Editor X. You don’t need to code.
@mojola2236
@mojola2236 Год назад
Hi.. You are so lovely! You said you were going to drop the link for the image. I can't find it please
@tobiojo7096
@tobiojo7096 Год назад
Pls how do i get the car resources. i need it. i am following your design and it's interesting.
@ketn0o416
@ketn0o416 2 года назад
Coolors
@BuildingAmazingThings
@BuildingAmazingThings 2 года назад
,😊
@soulreaperichig0
@soulreaperichig0 3 года назад
How are you able to paste all those colours without changing tabs? Do you use special software?
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
I copied it from another machine.
@ayomidemustapha7855
@ayomidemustapha7855 Год назад
good evening pls how do i record my prototype in order to post
@aravindoptimistic8250
@aravindoptimistic8250 11 месяцев назад
what about autolayout and constraints??
@gudnewzfavour6514
@gudnewzfavour6514 2 года назад
A bit late but is that how the image is when you downloaded it or you cropped and worked on it?
@BuildingAmazingThings
@BuildingAmazingThings 2 года назад
I worked on the image
@Afsharocksss
@Afsharocksss 3 года назад
Sir plz makes some video of vaprowave.3D effect in figma.
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
Alright. I will put that into consideration ☺️
@tobiomosefunmi8098
@tobiomosefunmi8098 Год назад
You didn't drop where to get the image.
@miraxcode
@miraxcode 3 года назад
Please bro how can someone design the prototype of an app that has augumented reality features
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
Throw more light.
@miraxcode
@miraxcode 3 года назад
@@BuildingAmazingThings can I have your mail so I can send the explanation to you
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
Follow me on Instagram @hyginusukeh
@jessicauchechi9674
@jessicauchechi9674 2 года назад
Please where did you get the car image from?
@BuildingAmazingThings
@BuildingAmazingThings 2 года назад
search on unsplash.com
@jessicauchechi9674
@jessicauchechi9674 2 года назад
@@BuildingAmazingThings thank you!
@tavongazindonda6184
@tavongazindonda6184 3 года назад
how do i then convert this prototype to a real website
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
Please stay tuned. My next series of video will show that.
@tanmoychakrabortty2325
@tanmoychakrabortty2325 Год назад
This's not a responsive design. Where is the auto layout and constraints part? You created the whole thing from scratch. This's called Adaptive design.
@deoudersvan1883
@deoudersvan1883 3 года назад
I like Adobe XD more
@BuildingAmazingThings
@BuildingAmazingThings 3 года назад
Stay tune. Designs are coming for xd 🕺🕺🕺
Далее
Reacting to 21 Design Portfolios in 22 Minutes
22:41
Просмотров 528 тыс.
How To Get The Perfect Spacing In Web Design
12:15
Просмотров 32 тыс.
Responsive Design in Figma: Crash Course 2023
20:47
Просмотров 106 тыс.
10 tips to work 10x faster in Figma
18:54
Просмотров 409 тыс.
ADVANCED MOBILE  APP UI DESIGN AND PROTOTYPING [FIGMA]
55:32
Responsive Design Beginner's Tutorial for Figma
19:20