Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

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

via freeCodeCamp

Overview

Learn the process of UI/UX design by building a full website design from scratch using wireframing, prototyping, and designing in Figma. The course aims to teach the skills of wireframing, UI layout, and mockup creation. The teaching method involves a tutorial video covering the entire design process. This course is intended for individuals interested in learning UI/UX design, particularly beginners looking to understand the fundamentals of designing user-friendly interfaces.

Syllabus

Introduction.
Wireframing.
UI Layout.
Mockup.

Taught by

freeCodeCamp.org

Reviews

4.4 rating, based on 64 Class Central reviews

Start your review of UI / UX Design Tutorial – Wireframe, Mockup & Design in Figma

  • This nice quick and simple tutorial for beginners to understand UX designing, wireframing and mickup.
  • Profile image for JOSHWA DOSS
    JOSHWA DOSS
    I recently had the opportunity to take the "UI / UX Design Tutorial – Wireframe, Mockup & Design in Figma" course offered by freeCodeCamp, and I must say it was an outstanding learning experience. The course provided a comprehensive and well-struct…
  • It's a very informative and hands on tutorial. Learning through live examples/editing is really helpful and makes the learning easier. Thank You.
  • This is my first ui design class. i learned a lot tings from this course.nowi ave slight idea to how do this.thanks to class central.
  • Profile image for Lakshmi Yuvaraj
    Lakshmi Yuvaraj
    UI/UX Design Tutorial offers an outstanding UI tutorial that seamlessly guides learners through foundational principles to advanced techniques. The hands-on approach, supported by real-world examples and case studies, ensures an engaging and practic…
  • Profile image for Nagender Singh
    Nagender Singh
    I would rate the UI/UX Design Tutorial on Wireframing, Mockup, and Design in Figma offered by freeCodeCamp a solid 4 out of 5 stars.

    The course content is quite comprehensive and covers the essential aspects of UI/UX design. It provides a step-by-step approach to using Figma for wireframing and mockup creation, which is very helpful for beginners. The instructors are clear and easy to follow, and the hands-on practice exercises are valuable for skill development.

    However, it could benefit from more advanced topics and real-world project examples. Overall, it's a great starting point for those new to UI/UX design, and I'd recommend it to anyone looking to get a solid foundation in Figma and design principles.
  • Radhika
    The course exceeded my expectations, providing a comprehensive and engaging learning experience. The content was well-structured, with clear explanations and practical examples. The instructor demonstrated expertise, making complex concepts accessible. Interactive elements, such as quizzes and discussions, enhanced understanding and retention. The platform was user-friendly, facilitating seamless navigation. Regular updates and timely feedback created a supportive learning environment. Overall, the course not only met but surpassed my educational goals, equipping me with valuable skills and knowledge. Highly recommended for anyone seeking a well-rounded and effective learning journey.
  • Profile image for SENTHIL KUMAR K S
    SENTHIL KUMAR K S
    The UI/UX Design Tutorial on Wireframe, Mockup & Design in Figma is an excellent resource for both beginners and experienced designers. The tutorial provides a comprehensive and easy-to-follow guide to Figma, a popular design tool. It covers wireframing and mockup creation, which are crucial aspects of the design process. The step-by-step instructions and practical examples make it easy to grasp the concepts and apply them to real projects. The hands-on approach and clear explanations enhance the learning experience. Overall, this tutorial is a valuable resource for anyone looking to improve their UI/UX design skills using Figma.

  • Muhammad Ziddan Rachman

    It's delightful to learn how crucial a Wireframe is in website design, where Wireframe serves as a site map or a guide for the elements needed in website development. Additionally, the explanations regarding mockups and the rough design of Wireframes have expanded my understanding of UI design. Surprisingly, it's not as complicated as I initially thought.

  • Profile image for KRISHNADHARSHINI L
    KRISHNADHARSHINI L
    The tutorial's step-by-step approach is easy to follow, offering valuable insights into creating visually appealing and user-friendly interfaces. However, it might benefit from a more in-depth exploration of advanced features. Overall, it serves as a commendable starting point for those looking to grasp the fundamentals of UI/UX design in Figma.
  • Profile image for WALTER CASTAÑEDA
    WALTER CASTAÑEDA
    I absolutely loved the "UI/UX Design Tutorial - Wireframe, Mockup & Design in Figma" course! It provided comprehensive insights into the world of user interface and user experience design, and the hands-on experience with Figma was invaluable. I feel much more confident in my design skills now, thanks to this course!
  • Profile image for Pavithra Velkumar
    Pavithra Velkumar
    I am really very beginner to design UI layout using Figma. As a beginner, I liked your videos and very good explanation for wireframe, UI layout and mockup the design. I am really appreciate it if you take more about Advance features of Figma and how to covert Figma design to code also.
  • Profile image for Jana Marie Rodriguez
    Jana Marie Rodriguez
    Learned a lot in this course especially about the process of creating wireframes and turning them into an actual website design. Course is very easy to follow and information are delivered very well in the simplest yet effective way
  • Profile image for Ayomide Aboderin
    Ayomide Aboderin
    It was a well detailed tutorial on how to make a comprehensive mock-up. I have learned a lot and believe I am leaving this course with substantial knowledge on how to start on my UI journey. Thank you FreeCodeCamp for this video!
  • This course is a great introduction to UI/UX design using Figma. The instructor, Adrian, does a great job of explaining the different aspects of UI/UX design in a clear and concise way. He also provides plenty of opportunities for practice, so you c…
  • Profile image for Kavya SK
    Kavya SK
    Really good course for beginners to glimpse a bit of what's ui and ux and how it works,so go for it without a second thought !
    Mockups has are really good explanation to reve up our interest in this field
  • Profile image for Mahdyr Ebrahimi
    Mahdyr Ebrahimi
    This course covers UI/UX design fundamentals, from wireframing to mockups and final designs in Figma. The instructor is clear and concise, and the video tutorials are helpful and practical.
  • Amee Mineshkumar Patel
    Its was good but I really love if they have quize and assignment. And after that certificate will be provided as a proof that we have learnt something and applied it too
  • G SUBASHINI
    Nice one .It help me to learn some basic concept about ui ux designing it is most welcoming course . I suggest everyone to go through the course.thanks for providing this.
  • Profile image for Aroosha Irfan
    Aroosha Irfan
    Amazing course. Through this course I'm able to learn new things which i never knew.
    I'm very happy with learning new skills from your site. I recommend this course to everyone

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.