Free Course Image UI/UX Design

Free online courseUI/UX Design

Duration of the online course: 11 hours and 42 minutes

New

Build job-ready UI/UX skills with this free course: design clean interfaces, responsive layouts, and polished Figma prototypes that impress recruiters.

In this free course, learn about

  • UI/UX career roadmap: how to start, learn, specialize, and grow as a designer
  • Core UI design principles: hierarchy, contrast, alignment, spacing, balance, consistency
  • Common UI mistakes to avoid: color misuse, poor shadows, clutter, weak typography, bad spacing
  • Designing effective components: buttons (tap targets), cards, tables, dashboards, landing pages
  • Applying visual systems: grids, responsive breakpoints, golden ratio, bento grid layouts
  • Figma Auto Layout mastery: responsive sizing, pinning, wrapping, and positioning exceptions
  • Responsive design workflows in Figma: constraints, breakpoints plugins, and responsive typography
  • Advanced Figma prototyping: interactions, sticky scroll, scrolling areas, menus, carousels, charts
  • Using Figma Variables & State Management for dynamic UI, visibility toggles, and dropdown logic
  • Animation techniques in Figma: smooth transitions, text/typewriter, icon/menu, 3D/isometric
  • Tooling & ecosystem: Figma Dev Mode, key updates, plugins (background remove, accessibility)
  • Design resources & inspiration: illustration sources, storytelling in UI, and Dribbble pitfalls
  • Portfolio and interview skills: case studies, design challenges, and presenting decisions
  • From design to web build: Wix Studio basics, interactions, CMS, and Figma-to-Wix responsive setup

Course Description

Great digital products feel effortless, but that ease is the result of deliberate UI/UX decisions: clear hierarchy, consistent components, accessible color choices, and interactions that guide people to the next step. This free UI/UX Design course helps you build that decision-making muscle, taking you from beginner-friendly foundations to practical workflows used in real teams. You will strengthen your eye for detail and learn how to think like a designer who balances beauty, usability, and business goals.

Along the way, you will learn to avoid the subtle interface mistakes that reduce clarity or trust, and instead create screens that communicate instantly through spacing, typography, contrast, and visual rhythm. You will practice designing the UI elements that define most products such as buttons, cards, landing pages, dashboards, tables, and navigation patterns, with an emphasis on consistency and conversion. You will also explore proportion and composition techniques that help layouts feel naturally balanced, so your designs look intentional rather than accidental.

Figma is used as a hands-on environment to translate principles into execution. You will work with modern features that speed up production and improve scalability, including Auto Layout, variables, responsive behaviors, breakpoints, sticky scrolling, and newer prototyping capabilities such as state management. By practicing motion and interaction patterns, you will be able to create prototypes that demonstrate not just how an interface looks, but how it behaves, which is critical for presenting work to stakeholders and standing out in interviews.

The course also addresses the reality of a fast-changing design landscape. You will look at helpful plugins, mockup options, and emerging AI-assisted workflows, while learning how to evaluate inspiration sources critically and keep your craft grounded in user needs. If your goal is a portfolio that communicates skill, process, and impact, this course supports you in building work that feels modern, responsive, and credible, whether you are aiming for your first UI/UX role or upgrading your current design toolkit.

Course content

  • Video class: How to Become a UI/UX Designer in 2023? | A Beginner's Guide 07m
  • Exercise: Why is it important to specialize in either UI or UX design rather than trying to master both simultaneously?
  • Video class: UI Design Principles | Everything You Need To Know 05m
  • Exercise: Which UI design principle is essential for creating an effective user interface by using colors, sizes, and shapes?
  • Video class: 10 UI Design Mistakes to Avoid 08m
  • Exercise: What is a common mistake in UI design concerning color usage?
  • Video class: How to Design Great Buttons in Figma? | UI Design 06m
  • Exercise: What is the minimum recommended height for a mobile button?
  • Video class: Adobe Buys Figma – Is It the End of Figma? 02m
  • Exercise: What is a possible benefit of Adobe acquiring Figma?
  • Video class: Figma Tutorial: Auto Layout | Master Auto Layout in 15 Minutes 15m
  • Exercise: What is the main feature of Figma's Auto Layout?
  • Video class: Create a Modern Glassmorphism Card in 4 Minutes | Figma Tutorial 04m
  • Exercise: What is the main purpose of using a background blur effect when designing a glass morphism card?
  • Video class: Level Up Your UI Design by Avoiding These 5 Mistakes 03m
  • Exercise: What is a common UI design mistake related to shadow use?
  • Video class: 5 Essential Tips to Design High-Converting Landing Pages 07m
  • Exercise: What is the primary purpose of a landing page in an online business?
  • Video class: Responsive Design in Figma Using Breakpoints 04m
  • Exercise: What is the purpose of the 'breakpoints' plugin in web design?
  • Video class: Penpot Tutorial - The Open Source Figma Alternative 21m
  • Exercise: What is a unique feature of Penpod that differentiates it from other design platforms?
  • Video class: Make Your Web Design Responsive in 10 Minutes | Figma Tutorial 11m
  • Exercise: How can you make a logo stay in the top left corner of a responsive design in Figma?
  • Video class: Animate Text in Figma Like a Pro | Figma Tutorial 05m
  • Exercise: In creating advanced text animations in Figma, what is the purpose of using frame selections?
  • Video class: Amazing Illustrations for UI Designers | UI/UX Design Resources 04m
  • Exercise: Which website offers a feature to preview illustrations within the site itself?
  • Video class: How to Design a Modern Dashboard UI in Figma - Full Course 47m
  • Exercise: When designing a dashboard UI in Figma, what is a recommended first step to ensure a consistent layout?
  • Video class: Apple's Website Animation in Figma | Beginner Tutorial 04m
  • Exercise: How can one achieve a smooth transition effect for a landing page animation in Figma?
  • Video class: The Golden Ratio in UI Design 03m
  • Exercise: How can the golden ratio be applied to UI design to create a balanced layout?
  • Video class: Why Should UI/UX Designers STOP Using Dribbble? 04m
  • Exercise: What is a potential drawback of using Dribble for design inspiration?
  • Video class: How to Grow as a UI Designer in 2024 | The Ultimate Guide 06m
  • Exercise: Which of the following is an essential practice for improving your UI design skills?
  • Video class: The Power of Storytelling in UI Design (Real Examples) 07m
  • Exercise: How can storytelling enhance UI design?
  • Video class: How to Ace Your UI/UX Design Interview | The Ultimate Guide 05m
  • Exercise: What is the primary purpose of a design challenge during a UI/UX design interview process?
  • Video class: Create a Responsive Grid System for Web 12m
  • Video class: Create an Animated Slide Menu in Figma 07m
  • Exercise: What technique is used in Figma to create a transition effect for icons and menus in the design described above?
  • Video class: Exposing my UI/UX DESIGN AUDIT Formula: 5 Critical Steps to Follow 03m
  • Video class: The BEST Way To Design Stunning UI Cards | UI/UX Design 05m
  • Exercise: In UI card design, what is considered an essential component for effectively guiding users' attention according to the principles described?
  • Video class: UI/UX Design Made Easy: Using AI Art, Midjourney and ChatGPT 05m
  • Video class: Create an Animated Image Carousel | Figma Tutorial 09m
  • Exercise: What is essential for successfully implementing a drag animation in an image carousel within a UI design tool?
  • Video class: 5 UI Design Mistakes That Will Cost You The Job 03m
  • Video class: 10 Must-Have Figma Plugins for UI/UX Designers (2023) 03m
  • Exercise: Which Figma plugin is used to remove backgrounds from images directly within the Figma environment?
  • Video class: How to Create Your UI/UX Design Portfolio? | Beginner's Guide 20m
  • Video class: Create an Animated Notification in 8 Minutes | Figma Tutorial 08m
  • Exercise: What is a crucial step when setting up a drag interaction in Figma to animate a component?
  • Video class: Advanced Typewriter Animation in Figma 08m
  • Video class: Best Mockup Tools for UI/UX Designers (2024) 02m
  • Exercise: Which tool mentioned is specifically designed to create 3D product mockups and animations?
  • Video class: 10 Figma Updates You Don't Want to Miss (2023) 04m
  • Video class: Figma Tutorial: Master Sticky Scroll in 8 Minutes 08m
  • Exercise: Which feature allows designers to keep certain UI elements visible at the top of the screen while scrolling in Figma?
  • Video class: Top AI Tools For UI/UX Designers in 2023 05m
  • Video class: Create an Animated Card Grid in 10 Min | Figma Tutorial 11m
  • Exercise: Which of the following actions allows you to move an illustration to any position within a Figma frame that uses Auto Layout?
  • Video class: AirPods Pro Animation in Figma | Beginner Tutorial 11m
  • Video class: Design a Responsive Table in Figma Using Auto Layout (2024) 10m
  • Exercise: What is the primary reason for setting the width of the main table frame to a fixed width initially in a responsive design using Figma?
  • Video class: Figma Tutorial: Master The Figma Pen Tool (2024) 08m
  • Video class: I Animated a 3D Render in Figma in 10 Minutes (Step-by-Step Tutorial) 11m
  • Exercise: What is an efficient method for animating a sequence of images in Figma without compromising image quality?
  • Video class: Figma Carousel Animation in 8 Minutes 08m
  • Video class: State Management in Figma (New Prototyping Feature) | Figma Tutorial 05m
  • Exercise: What is a key benefit of using the new State Management feature in Figma for prototyping?
  • Video class: Animate Charts in Figma Like a Pro | Figma Tutorial 04m
  • Video class: Figma Auto Layout Updates (2023) | Figma Tutorial 07m
  • Exercise: Which feature in Figma allows elements within an auto layout to wrap into a new line if there's not enough space available?
  • Video class: Figma Tutorial: Use Figma Variables Like a Pro ( Practice File) 30m
  • Video class: New Course: UI Design 03m
  • Exercise: What is one of the primary benefits of learning UI design principles?
  • Video class: Export Figma Animations with a Single Click | Figma Tutorial 07m
  • Video class: Make Your Web Design Responsive Using Variables | Figma Tutorial 15m
  • Exercise: Which of the following types of variables is most suitable for managing the visibility state of a UI component in responsive design?
  • Video class: Figma Tutorial: Master Figma Dev Mode in 8 Minutes 08m
  • Video class: 4 Figma Variables Updates You Probably Overlooked | Figma Tutorial 05m
  • Exercise: What is the purpose of the color scoping update in Figma?
  • Video class: Wix Studio Crash Course for Beginners 2024 21m
  • Video class: Horizontal and Vertical Scroll in Figma | Figma Tutorial 07m
  • Exercise: What is the essential step required to make a section scrollable in Figma?
  • Video class: Master Wix Studio Animations and Interactions 08m
  • Video class: Figma Tutorial: Advanced Prototyping With Variables ( Practice File) 32m
  • Exercise: What is required to use the advanced prototyping features in Figma as discussed in the course?
  • Video class: If I started UI/UX Design in 2024, I'd Do This! 08m
  • Video class: Top 10 Figma Plugins for UI/UX Designers in 2024 03m
  • Exercise: Which Figma plugin helps in enhancing the accessibility of a design by providing tools like a color contrast checker and vision simulator?
  • Video class: Create a Responsive Bento Grid for Web 11m
  • Video class: Figma to Wix Studio: Build a Responsive Website Step-by-Step 40m
  • Exercise: When using Wick Studio to convert a Figma design into a responsive website, what is the purpose of adjusting the 'responsive behavior' setting for elements like images and buttons?
  • Video class: Multi-edit: New Figma Update (2024) | Figma Tutorial 10m
  • Video class: Animated Dropdown Menu in Figma With Variables | Figma Tutorial 24m
  • Exercise: What is the primary purpose of creating string variables in the process of designing an interactive drop-down menu in Figma?
  • Video class: Full Page Scroll Animation in 10 Minutes | Figma Tutorial 12m
  • Video class: Responsive Typography With Variables | Figma Tutorial 11m
  • Exercise: What feature in Figma allows designers to connect typography variables to different text properties such as font weight and size?
  • Video class: Figma Tutorial: 3D Isometric Animation in 6 Minutes 06m
  • Video class: This Technique Will Make Your Figma Animations 100x Better | Figma Tutorial 07m
  • Exercise: What is a key step to ensure a smooth animation transition when designing card animations?
  • Video class: Create Animated Bento Cards in 9 Minutes | Figma Tutorial ( Practice File) 09m
  • Video class: This Figma Trick Will Make Your Buttons 100x Better | Figma Tutorial 07m
  • Exercise: What is the purpose of creating a gradient in the process of designing an animated glowing button in an interface design tool?
  • Video class: Figma Updates 2024: Figma AI Figma Slides 03m
  • Video class: Wix Studio CMS for Beginners 2024 (Crash Course) 24m
  • Exercise: What is a CMS and how does it benefit web development?

This free course includes:

11 hours and 42 minutes of online video course

Digital certificate of course completion (Free)

Exercises to train your knowledge

100% free, from content to certificate

Ready to get started?Download the app and get started today.

Install the app now

to access the course
Icon representing technology and business courses

Over 5,000 free courses

Programming, English, Digital Marketing and much more! Learn whatever you want, for free.

Calendar icon with target representing study planning

Study plan with AI

Our app's Artificial Intelligence can create a study schedule for the course you choose.

Professional icon representing career and business

From zero to professional success

Improve your resume with our free Certificate and then use our Artificial Intelligence to find your dream job.

You can also use the QR Code or the links below.

QR Code - Download Cursa - Online Courses

More free courses at UX and UI Design

Free Ebook + Audiobooks! Learn by listening or reading!

Download the App now to have access to + 5000 free courses, exercises, certificates and lots of content without paying anything!

  • 100% free online courses from start to finish

    Thousands of online courses in video, ebooks and audiobooks.

  • More than 60 thousand free exercises

    To test your knowledge during online courses

  • Valid free Digital Certificate with QR Code

    Generated directly from your cell phone's photo gallery and sent to your email

Cursa app on the ebook screen, the video course screen and the course exercises screen, plus the course completion certificate