Курс на Stepik
Обложка курса «Веб дизайн в Figma с нуля до результата! Основы UX/UI Web Design» на Stepik
3 590 ₽

Веб дизайн в Figma с нуля до результата! Основы UX/UI Web Design ★ 4.972

Открыть на
STEPIK.ORG

Всё, что нужно, чтобы начать карьеру в веб-дизайне: инструменты, практика, нейросети и поддержка — в курсе-бестселлере с последними обновлениями Figma и актуальными AI-трендами

Показатель Текущие показатели Рост
Значение 🏆 Рейтинг 3 дн 7 дн 30 дн
Количество учеников на курсе «Веб дизайн в Figma с нуля до результата! Основы UX/UI Web Design»Учеников на курсе 4 653
Сертификаты, выданные на курсе «Веб дизайн в Figma с нуля до результата! Основы UX/UI Web Design»Сертификатов выдано 1 036
Отзывы о курсе «Веб дизайн в Figma с нуля до результата! Основы UX/UI Web Design»Отзывов получено 287
Рейтинг курса «Веб дизайн в Figma с нуля до результата! Основы UX/UI Web Design»Рейтинг курса 4.972
Уроки в курсе «Веб дизайн в Figma с нуля до результата! Основы UX/UI Web Design»Количество уроков 130
Тесты в курсе «Веб дизайн в Figma с нуля до результата! Основы UX/UI Web Design»Количество квизов 1
Время прохождения курса «Веб дизайн в Figma с нуля до результата! Основы UX/UI Web Design»Время прохождения курса —
Стоимость курса «Веб дизайн в Figma с нуля до результата! Основы UX/UI Web Design»Стоимость курса 3 590 ₽ —
Обновления курса «Веб дизайн в Figma с нуля до результата! Основы UX/UI Web Design»Обновления курса — —
Дата публикации курса «Веб дизайн в Figma с нуля до результата! Основы UX/UI Web Design»Дата публикации курса — ———
Последнее обновление курса «Веб дизайн в Figma с нуля до результата! Основы UX/UI Web Design»Последнее обновление — ———
Сложность easy — ———

Содержание курса

Разделы в курсе «Веб дизайн в Figma с нуля до результата! Основы UX/UI Web Design» 23 раздела Уроки в курсе «Веб дизайн в Figma с нуля до результата! Основы UX/UI Web Design» 130 уроков Тесты в курсе «Веб дизайн в Figma с нуля до результата! Основы UX/UI Web Design» 1 тест Время прохождения курса «Веб дизайн в Figma с нуля до результата! Основы UX/UI Web Design» 18 ч. Последнее обновление курса «Веб дизайн в Figma с нуля до результата! Основы UX/UI Web Design» обн. 29 сентября 2026

Подготовка к курсу

3 урока
1. Скачиваем материалы ↗
2. Как проходить курс ↗
3. Оставайтесь со мной на связи ↗

Основы Figma

11 уроков
1. Какие размеры у сайта ↗
2. Создаем frame сайта ↗
3. Что такое сетка grid ↗
4. Stretch vs Center Grid ↗
5. Основы работы с Фигурами \ Изображениями \ Слоями ↗
6. Основы работы с текстом ↗
7. Заметка по платным функциям. ↗
8. Группировка слоев и немного про режим презентации ↗
9. Режим презентации и пара горячих клавиш ↗
10. Как сохранять и передавать файлы Figma ↗
11. Разница UX и UI ↗

Работа с цветом

7 уроков
1. Подбор цвета из изображений ↗
2. ПРАКТИКА #1 - Подберите цвет из изображения ↗
3. Что такое HSB. Точная настройка цвета ↗
4. Инструменты подбора цвета для проекта ↗
5. Как работать с градиентом ↗
6. Правило пропорций цвета 60/30/10 ↗
7. ПРАКТИКА #2 - Подберите цвета для сайта ↗

Работа с изображениями

14 уроков
1. Разница растровой и векторной графики ↗
2. Выбирайте качественные изображения ↗
3. Как затемнять изображения ↗
4. Как тонировать изображения ↗
5. ПРАКТИКА #3 - Затонируйте изображение ↗
6. Техника экстремальной обрезки ↗
7. ПРАКТИКА #4 - Экстримальная обрезка ↗
8. Техника мягкой обрезки ↗
9. ПРАКТИКА #5 - Мягкая обрезка ↗
10. Про иконки ↗
11. Как создать свою иконку ↗
12. Как работать с обводкой ↗
13. Функции ИИ для изображений в Figma (платная Figma) ↗
14. Используйте сторонние нейросети для изображений ↗

Основы AutoLayOut

2 урока
1. Основы работы с AutoLayout ↗
2. ПРАКТИКА #6 - AutoLayOut ↗

Продвинутая работа с фигурами

7 уроков
1. Как работает инструмент "pen tool" ↗
2. Продвинутая работа с Pen Tool ↗
3. ПРАКТИКА #7 - "Pen tool" ↗
4. Как создавать паттерны ↗
5. Текст по контуру и кисти ↗
6. Разница фреймов и групп ↗
7. Делаем следующую секцию сайта ↗

Отступы в веб дизайне

3 урока
1. Правила отступов в веб дизайне ↗
2. ПРАКТИКА #8 - Отступы в веб дизайне ↗
3. Подводим итоги про отступы ↗

Эффекты и стили

3 урока
1. Как работают стили ↗
2. Создаем следующую секцию сайта ↗
3. Как работают эффекты ↗

Маски и плагины

7 уроков
1. Как работают маски ↗
2. Дополнительная практика по маскам ↗
3. Делаем следующую секцию ↗
4. Как работают плагины ↗
5. Что такое Figma Community ↗
6. Создаем Footer Сайта ↗
7. Доделываем сайт ↗

Работа со шрифтами

7 уроков
1. Важность шрифтов ↗
2. Типы шрифтов ↗
3. Где брать новые шрифты ↗
4. Как подбирать шрифты ↗
5. ПРАКТИКА #9 - Подберите шрифты ↗
6. Настройки шрифта ↗
7. ПРАКТИКА #10 - Настройка шрифта ↗

Подготовка к новому проекту

6 уроков
1. Как создать обложку проекта ↗
2. Бриф с заказчиком ↗
3. ПРАКТИКА #11 - Travel Project ↗
4. Как создавать mood board ↗
5. Что такое Wireframe сайта ↗
6. Обзор функций ИИ в Figma (платная Figma) ↗

Дизайн система

6 уроков
1. Нужен ли дизайнеру Photoshop ↗
2. Как приобрести лицензионный фотошоп из России ↗
3. Что такое дизайн система ↗
4. Делаем лист стилей ↗
5. Исправляю небольшую проблему со стилями ↗
6. ПРАКТИКА #12 - Создайте свою дизайн систему ↗

Компоненты и варианты в figma

5 уроков
1. Делаем следующую секцию сайта ↗
2. Как работают компоненты ↗
3. Как работают варианты ↗
4. Подводим итоги Варианты ↗
5. ПРАКТИКА #13 - Создайте собственные варианты ↗

Углублённая работа с AutoLayOut

9 уроков
1. Создаем следующую секцию сайта ↗
2. Как работает GRID AutoLayOut ↗
3. AutoLayOut Pro версия ↗
4. Создаем следующую секцию сайта ↗
5. Делаем страницу блога ↗
6. Создаем карточку блога ↗
7. Как работают Min width / Max Width ↗
8. Создаем варианты карточки блога ↗
9. ПРАКТИКА #14 - Создайте дизайн сайта ↗

Адаптивный дизайн

7 уроков
1. Основы constraints ↗
2. Как работают constraints с grid layout ↗
3. ПРАКТИКА #15 - Constraints ↗
4. Что такое адаптивный дизайн ↗
5. Что такое DPI и PPI ↗
6. Адаптируем первую страницу сайта ↗
7. ПРАКТИКА #16 - Адаптируйте сайт ↗

Ускорение работы

1 урок
1. Полезные горячие клавиши ↗

Прототипирование

13 уроков
1. Предисловие к блоку ↗
2. Режим презентация макета ↗
3. Углубленные настройки прототипов ↗
4. Базовая анимация в figma ↗
5. Как работают кривые Безье ↗
6. Работа open overlay & scroll to ↗
7. Как работает swap overlay ↗
8. Как работает After Delay ↗
9. Как работает Smart Animate ↗
10. Анимируем меню сайта ↗
11. Прототипирование компонетов ↗
12. Reset Position & Component state ↗
13. Заключение блока прототипирование ↗

Платная или Бесплатная Figma?

1 урок
1. Отличия платной и бесплатной figma ↗

Экспорт

2 урока
1. Экспорт изображений ↗
2. Как работать в команде ↗

AI & Buzz & Sites & Slides

5 уроков
1. Обзор Figma Make ↗
2. Обзор Figma Site ↗
3. Обзор Figma Buzz ↗
4. Обзор Figma Slides ↗
5. Обзор Figma Jam ↗

Бонус! Работа в Photoshop

9 уроков
1. Рекламная пауза ↗
2. Подготовка программы ↗
3. Работа со слоями в Photoshop ↗
4. Расширяем границы изображений ↗
5. Удаляем ненужное из фото ↗
6. Как вырезать человека из одного фото и вставить его в другое ↗
7. Как работают маски в фотошоп ↗
8. Экспорт файлов из фотошоп ↗
9. Что дальше? ↗

Что дальше?

2 урока
1. Моя книга по UX-Исследования ↗
2. До свидания! ↗

Получите ваш сертификат

1 урок
1. Тест для получения сертификата об окончании курса ↗