К содержимому
learnspaceYOUR NEXT CHAPTER
ПРОСТРАНСТВО ОБУЧЕНИЯ
ГлавнаяКаталог курсовМоё обучениеCoursera

Знания без границ

Учитесь у лучших университетов и компаний мира.

Открыть Coursera
Интеграция
Пространство университета
Моё пространствоСтраница курса
↵
ЯЛичный кабинетСтудент
© 2026 LearnSpaceКаждый день — возможность узнать больше.Помощь
Master Web & Mobile Design – Figma & UI/UX Basics · LearnSpace
Назад в каталог
courseraПрограммирование

Master Web & Mobile Design – Figma & UI/UX Basics

Курс от Packt
Начальный≈ 24.6 чАнглийский
О курсеНавыкиПрограммаПреподаватели

О курсе

This course features Coursera Coach! A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress. In the Master Web & Mobile Design: Figma & UI/UX Basics course, you’ll learn to create stunning web and mobile designs using Figma. Start with the basics, mastering Figma’s tools, wireframing, and UI/UX principles. You’ll explore typography, color selection, icon usage, and design structure. As you progress, you'll dive into advanced features like auto-layout, components, and prototyping, enabling you to design responsive, interactive apps. Real-world projects, including a food delivery app, music app, and DIY app, will help you build a solid portfolio. Perfect for aspiring designers, hobbyists, and anyone interested in learning UI/UX design, this course provides the skills to design polished, user-friendly interfaces in Figma. By the end of the course, you’ll have mastered essential design techniques and be able to create and prototype mobile and web apps confidently.

Навыки, которые вы освоите

Figma (Design Software)Interactive DesignUser Interface and User Experience (UI/UX) DesignResponsive Web DesignAnimationsUI ComponentsPrototypingTypographyWireframingLayout DesignUser Interface (UI)Collaborative SoftwareUser Experience DesignUser Interface (UI) DesignGraphic and Visual DesignMobile DevelopmentApplication DesignWeb DesignUser ExperienceUI/UX Strategy

Программа курса

29 модулей · 169 учебных материалов

01Introduction7 материалов

Introduction

Introduction: Master Web & Mobile Design: Figma, UI/UX Essentials, +MoreВидеоFull Course ResourceЧтениеFrom Zero to Figma Hero: Your Step-by-Step GuideВидеоFigma to Code Design Stunning Interfaces Without Writing a LineВидео

Учитесь у экспертов

Packt - Course Instructors

Преподаватель курса

Master Web & Mobile Design – Figma & UI/UX Basics
В каталоге вашей программы

Инвестируйте в себя

Новые знания — в удобное для вас время.

Начать на Coursera

Обучение откроется на Coursera
в новой вкладке

Обучение на Coursera

≈ 24.6 ч

29 модулей

Язык: Английский

Субтитры: Арабский, Французский, Итальянский, Корейский, Индонезийский, Испанский, Японский

Часть программы вашего университета
UI vs. UX in Figma Design Magic ExplainedВидео
Build Apps & Websites You'll Love (In This Figma Course)Видео
Learn UX Briefs & Task Flows in FigmaВидео
02Wireframing: Fundamentals and Best Practices4 материалов

Wireframing: Fundamentals and Best Practices

Lo-Fi vs Hi-Fi Wireframes Design ShowdownВидеоFrames & Design File in Figma Design (Interface)ВидеоUnderstanding Wireframes and Figma FramesDIALOGUEWireframing: Fundamentals and Best Practices - AssessmentЗадание
03Mastering Typography, Color, and Icons14 материалов

Mastering Typography, Color, and Icons

Figma Text Tool and FontsВидеоFigma Basics How To CREATE And MODIFY SHAPESВидеоHow to Choose and use Colors in FigmaВидеоStrokes & Updating Default Properties in FigmaВидеоWhat is Object Editing Mode & How to Use It! In FigmaВидеоHow to Use The Scale Tool And Selection in FigmaВидеоFigma Groups and Frames for Better UI DesignsВидеоProject 1: From Sketch to Reality: Wireframing Your Design in FigmaВидеоBest Free Icon Set Packs for UI/UX DesignersВидеоIcon Basics In FigmaВидеоHow To Install And Use Plugins in FigmaВидеоProject 2: Mastering the Toolbox: Icons & Plugins for Powerful Figma DesignsВидеоCreating a Basic Figma WireframeDIALOGUEMastering Typography, Color, and Icons - AssessmentЗадание
04Creating Pages in Figma3 материалов

Creating Pages in Figma

How To Create And Use Pages In Your Figma FileВидеоUnderstanding and Using Pages in FigmaDIALOGUECreating Pages in Figma - AssessmentЗадание
05Introduction to Prototyping in Figma: A Beginner's Guide6 материалов

Introduction to Prototyping in Figma: A Beginner's Guide

Figma Prototyping for BeginnersВидеоFigma Prototyping & Transitions (Easing)ВидеоFigma Testing Prototype with Figma MirrorВидеоProject 3: Mobile Design Magic: Showcase Your App in FigmaВидеоExploring Multiverse Operator in UI PrototypingDIALOGUEIntroduction to Prototyping in Figma: A Beginner's Guide - AssessmentЗадание
06Figma Animation Basics4 материалов

Figma Animation Basics

Figma Smart Animate for BeginnersВидеоProject 4: Breathe Life into Your Design: Creating Smart Animations in FigmaВидеоUnderstanding Element Transition Animations in FigmaDIALOGUEFigma Animation Basics - AssessmentЗадание
07Collaborate with Others: Sharing, Commenting, and Editing in Figma4 материалов

Collaborate with Others: Sharing, Commenting, and Editing in Figma

Sharing & Feedback in Real-Time with FigmaВидеоFigma Collaborate in Real-Time with MultiplayerВидеоUnderstanding and Using Figma Team Collaboration FeaturesDIALOGUECollaborate with Others: Sharing, Commenting, and Editing in Figma - AssessmentЗадание
08The Ultimate Guide to Creating Moodboards in Figma5 материалов

The Ultimate Guide to Creating Moodboards in Figma

What Are Mood Boards & The SECRET To Finding Inspiration For Web & App DesignВидеоHow To Create A Mood Board In FigmaВидеоProject 5: Inspiration Station: Building a Moodboard in FigmaВидеоUnderstanding and Creating Moodboards for UX DesignDIALOGUEThe Ultimate Guide to Creating Moodboards in Figma - AssessmentЗадание
09Mastering Columns & Grids in Figma3 материалов

Mastering Columns & Grids in Figma

Create a Responsive Grid System for Web & UI DesignВидеоUnderstanding Layout Grids in Figma for UX DesignDIALOGUEMastering Columns & Grids in Figma - AssessmentЗадание
10The Ultimate Guide to Using Colors in Figma8 материалов

The Ultimate Guide to Using Colors in Figma

How to Choose Colors (Color Inspiration)ВидеоHow I Make UI Color Palettes In FigmaВидеоHow To Create Gradients in FigmaВидеоCreating a Color System in FigmaВидеоEasiest Way to Generate Color Palette in Figma (Using Plugins)ВидеоProject 6: Colors, Styles, and Grids in Action!ВидеоUnderstanding Color Extraction and Application in Design ToolsDIALOGUEThe Ultimate Guide to Using Colors in Figma - AssessmentЗадание
11Mastering Text and Fonts in Figma9 материалов

Mastering Text and Fonts in Figma

Best Practices for Choosing Fonts and Font Pairing in UI and Web DesignВидеоCreate the Perfect Typography Scale for UI & Web ProjectsВидеоFastest Way to Create Text Styles in FigmaВидеоHow to Add Lorem Ipsum Text in FigmaВидеоUseful Text Tips & Tricks in FigmaВидеоHow to Add Fonts in Figma and How To Add Missing Fonts in FigmaВидеоProject 7: Textpertise: Mastering Text Styles in FigmaВидеоExploring Fonts and Typography in DesignDIALOGUEMastering Text and Fonts in Figma - AssessmentЗадание
12Figma's Drawing Tools4 материалов

Figma's Drawing Tools

Figma Pen Tool Basics & Vector NetworksВидеоWhy Are the Apple Icons Different (Corner Smoothing)ВидеоMastering Figma's Pen, Pencil, and Corner Smoothing ToolsDIALOGUEFigma's Drawing Tools - AssessmentЗадание
13Figma Essentials: Working with Boolean Operations6 материалов

Figma Essentials: Working with Boolean Operations

Figma Boolean Operations (Union, Subtract, Intersect, Exclude)ВидеоFigma's Power Duo: When to Use Union and When to FlattenВидеоProject 08: Homepage & Burger Menu Design in FigmaВидеоHow to Use Smart Selection and Tidy Up in FigmaВидеоUnderstanding Boolean Operations in FigmaDIALOGUEFigma Essentials: Working with Boolean Operations - AssessmentЗадание
14Figma Essentials: Working with Images and Assets6 материалов

Figma Essentials: Working with Images and Assets

Placing Images in FigmaВидеоFigma Masks (Mask Image and Text in Figma)ВидеоFigma Images Plugins for UI/UX DesignersВидеоProject 9: Image Alchemy: Mastering Images & Plugins in FigmaВидеоImporting and Masking Images in FigmaDIALOGUEFigma Essentials: Working with Images and Assets - AssessmentЗадание
15Figma Essentials: Mastering Auto Layout and Constraints8 материалов

Figma Essentials: Mastering Auto Layout and Constraints

Auto Layout And Constraints in FigmaВидеоFigma Auto Layout Space Between ObjectsВидеоFigma Constraints & Resizing Made SIMPLEВидеоNest Frames, Auto Layout And Constraints in FigmaВидеоAdvanced Auto Layout Techniques - FigmaВидеоProject 10: Design That Adapts: Creating Responsive Layouts in FigmaВидеоDesigning Responsive Buttons and Layouts in FigmaDIALOGUEFigma Essentials: Mastering Auto Layout and Constraints - AssessmentЗадание
16Figma Essentials: Working with Effects5 материалов

Figma Essentials: Working with Effects

How to Make Beautiful Shadows - UI Design with FigmaВидеоHow to Create Background Blur and Layer Blur in FigmaВидеоProject 11: Let's Add Shadows, Blurs, and Squishy Buttons!ВидеоUnderstanding Drop Shadows and Inner Shadows in FigmaDIALOGUEFigma Essentials: Working with Effects - AssessmentЗадание
17Figma Essentials: Understanding Saving and Version History3 материалов

Figma Essentials: Understanding Saving and Version History

How To Save Your Figma Files To Desktop and How To Access Figma File's HistoryВидеоUnderstanding Version History and Local Saving in FigmaDIALOGUEFigma Essentials: Understanding Saving and Version History - AssessmentЗадание
18Figma Essentials: Understanding Components and Creating Instances8 материалов

Figma Essentials: Understanding Components and Creating Instances

Figma Components - The BasicsВидеоUpdate, Change, Edit, and Reset Components In FigmaВидеоDeleting Main Components in Figma is Impossible (Tips & Tricks of Components)ВидеоMoving Main Components and How to Organize Your ComponentsВидеоFigma Best Practices: Name Layers & Stay OrganizedВидеоProject 12: Building Blocks: Mastering Components in FigmaВидеоUnderstanding and Creating Figma ComponentsDIALOGUEFigma Essentials: Understanding Components and Creating Instances - AssessmentЗадание
19Figma Essentials: Exploring the Power of Variants5 материалов

Figma Essentials: Exploring the Power of Variants

Figma Components and Variants for BeginnersВидеоFigma Component PropertiesВидеоProject 13: Variant Power: Supercharge Your Design with VariantsВидеоUnderstanding Variants and Variables in FigmaDIALOGUEFigma Essentials: Exploring the Power of Variants - AssessmentЗадание
20Figma Essentials: Mastering Input Form Design and Functionality5 материалов

Figma Essentials: Mastering Input Form Design and Functionality

How to Design an Interactive Input Field in FigmaВидеоProject 14: Account & Category Mastery: Designing for User Flow in FigmaВидеоHow to Design a Notification UI Design in FigmaВидеоBuilding Dynamic Forms and Notification Pages with Figma Components and VariantsDIALOGUEFigma Essentials: Mastering Input Form Design and Functionality - AssessmentЗадание
21Advanced Prototyping Techniques in Figma9 материалов

Advanced Prototyping Techniques in Figma

How to Add Popup Overlays in FigmaВидеоHow to Create a TOOLTIP (Hover to Show Text) Component in FigmaВидеоHow to Create Multiple Prototypes & Create Separate Flows on One Figma PageВидеоPrototyping Overlay Transitions in FigmaВидеоProject 15: Pop Up & Flow Like a Pro: Prototyping Interactions in FigmaВидеоSticky Scroll in FigmaВидеоHow to Create Auto Scrolling Animation in FigmaВидеоCreating and Managing Overlays in Figma PrototypesDIALOGUEAdvanced Prototyping Techniques in Figma - AssessmentЗадание
22Figma Essentials: Working with Teams and Project Management3 материалов

Figma Essentials: Working with Teams and Project Management

The Difference Between Teams, Projects and PagesВидеоUnderstanding Figma Teams, Projects, and FilesDIALOGUEFigma Essentials: Working with Teams and Project Management - AssessmentЗадание
23Figma Essentials: Understanding and Using Libraries3 материалов

Figma Essentials: Understanding and Using Libraries

Figma Create a Shareable Team LibraryВидеоUnderstanding Figma Team Libraries and ComponentsDIALOGUEFigma Essentials: Understanding and Using Libraries - AssessmentЗадание
24Animation and Micro Interactions in Figma11 материалов

Animation and Micro Interactions in Figma

Animation vs Micro Interaction in FigmaВидеоAmazing Button Animations in FigmaВидеоProject 16: Add To Cart Button AnimationВидеоProject 17: Dark Mode and Light ModeВидеоProject 18: Pocket-Sized Perfection: Design an iPhone Product Page & CartВидеоMicro Animations Using Interactive Components in FigmaВидеоFigma Prototype Easing & Spring AnimationsВидеоPulsing Animation in FigmaВидеоProject 19: The Final Click: Finishing Your Clickkart App Design in FigmaВидеоDesigning Micro Interactions and Animations in FigmaDIALOGUEAnimation and Micro Interactions in Figma - AssessmentЗадание
25Figma Thumbnails3 материалов

Figma Thumbnails

How Do I Set a Project Thumbnail or Cover in FigmaВидеоCreating and Customizing Thumbnails in FigmaDIALOGUEFigma ThumbnailsЗадание
26Master Figma Export: A Step-by-Step Guide5 материалов

Master Figma Export: A Step-by-Step Guide

How to Export Your Figma Design as Image (PNG, JPG, SVG, PDF)ВидеоHow to Hand Off Your UX Designs Like a ProВидеоIntroduction to Design Systems, Resources, and InspirationsВидеоUnderstanding Image Export Formats and Settings in FigmaDIALOGUEMaster Figma Export: A Step-by-Step Guide - AssessmentЗадание
27Decoding User Minds: The Psychology Behind Effective UI/UX Design8 материалов

Decoding User Minds: The Psychology Behind Effective UI/UX Design

10 Psychological Principles for Powerful UX DesignВидеоLeveraging Psychology for Personalized User Experiences: A Case StudyВидеоColor Psychology in UI/UX DesignВидеоThe Happiness Paradox: Understanding Hedonic Adaptation in UI/UX DesignВидеоThe Dopamine Effect in UI/UX DesignВидеоThe Power of Sound: How Audio Shapes User Experience (UX) PsychologyВидеоUnderstanding Key Psychological Principles in UX DesignDIALOGUEDecoding User Minds: The Psychology Behind Effective UI/UX Design - AssessmentЗадание
28Let's Build Real World UI/UX Projects7 материалов

Let's Build Real World UI/UX Projects

Intro - Real World Projects With FigmaВидеоReal World UI/UX Project 2: StayWaveВидеоReal World UI/UX Project 3: Food Delivery AppВидеоReal World UI/UX Project 4: Music AppВидеоReal World UI/UX Project 5: DIYВидеоDesigning a User-Friendly Food Delivery AppDIALOGUELet's Build Real World UI/UX Projects - AssessmentЗадание
29Next Steps and Thank You: Your Figma Learning Path3 материалов

Next Steps and Thank You: Your Figma Learning Path

Figma for UI/UX Design: You've Graduated! (What's Next)ВидеоFull Course Practice AssessmentЗаданиеFull Course AssessmentЗадание