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

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

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

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

Figma for UI/UX: Master Web Design in Figma

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

О курсе

Updated in May 2025. This course now 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 through the course. Unlock the full potential of Figma and become a proficient UI/UX designer with this comprehensive course. You'll start by exploring Figma’s essential tools, comparing it with other design software, and creating your first website design. As you progress, you’ll dive into advanced design techniques, including color theory, typography, effects, and component-based workflows. Through hands-on projects, you’ll design complete web layouts, mastering elements like headers, navigation menus, cards, and footers. You’ll also explore responsive design principles, ensuring your designs look great on any device. Additionally, you’ll gain insights into the freelancing world, learning how to build a portfolio and attract clients. By the end of the course, you’ll be equipped to bring your designs to life by preparing them for developers. You'll understand how to optimize your workflow with tools like Zeplin and how to deliver production-ready files. Whether you're an aspiring UI/UX designer or a freelancer looking to expand your skills, this course will guide you from beginner to expert.

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

Figma (Design Software)Web DesignLayout DesignUser Interface and User Experience (UI/UX) DesignUser Interface (UI) DesignDesign Elements And PrinciplesUI ComponentsResponsive Web DesignTypographyE-CommerceUser ExperienceUser Experience DesignUsabilityPrototypingUser Interface (UI)

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

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

01Introduction to the Course17 материалов

Introduction to the Course

IntroductionВидеоFull Course ResourcesЧтениеWhat is Figma and is it better than other design programs?ВидеоYour first website designВидео

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

Packt - Course Instructors

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

Figma for UI/UX: Master Web Design in Figma
В каталоге вашей программы

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

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

Начать на Coursera

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

Обучение на Coursera

≈ 18.2 ч

10 модулей

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

Субтитры: Казахский

Часть программы вашего университета
Solving your first website designВидео
How to get help fastВидео
The welcome screen in FigmaВидео
Getting started with FigmaВидео
Best ways to move around in FigmaВидео
Exercise: how to move elements aroundВидео
Exercise: How to move elements aroundВидео
Solving the exercise and a few pro tipsВидео
Discover Figma's interface & why professionals use itВидео
Contest 1: Your own mini websiteВидео
Editing icons: Colors & sizeВидео
Here's why so many beginners give upВидео
ConclusionsВидео
02Discover the Most important Things about Figma18 материалов

Discover the Most important Things about Figma

IntroductionВидеоThe biggest difference in Figma versus other programsВидеоHere's how you create buttons in FigmaВидеоThe basics of working with colorВидеоHow to work with color like a proВидеоHow to add images: frames vs rectanglesВидеоCreate a gallery / collage in FigmaВидеоHere are the 3 types of text in FigmaВидеоDiscover the properties of text layersВидеоHow to work with text like a proВидеоEffects in Figma: Blur, shadows & moreВидеоEverything you need to know about gridsВидеоAn overview of componentsВидеоHow to mask in FigmaВидеоHere's what makes you a good web designerВидеоConclusionsВидеоImproving Web Design with Figma StylesDIALOGUEDiscover the Most important Things about Figma - AssessmentЗадание
03First Web Design Project17 материалов

First Web Design Project

IntroductionВидеоSet up the desktop version the correct wayВидеоCreate the headerВидеоCreate the main menuВидеоSet up the search boxВидеоCreate a dropdown menuВидеоCreate the most important item – the cardВидеоHow to improve the cardsВидеоSet up the secondary navigationВидеоCreate the paginationВидеоCreate the foundation for the footerВидеоAdding content in the footerВидеоHow to handle visual imperfectionsВидеоHere's what you need to rememberВидеоContest 2: Your own blog designВидеоMastering Pixel-Perfect Design in FigmaDIALOGUEFirst Web Design Project - AssesmentЗадание
04Freelancing16 материалов
Discover what freelancing is REALLY all aboutВидеоWithout this skill, you can't succeed!ВидеоBest and worst way to get started as a freelancerВидеоHow to set up your freelancing profileВидеоThe truth about freelancing platforms: Upwork, Freelancer, FiverrВидеоCrowdsourcing revealed: The pros and consВидеоPoll: What are your goals?ВидеоDon't go on 99designs before you watch this!ВидеоRevealed: Coding and Photoshop vs Adobe XD vs FigmaВидеоHere's how to start a portfolio and get clientsВидеоThe importance of your mindsetВидеоIs the competition too difficult on 99designs?Видео9 tools for working longer: Fix eye, back, neck painВидеоImprove your mood & concentrationВидеоScaling Your Freelancing BusinessDIALOGUEFreelancing - AssessmentЗадание
05Prototype for real world projects12 материалов

The First Key to Great Web Design

What Nobody Tells You About PrototypingВидео Reference Image 2026 BunВидеоPrototyping Is Essential but Has One Major FlawВидеоUse Prototyping to Find Mistakes and FlawsВидеоOverlays in Your Prototypes (Pop Ups)ВидеоTimers in PrototypesВидеоScrolling in PrototypesВидеоPrototype Smarter with This MethodВидеоMaking an Interactive DropdownВидеоFinal Exercise - Make a Complete PrototypeВидеоSpotting Execution Mistakes in Web DesignDIALOGUEThe First Key to Great Web Design - AssessmentЗадание
06The Second Key to Great Web Design20 материалов

The Second Key to Great Web Design

IntroductionВидеоWhat's the Point of the Website?ВидеоThe User Versus the Business OwnerВидеоAnalytics in Web DesignВидеоTemplates and Website Builders – The Web Designer's Death?ВидеоCase Study: Four Versions of the Same WebsiteВидеоEcommerce Homepage LayoutВидеоEcommerce Product DetailsВидеоEcommerce CheckoutВидеоWhy Aren't Websites Perfect?ВидеоCase Studies: The Client's NeedsВидеоLanding Page Versus a WebsiteВидеоLead Generation in Landing PagesВидеоWhy Landing Pages Have a Bad ReputationВидеоDigital Product Landing PageВидеоTesting Landing PagesВидеоCase Study: My Landing PageВидеоFinal Thoughts about the Client's NeedsВидеоUnderstanding Client Needs in Web DesignDIALOGUEThe Second Key to Great Web Design - AssessmentЗадание
07The Third Key to Great Web Design11 материалов

The Third Key to Great Web Design

IntroductionВидеоWhat's UX?ВидеоThe Best Example of Good UX and Attention to DetailВидеоImprove the Checkout Process to Double SalesВидеоImprove the Mobile Version to Double SalesВидеоSeven Website Tweaks that Show Attention to DetailВидеоUpgrading the Mobile Product PageВидеоDoing 1-on-1 Sessions with a CoderВидеоHere's What You Need to RememberВидеоMastering Attention to Detail in UX DesignDIALOGUEThe Third Key to Great Web Design - AssessmentЗадание
08Redesign an Ecommerce Business28 материалов

Redesign an Ecommerce Business

The Most Important Question When Starting a New ProjectВидеоHow to Research/Find Inspiration for Your ProjectВидеоSet Up the Foundation of the ProjectВидеоCreate the Top BarВидеоSet Up the HeaderВидеоDecide on a Styling for the HeaderВидеоCreate the Most Important Part – The Hero AreaВидеоCreate the Secondary Navigation – Product CategoriesВидеоHere's Where Sales Are Made…Or Not!ВидеоCreate the First Version of the CardВидеоSet the Style for the CardВидеоFinishing Touches for the Card DesignВидеоDon't Forget about This Important Detail!ВидеоCreate the FAQ SectionВидеоHere's Why Auto-Layout Is AwesomeВидеоCreate a Newsletter Sign Up FormВидеоSet Up the Footer's FoundationВидеоFinishing the FooterВидеоExplore Variations and Improve Your DesignВидеоHow to Approach the Interior PagesВидеоSet the Top Area for the Product's PageВидеоAdding Content to the Product's PageВидеоHow to Add Clear Calls to Action for VisitorsВидеоMain Content AreaВидеоCreate a Table for the SidebarВидеоConclusionsВидеоRedesigning a Website for a Healthy Snack BusinessDIALOGUERedesign an Ecommerce Business - AssessmentЗадание
09Responsive Design: From Desktop to Mobile12 материалов

Responsive Design: From Desktop to Mobile

Introduction to the Mobile VersionВидеоHow to Start the Mobile Version for the HomepageВидеоCreate the Header for the Mobile VersionВидеоHow to Rearrange the Hero AreaВидеоSet Up the Card for the Grid of ProductsВидеоDon't Skip This Step When Creating Product CardsВидеоArrange the FAQ Section for the Mobile VersionВидеоRecreate the Newsletter in a Narrow SpaceВидеоCreate the Footer for the Mobile VersionВидеоConclusionsВидеоUntitledDIALOGUEResponsive Design: From Desktop to Mobile - AssessmentЗадание
10Discover How the Design Gets Transformed to the Live Version10 материалов

Discover How the Design Gets Transformed to the Live Version

Preparing the Design for CodingВидеоZeplin - The Missing Link!ВидеоHow to Set Up the Project for the Coder/ClientВидеоServer-Side Content and Multi-Layer GraphicsВидеоHere's What Developers Want from Your DesignВидеоHere's Why It's Essential You Deliver What's NeededВидеоFinal Thoughts and What's NextВидеоDiscover How the Design Gets Transformed to the Live Version - AssessmentЗаданиеFull Course Practice AssessmentЗаданиеFull Course AssessmentЗадание