Курс на Stepik
Обложка курса «Веб-дизайн в Figma: ключ к успеху. С нуля» на Stepik
2 490 ₽

Веб-дизайн в Figma: ключ к успеху. С нуля ★ 4.900

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

Полностью обновленный курс по Figma. Курс записан в самом актуальном интерфейсе Figma. На этом курсе вы научитесь с нуля создавать детально проработанные сайты: начиная от создания дизайн-системы, заканчивая работой с Autolayout и компонентами.

Показатель Текущие показатели Рост
Значение 🏆 Рейтинг 3 дн 7 дн 30 дн
Количество учеников на курсе «Веб-дизайн в Figma: ключ к успеху. С нуля»Учеников на курсе 347
Сертификаты, выданные на курсе «Веб-дизайн в Figma: ключ к успеху. С нуля»Сертификатов выдано 105
Отзывы о курсе «Веб-дизайн в Figma: ключ к успеху. С нуля»Отзывов получено 10
Рейтинг курса «Веб-дизайн в Figma: ключ к успеху. С нуля»Рейтинг курса 4.900
Уроки в курсе «Веб-дизайн в Figma: ключ к успеху. С нуля»Количество уроков 56
Тесты в курсе «Веб-дизайн в Figma: ключ к успеху. С нуля»Количество квизов 10
Время прохождения курса «Веб-дизайн в Figma: ключ к успеху. С нуля»Время прохождения курса —
Стоимость курса «Веб-дизайн в Figma: ключ к успеху. С нуля»Стоимость курса 2 490 ₽ —
Обновления курса «Веб-дизайн в Figma: ключ к успеху. С нуля»Обновления курса — —
Дата публикации курса «Веб-дизайн в Figma: ключ к успеху. С нуля»Дата публикации курса — ———
Последнее обновление курса «Веб-дизайн в Figma: ключ к успеху. С нуля»Последнее обновление — ———
Сложность easy — ———

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

Разделы в курсе «Веб-дизайн в Figma: ключ к успеху. С нуля» 23 раздела Уроки в курсе «Веб-дизайн в Figma: ключ к успеху. С нуля» 56 уроков Тесты в курсе «Веб-дизайн в Figma: ключ к успеху. С нуля» 10 тестов Время прохождения курса «Веб-дизайн в Figma: ключ к успеху. С нуля» 8 ч. Последнее обновление курса «Веб-дизайн в Figma: ключ к успеху. С нуля» обн. 15 августа 2026

Знакомство

3 урока
1. Информация о курсе ↗
2. Как проходить курс ↗
3. Установка Figma ↗

Базовый модуль по Figma

4 урока
1. Создание первого проекта ↗
2. Учимся работать со шрифтами ↗
3. Изучаем направляющие и Grid сетки ↗
4. Учимся работать с цветами и градиентами ↗

Профильный модуль по Figma

4 урока
1. Учимся работать с Autolayout ↗
2. Разбираемся что такое компоненты и для чего они нужны ↗
3. Учимся работать со стилями ↗
4. Знакомимся с эффектами ↗

Создаём лендинг для аренды спецтехники

13 уроков
1. Создаём UI KIT: стили для текста ↗
2. Создаём UI KIT: стили для цветов ↗
3. Создаём UI KIT: создаём кнопки ↗
4. Создаём UI KIT: создаём поля ввода ↗
5. Создаём первый экран ч. 1 ↗
6. Создаём первый экран ч. 2 ↗
7. Создаём каталог спецтехники ч. 1 ↗
8. Создаём каталог спецтехники ч. 2 ↗
9. Создаём форму обратной связи ↗
10. Создаём блок с контактами ↗
11. Создаём подвал сайта ↗
12. Адаптируем сайт под мобильные устройства ч. 1 ↗
13. Адаптируем сайт под мобильные устройства ч. 2 ↗

Правила создания композиции

2 урока
1. Что такое F-паттерн ↗
2. Что такое Z-паттерн ↗

UX-дизайн

5 уроков
1. Визуальная коммуникация ↗
2. Портрет аудитории и мудборд ↗
3. Пользовательские сценарии и паттерны их использования ↗
4. Юзабилити ↗
5. Гипотезы ↗

Итоговая работа UX-дизайн Экзамен

1 урок
1. Итоговая работа ↗

Создаём дизайн интерфейса CRM системы

17 уроков
1. Создаём блок навигации ч. 1 ↗
2. Создаём блок навигации ч. 2 ↗
3. Создаём информационные блоки ↗
4. Создаём блок "Последние заказы" ↗
5. Создаём блок "Постоянные клиенты" ↗
6. Создаём страницу с задачами ч. 1 ↗
7. Создаём страницу с задачами ч. 2 ↗
8. Создаём страницу с задачами ч. 3 ↗
9. Создаём кнопку добавления новой задачи ↗
10. Создаём страницу с заказами ↗
11. Создаём страницу с добавлением нового заказа ч. 1 ↗
12. Создаём страницу с добавлением нового заказа ч. 2 ↗
13. Создаём страницу с добавлением нового заказа ч. 3 ↗
14. Создаём страницу с клиентами ↗
15. Создаём кнопку добавления нового клиента ↗
16. Создаём страницу с отчётами ↗
17. Создаём страницу с настройками ↗

Создаём кейс для Dproifle

3 урока
1. Создаём кейс в Figma ч. 1 ↗
2. Создаём кейс в Figma ч. 2 ↗
3. Публикуем кейс на Dprofile ↗

Создаём сайт-портфолио на Tilda

3 урока
1. Создаём главный экран ↗
2. Создаём блок с портфолио ↗
3. Создаём блок с контактами и публикуем сайт ↗

Финал

1 урок
1. Получение сертификата ↗

Знакомство (старый)

4 урока
1. Вступление и знакомство с профессией ↗
2. Ссылка на закрытый чат в Telegram ↗
3. Обновление курса от 28.07.24 ↗
4. Установка Figma ↗

Основы Figma (старый)

4 урока
1. Создаём первый проект и работаем с размерами ↗
2. Учимся работать со шрифтами ↗
3. Направляющие и сетки ↗
4. Экспорт слоёв и фреймов ↗

Профильный модуль Figma (старый)

6 уроков
1. Магия Autolayout ↗
2. Компоненты ↗
3. Стили ↗
4. Эффекты ↗
5. Структура организации проекта ↗
6. Анимация ↗

Создаём первый сайт (старый)

5 уроков
1. Разбираем техническое задание ↗
2. Создаём UI KIT ↗
3. Создаём первый экран сайта ↗
4. Создаём основной контент сайта ↗
5. Адаптируем сайт под мобильные устройства ↗

Основы дизайна (старый)

2 урока
1. Правила создания правильной композиции ↗
2. Типографика в веб-дизайне ↗

Работа с фотографией (старый)

2 урока
1. Где искать фотографии для своих проектов ↗
2. Обработка фото в Figma ↗

Создание интернет-магазина автозапчастей (старый)

12 уроков
1. Разбираем техническое задание ↗
2. Разбираем сайты конкурентов ↗
3. Создание UI KIT ↗
4. Создание Header ↗
5. Создание первого экрана сайта ↗
6. Создание основного контента сайта ↗
7. Создание страницы каталога ↗
8. Создание страницы товара ↗
9. Создание страницы корзины ↗
10. Создание страницы оформления заказа ↗
11. Создание страницы с личным кабинетом ↗
12. Создание второстепенных страниц ↗

Дизайн мобильных приложений (старый)

2 урока
1. Дизайн мобильного приложения погоды ↗
2. Дизайн мобильного приложения погоды для Android ↗

Кейс на Behance (старый)

2 урока
1. Оформление кейса на Behance ↗
2. Публикация кейса ↗

Создание портфолио на Notion (старый)

2 урока
1. Что такое Notion и зачем он нужен ↗
2. Создаем портфолио на Notion ↗

Создаем сайт-портфолио (старый)

4 урока
1. Разработка UI KIT и верстка главного экрана ↗
2. Создание блока преимуществ и портфолио ↗
3. Создание блока с ценами ↗
4. Создание блока с формой обратной связи ↗

Финал (старый)

2 урока
1. Куда идти дальше? ↗
2. Финал! ↗