UI / UX Design Tutorial – Wireframe, Mockup & Design in Figma

Wordpress sites

Learn the process of UI / UX design. In this tutorial you will learn how a professional designer builds a full website design from scratch following the process of user experience and user interface. The video covers wireframing, prototyping, and designing in Figma.

This course was developed by Adrian Twarog. Check out his channel:

⭐️ Sections ⭐️
⌨️ (00:00) Introduction
⌨️ (01:27) Wireframing
⌨️ (30:58) UI Layout
⌨️ (1:06:38) Mockup

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

44 thoughts on “UI / UX Design Tutorial – Wireframe, Mockup & Design in Figma”

  1. Everyone watching this… I’m proud of you for wanting to improve yourself, I wish you the best of luck in your future endeavors. 🙏🏽

    1. ExampleWasTaken

      What an awesome surprise! Not that the dev community is toxic, but seeing a comment like this is rare. Thanks! Have a wonderful day! ❤

    2. thanks for the kind words, I am learning to be a UI designer and I’m also learning Webflow to build functional sites out of my designs

  2. Great tutorial Adrian, clear and simple to follow instructions made it worth so much more. Keep up the amazing work!

  3. Tanner Barcelos

    This is going to help me a ton with ideation / design of my web app projects. My design skills were not good but now I feel more confident. Hopefully I can build on this and even apply to Product Design roles and not just Software Engineering roles!

  4. this is an absolute beast of a tutorial. we’re so blessed being able to enjoy your work and all that for free.

  5. Ogunjole Elijah

    All I have to say is God bless you, bro. You’ve just made workflow easier. This is the best tutorial have seen on UI/UX on Youtube

  6. Matshidiso Tsolo

    Never have I had so much confidence in using figma and beautiful UI like today. Thank you so much for this Video. Loved how you made everything make sense and also very simple.

  7. 32:54 => selector;
    33:03, 33:10 => frame, shapes;

    # Start
    33:38, 33:53, 34:00, 34:14 => wire frame | desktop (1980 width & height – the usual width & height (might be increased) of UX design);
    34:52 => copy/paste, drage/drop the content;

    # Grid Layout
    36:05, 36:14 => costumize grid;
    36:20 => 12 columns (normal bootsrap);
    36:26 => center (type);
    36:34 => gutter (15) – width (80);

    # Slider image
    36:50, 37:02, 37:07 => box tool;
    37:25 => menu;
    38:10 => layout (hide);
    38:27 => zoom in;
    38:32 – 38:56 => pull up the text;

    # Grouping Items
    39:02 – 39:10 => select (Ctl + G ), label it;

    # Spacing
    40:16, 40:18, 41:04 => padding;

    # Font awesome
    42:25, 42:45, 43:04 => chefron left (arrow);

    1. Thank you so so much. I was scared of the whole process but with the few articles I’ve read on your website, trust me I can code. I will commence the code class once I finish up my front-end dev skill. Thank you so much

  8. Learning Stuff

    For anyone wondering how he moved up / down in 10-pixel increments – hold SHIFT while using the up and down arrow keys.

  9. I have made up my mind on moving from XD to Figma. This is awesome. Talking pace is great and you explain things in a very understandable way. I am managing to find my way through Figma and your tut is so smooth. Thank you so much. Subbed.

  10. Thanks for the video. Just wanted to add for newbies that wireframing is not trivial. It does require content and domain knowledge, unless you are creating it for a very generic website. Actually content and IA is the first step to wireframing.

    1. @Default _8101 it depebeds what you wanna do. If you only want to design website in figma/xd or similar, than no, but if you want to make that design to real website, than obviously yes.

  11. Luis Miguel Bautista

    This is simply gold for a backend engineer (me) that has a small designer living inside (also me)

    What a huge amount of things I learned with this video❤️ Thanks so much 🙇🏻‍♂️

    1. then you will be in HELL when you try and take the pretty mockup into the real world of code (and waste 4x time, better to just design in browser)

    2. heyy i just want to ask that i am currently learning frontend developing should i go for ui/ux NOW???BECAUSE I LIKE DESIGNING…

    3. labial kosta

      If you are a back-end dev i need your email please, i have some question if you can ofc !!

  12. Richard Diorio

    Very informative. I’ve been looking into UI/UX over the last couple of months, and your video has giving me the best understanding of what goes into UI/UX. I’m absolutely certain I will do well in this field. Granted I’m sure there is more to it than what this video shows. You have been subbed and belled.

  13. 32:54 => selector;
    33:03, 33:10 => frame, shapes;

    # Start
    33:38, 33:53, 34:00, 34:14 => wire frame | desktop (1980 width & height – the usual width & height (might be increased) of UX design);
    34:52 => copy/paste, drage/drop the content;

    # Grid Layout
    36:05, 36:14 => costumize grid;
    36:20 => 12 columns (normal bootsrap);
    36:26 => center (type);
    36:34 => gutter (15) – width (80);

    # Slider image
    36:50, 37:02, 37:07 => box tool;
    37:25 => menu;
    38:10 => layout (hide);
    38:27 => zoom in;
    38:32 – 38:56 => pull up the text;

    # Grouping Items
    39:02 – 39:10 => select (Ctl + G ), label it;

    # Spacing
    40:16, 40:18, 41:04 => padding;

    # Font awesome
    42:25, 42:45, 43:04 => chefron left (arrow);

  14. Air Defense Coalition

    I’m into content creation as well as designing t-shirts. This right here ties in perfectly and makes my learning experience much easier. Great career to have by doing what you love for a living. Good luck to all of you!

  15. Arshia saleem

    Worth watching the tutorial Adrian. That’s so well-presented and easy to grasp. You’re simply amazing man 🔥Huge huge thanks <333

  16. Alchemy Tree - Grow in Love

    Amazing, thank you!
    Just a heads up, there’s a few shortcuts you should know about…
    41:00 – You can simply select all of the nav bar textboxes and press the distribute horizontal spacing button in the top right corner. Will save you A LOT of time!
    42:20 – I would simply download the iconify plugin, then you can easily add icons to your page

    1. Thanks its much easier to distribute that way but cud u explain me how he is distributing at 40:20 ,what is he clicking while saying 1234 gives 40 px

  17. Is there a follow up video to this? The actual website being built? That would be really helpful

Comments are closed.