Тёмный

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

DesignCourse
Подписаться 1,1 млн
Просмотров 1,4 млн
50% 1

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?
www.figma.com
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS weekly!
My site: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-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!

Хобби

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

 

29 апр 2018

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 550   
@DesignCourse
@DesignCourse 6 лет назад
By the way, very shortly, I will be covering all of the Mac exclusive apps as well. Hang tight!
@DesignCourse
@DesignCourse 6 лет назад
Qasim, I'll think about it. Not a bad suggestion!
@sonleq987
@sonleq987 6 лет назад
Gary, why did you change designcourse to coursetro?
@DesignCourse
@DesignCourse 6 лет назад
"DesignCourse" was a restrictive brand name, because I wanted to cover development as well. "Coursetro" opened up the doors more for other type of content. The only reason I haven't changed the channel name to "Coursetro" is because when I tried that last year, my reach was nearly killed. I would upload a video and get practically no views -- so, I'm just keeping it the youtube channel name "DesignCourse" for now.
@sonleq987
@sonleq987 6 лет назад
Ok, I see, do you feel that you get a lot of viewer on development course? Every time I want to learn how to design, I kept thinking about your channel.
@DesignCourse
@DesignCourse 6 лет назад
It all depends on the topic. Some in development are hit and miss, as with design.
@melissamonson9792
@melissamonson9792 4 года назад
I have only been studying web design for a few months and I'm a first time user in illustrator programs, so this is extremely helpful and useful information! Thank you for creating this tutorial!
@jelrusiana7963
@jelrusiana7963 4 года назад
I never knew UI/UX designing until I searched about Figma. You just earned a subscriber. Thank you!
@fusiontv5269
@fusiontv5269 4 года назад
5:08 Basic Controls, 7:20 Hold Shift, 8:49 Arrow Keys, !11:00! Boolean, 14:50 Alt Key!
@BoadiceaHime
@BoadiceaHime Год назад
Just found this tutorial, as I've just heard of Figma. Even though this is four years old, and my version looks different, this has been the most helpful tutorial. Thank you for this! I started playing along in Figma with you, and you are VERY helpul!
@gregorymcmillan
@gregorymcmillan 6 лет назад
I've went on this website several times and this is the first time I'm noticing that sentence "Free for individuals" at the top of the pricing page, thank you so much for bringing that to our attention.
@Shmilfke
@Shmilfke 5 лет назад
What about siamese twins?
@ICONICZy0n
@ICONICZy0n 4 года назад
@@Shmilfke Deez nuts?
@kvncnls
@kvncnls 4 года назад
It's no longer there - 2019.
@LearnDesignWithGanesha
@LearnDesignWithGanesha Год назад
Floating pill buttons animation in figma, Have a look plz ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gEHl9ybFAMY.html
@mibiocorpsllc9306
@mibiocorpsllc9306 2 года назад
I'm in a UX/UI Design course now and just getting to user flows so this was INCREDIBLY helpful. Thank You!
@AlexTechie
@AlexTechie 4 года назад
I like how this tutorial is basically Gary learning along the way. :D Thanks for doing this video, I've been wanting to learn to use these design apps and I signed up for Figma based on a recommendation. 👍
@jasl5361
@jasl5361 4 года назад
You make it look easy and simple and straightforward. I am signing up for the UI Design Bootcamp after watching this video! Love your work! thank you so much!!!
@zachbaird2851
@zachbaird2851 5 лет назад
Excellent! I love developing on my Ubuntu machine due to the speed and all, but I was left without a UI design tool like Sketch. Found Figma, didn't know how to work it. Really appreciate this one, Gary!
@madihahussain5218
@madihahussain5218 5 лет назад
Spent £6,000 to learn this and this is the first time I actually learnt something. Thank you for this video :)
@theIfrit552
@theIfrit552 4 года назад
Figma is incredible. You can even mirror your prototype to your iPhone! Thank you very much for showing it, i'm in love with the software. Finally an easy way to prototype apps like I needed. No more photoshop!
@alveek
@alveek 6 лет назад
Great tutorial. I love your relaxed way of explaining. (I find that it is much easier to use ALT + drag to duplicate things instead of cmd+d or cmd-c cmd-v)
@fabianponten8865
@fabianponten8865 6 лет назад
Figma looks super cool, great tutorial as always man!!! 🙏🙏🙏🙏
@tsangyami9159
@tsangyami9159 3 года назад
Super thankful to your tutorial! It is clean and easy to understand for beginner. I attend many in-class in Hong Kong but none of them can do a better job than you do!
4 года назад
I just tried Figma today and i have to say it's a surprisingly professional tool. I can work with it very quickly! So thanks a lot Gary... again!
@apopj5322
@apopj5322 3 года назад
i love how figma actually made the changes you wanted
@mtsurov
@mtsurov 6 лет назад
Love this channel. Was watching mash hamidani and Brad traversy for some time, but this is my new favorite. Somehow this presentation style registers a whole lot more with me.
@DesignCourse
@DesignCourse 6 лет назад
Awesome, thanks! That means a lot. Brad is great.
@yanik.ottenbreit
@yanik.ottenbreit 3 года назад
Sound is crisp! Thanks for dropping all this knowledge!
@trevorroberson1216
@trevorroberson1216 2 года назад
This Figma tutorial was BRILLIANT!!!!! Thank you!
@hotelsmartpalace57
@hotelsmartpalace57 4 года назад
After using and searching several prototyping tools , i found it better than everyone.
@Michael_H_Nielsen
@Michael_H_Nielsen 3 года назад
Everytime I look for a new toturial for UI I want to learn you have made a toturial for it :)
@olatunjiabiodunmichael2740
@olatunjiabiodunmichael2740 4 года назад
Thank you so much. Just hope we can get more of your wonderful tutorial
@Evuce1000
@Evuce1000 4 года назад
Dude, Gary, love what you are doing! I appreciate that you are discovering the program along with me. :D Some people are meant to teach!
@adamjoyce9402
@adamjoyce9402 4 года назад
R u a ui designer yourself?
@Evuce1000
@Evuce1000 4 года назад
@@adamjoyce9402 hi, more front end focused, but I am learning some extra skills. You?
@ekondu
@ekondu 2 года назад
I didn't expect ux design to be this awesome
@saraglez7681
@saraglez7681 3 года назад
Perfect tutorial! Today I start with Figma and now all is more clear! :)
@narendrasudrik5073
@narendrasudrik5073 2 года назад
Very helpful. Many thanks Gary Simon for this crisp and neat tutorial !!
@TheEamonKeane
@TheEamonKeane 4 года назад
Great overview thanks. Figma have since added overlays which are ideal for menus / modals etc which I guess wasn't a thing at the time this tutorial was created. It's easier than the way that's demonstrated here.
@krishnateja7830
@krishnateja7830 6 лет назад
Thanks gary for these awesome tutorials.
@DanielLiljeberg
@DanielLiljeberg 4 года назад
@30:00: You don't have to detach instance. The "parent" will change all instances. But instances can overwrite those changes. So you could have changed the text on each instance. Once you do that the thing you edited will be decoupled. So for instance the text string. But the position will still be coupled, so moving the text in the parent will move it in all instances.
@robertbalazsi
@robertbalazsi 3 года назад
Great tutorial! One thing I noticed Figma lacks is the ability to create a design system and enforce it. That would allow making faster decisions for things like colors, spacing, fonts, shadows, etc. and would promote a consistent design. What do you think? How do you currently maintain a design system?
@harmeepatel
@harmeepatel 6 лет назад
Thank you so much. That was very helpful. Please make more videos of this. Thanks 😄
@saroshpadikkal2362
@saroshpadikkal2362 3 года назад
Yeah!!! I completely applied this Amazing course, nicely explained. Thanks for the video
@TarkanAcan
@TarkanAcan 4 года назад
I don't know if someone discovered it already, but the app let's you slide inside number boxes together with the Alt key. The issue is mentioned around 19.30. Great review, thanks.
@dorothyvo
@dorothyvo Год назад
This was SO fun to watch!
@tonymakaroni2898
@tonymakaroni2898 5 лет назад
11:16 you could just drag rectangle layer into "Iphone X" section and it resolves it.
@brucelee7782
@brucelee7782 5 лет назад
Quick question tho, how do I undo "detach instances"? I selected the detached components but there was no options to do so.
@augustocamargo6051
@augustocamargo6051 3 года назад
dude this is the best figma tutorial. thank you so much
@ashraftm
@ashraftm 6 лет назад
Beautiful, was looking for this type of tool
@plainkady
@plainkady 5 лет назад
Thanks for putting this together. Very useful!
@Nishith-Gohel
@Nishith-Gohel 3 года назад
Good explanation for a beginner like me. I learned quite significant stuffs with your help. Great Work !!
@paulmaher1705
@paulmaher1705 4 года назад
Just starting using Figma and this was a very useful primer .... thanks
@ozzyfromspace
@ozzyfromspace 4 года назад
I’m soo excited to try this! Today!
@harshitha3867
@harshitha3867 3 года назад
Fantastic, the right video for figma beginners !! I can just praise the whole time!!
@Graceibrahimn
@Graceibrahimn 4 года назад
Best tutorial! So well explained, I love it
@modo203
@modo203 4 года назад
This is amazing! Thank you for sharing the knowledge!
@ihebhaboubi1570
@ihebhaboubi1570 4 года назад
I've learned so much from this video, Thank you a lot !
@saberdahmen9393
@saberdahmen9393 4 года назад
Thank You, You Saved My Life
@miashanholtzer291
@miashanholtzer291 5 лет назад
Great tutorial. Greatly appreciated! Please keep up the excellent work.
@anastasiiaboichun1094
@anastasiiaboichun1094 3 года назад
It was really useful for the begginers. Thanks you a lot! Keep doing a great job!
@bustergaa
@bustergaa 4 года назад
Am Using Figma to design and prototype my PWA for my dissertation, thank you for the video, will help greatly :)
@SilvioFYT
@SilvioFYT 5 лет назад
This was very helpful, thank you!
@olasideeq
@olasideeq 4 года назад
Thank you Gary. I will be using figma.
@geekatari4391
@geekatari4391 5 лет назад
Excellent video. I found a job where they use this tool and now I feel closer to applying :)
@redjohn933
@redjohn933 4 года назад
Very useful tool and great video as well, you covered just enough to get me started
@chandler6443
@chandler6443 4 года назад
Thanks for putting the link, OMG most people don't understand basic UX!
@sebbytrial
@sebbytrial 5 лет назад
This is just genius! Thanks for sharing it!
@uniquejain250
@uniquejain250 3 года назад
Awesome stuff. Keep up the good work
@iftikharrasha8151
@iftikharrasha8151 4 года назад
I stopped watching netflix and wasting my time on other stuffs once i found out your channel, thank you for existing Gary
@tharunrocky14
@tharunrocky14 6 лет назад
Wow, figma looks amazing!! Thanks a lot!
@malineesaechee8238
@malineesaechee8238 3 года назад
Thank you so much! This tutorial is so helpful and easy to understand 😊
@ghhungyaaaghjust.6819
@ghhungyaaaghjust.6819 6 месяцев назад
26:20 components. I found this video greatly useful! Thank you! I just put this for myself for later.
@quasa0
@quasa0 4 года назад
Hey! As a backend engineer doing a hackathon overnight right now - I'm very thankful, it was great watching this tutorial. Gonna go and implement the design at Figma for our presentation (which will be in 10 hours from now) to show on the slides.
@jakespeakz
@jakespeakz 3 года назад
How did it go?
@quasa0
@quasa0 3 года назад
@@jakespeakz kinda got a second place. Loving figma though for my pet projects and everyday life
@jakespeakz
@jakespeakz 3 года назад
@@quasa0 whoa thats nice to hear!
@TarokhYaghoubi
@TarokhYaghoubi 2 года назад
suddenly i decided to become a Frontend developer and also UI-UX designer so you are the best teacher
@PrashantNirgun
@PrashantNirgun 4 года назад
Thanks very much it was so easy I never thought of. Now feeling confident can make a great looking apps. Good work keep t up
@billie-grant
@billie-grant 4 года назад
Thank you for making this video! it helped me a lot!
@gracejaypark
@gracejaypark 2 года назад
Thanks for the figma tutorial!
@samanthaludwig9014
@samanthaludwig9014 2 года назад
This is very helpful! Thank you so much!
@ferigidiondwiputra9269
@ferigidiondwiputra9269 6 лет назад
Great tutorial, you can describe the feature clearly.
@himalwj6397
@himalwj6397 4 года назад
JFYI, in Components, you can override anything in the "duplicated" component and then it kind of gets detached, but only the overridden item. you can still modify other items in the original component and they'll apply to the duplicates as well. you can hide the layer panel from the hamburger menu -> view -> Layers Panel. at least with the current version.
@jnw4839
@jnw4839 4 года назад
This is so helpful! Thank you 😊
@catherineavagimyan1773
@catherineavagimyan1773 5 лет назад
Very Productive course. Thank you so much.
@DaryaNavitskaya
@DaryaNavitskaya 5 лет назад
Thanks for the nice and very useful tutorial!! Great video!
@Vikram-jv9wp
@Vikram-jv9wp 2 года назад
You have my gratitude, Thank you so much!
@flavia22981
@flavia22981 4 года назад
This was so helpful! Thank you super much :D
@OliverWoodomagmedia
@OliverWoodomagmedia 3 года назад
Excellent presentation. Thanks!
@ishanchag6467
@ishanchag6467 4 года назад
Simple, effective software with an incredible course
@amburt7x
@amburt7x 4 года назад
That's a very helpful video :) thank you for sharing some basics in using Figma.
@magsd60
@magsd60 3 года назад
Thank you for this! It's very helpful for a newbie!!
@cerebrumexcrement
@cerebrumexcrement 4 года назад
great tutorial. i have figma open and am following along. this is so helpful. thank you.
@tommy6322
@tommy6322 3 года назад
Thank you! Awesome video!
@LuigiVampa9
@LuigiVampa9 6 лет назад
Yo ;) great work. I've never heard about Figma before and it looks great!
@gladqueiroz01
@gladqueiroz01 5 лет назад
Amazing! Congratulations!
@kiranmultani3561
@kiranmultani3561 3 года назад
I am seeing Figma for the very first time.. and literally i feel like we just need some practice and then BAMM!! WE WILL BE PRO in this.. 💥✌🏻😄
@hudsonsilvaoliveira5674
@hudsonsilvaoliveira5674 6 лет назад
As always, great tutorial!. Quick tip: you don't need go to the download folder to get the file. You can simple drag it right of chrome download bar and drop it in your desktop. :)
@CNaismith
@CNaismith 5 лет назад
You can also, if you don't want to move it from your downloads folder, drag it right from the download bar to the application
@LearnDesignWithGanesha
@LearnDesignWithGanesha Год назад
Floating pill buttons animation in figma, Have a look plz ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gEHl9ybFAMY.html
@cncmachinistaartist2160
@cncmachinistaartist2160 Год назад
my first day of my tutorial and i totaly get all i wanted to know . thank you am your new subcriber hope to see more and learn more of you great talents .. God speed....
@diagramo
@diagramo 2 года назад
Very nice presentation. Thank you!🙂
@1kuos
@1kuos 4 года назад
Thank you for this tutorial. It helps a lot :)
@BuddhirDhenki
@BuddhirDhenki 4 года назад
Thank you...😀
@lsevein
@lsevein 3 года назад
Thanks for a great tutorial!
@a.krugliak
@a.krugliak 4 года назад
well, this is best tutorial about figma! thx man
@olivier2101
@olivier2101 3 года назад
Excellente introduction à Figma, merci !
@Charlotte_diaries_
@Charlotte_diaries_ 3 года назад
This was very insightful ! thanks a bunch !
@charlestonford8857
@charlestonford8857 4 года назад
Super helpful. Thanks so much!
@AbdelrahmanElghanam
@AbdelrahmanElghanam 5 лет назад
Great video mate. Love how easy to use that is, the only concern I have is why isn't there palettes with already existing components.
@tonycarrbcnxxx
@tonycarrbcnxxx 4 года назад
Great tutorial. Thanks for everything
@shaileshtate8992
@shaileshtate8992 3 года назад
Very Well Explained, Thank You!
@annallenwang4544
@annallenwang4544 4 года назад
Clear and interesting intro, thank you! :))
@catw6274
@catw6274 3 года назад
Very helpful, thanks!
@jamestran2218
@jamestran2218 4 года назад
That's a great video, thank you so much!
Далее
Free Figma Crash Course for Beginners 2024 | UI/UX Design
1:01:20
Would you help?!😳
00:32
Просмотров 4,8 млн
6 UI Hacks I Wish I Knew As A Beginner
11:11
Просмотров 749 тыс.
Prototype & Test in 10 minutes or less
11:56
Просмотров 51 тыс.
The Figma 2021 Crash Course by Example
1:12:05
Просмотров 675 тыс.
Design A Website In Under 1 Hour With Figma
47:46
Просмотров 1 млн
Figma Masterclass for Beginners (2023 Updated)
31:57
Просмотров 540 тыс.
Free Figma UX Design UI Essentials Course
2:57:40
Просмотров 1,8 млн
KINDNESS ALWAYS COME BACK
0:59
Просмотров 131 млн