Сколько стоит курс «Пакет курсов Веб дизайн в Figma с нуля + Веб дизайн в Figma Pro»?

Стоимость курса составляет 6490.00 рублей

Где можно пройти курс «Пакет курсов Веб дизайн в Figma с нуля + Веб дизайн в Figma Pro»?

Курс доступен на образовательной платформе Stepik по адресу stepik.org/course/270054.

Курс на Stepik

Обложка курса «Пакет курсов Веб дизайн в Figma с нуля + Веб дизайн в Figma Pro» на Stepik

6 490 ₽

Пакет курсов Веб дизайн в Figma с нуля + Веб дизайн в Figma Pro ★ 4.986

Name: Пакет курсов Веб дизайн в Figma с нуля + Веб дизайн в Figma Pro
Price: 6490.00 RUB
Availability: InStock
Rating: 4.986062717770035 (0 reviews)

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

Это пакет из двух курсов-бестселлеров Stepik по веб-дизайну в Figma — с нуля до Pro-уровня. Цена пакета ниже, чем при покупке курсов по отдельности.

Показатель	Текущие показатели		Рост
Показатель	Значение	🏆 Рейтинг	3 дн	7 дн	30 дн
Учеников на курсе	42
Сертификатов выдано	0
Отзывов получено	294
Рейтинг курса	4.986
Курсов в пакете	2	—	—	—	—
Количество уроков	240
Количество квизов	2
Время прохождения курса	31 ч.	—
Стоимость курса	6 490 ₽	—
Обновления курса	—	—
Дата публикации курса	9 месяцев назад	—	—	—	—
Последнее обновление	17 мая 2026	—	—	—	—
Сложность	easy	—	—	—	—

Содержание пакета (2 курса)

Курсы в пакете «Пакет курсов Веб дизайн в Figma с нуля + Веб дизайн в Figma Pro»

2 курса Уроки в курсе «Пакет курсов Веб дизайн в Figma с нуля + Веб дизайн в Figma Pro»

240 уроков Тесты в курсе «Пакет курсов Веб дизайн в Figma с нуля + Веб дизайн в Figma Pro»

2 теста Время прохождения курса «Пакет курсов Веб дизайн в Figma с нуля + Веб дизайн в Figma Pro»

31 ч.

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

4 653

130

18 ч.

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

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. Тест для получения сертификата об окончании курса ↗

2. Веб дизайн в Figma — Продвинутый уровень | Самостоятельный курс 5.00

146

110

13 ч.

Введение

6 уроков

1. О чем курс ↗

2. Скачайте материалы к курсу ↗

3. Это мультиязычный курс ↗

4. Как проходить курс ↗

5. Как задавать вопросы ↗

6. Оставайтесь со мной на связи! ↗

Типографика

10 уроков

1. Консистентность — это самое главное ↗

2. Самый первый UX\UI в мире ↗

3. Правильные настройки текста в веб-дизайне ↗

4. Типы шрифтов ↗

5. Как выбрать шрифт для проекта ↗

6. Как креативно форматировать текст ↗

7. Как форматировать текст в Figma ↗

8. Практика #1 — Отформатируйте текст красиво ↗

9. Что такое глифы ↗

10. Подводим итоги раздела ↗

Насмотренность и вдохновение

5 уроков

1. Дилема дизайнера ↗

2. Ресурсы для насмотренности ↗

3. Плагины для насмотренности ↗

4. Стили сайтов в веб-дизайне ↗

5. Используйте нейросети для насмотренности ↗

Сетки и направляющие

7 уроков

1. Типы сеток ↗

2. Создайте неудобную сетку ↗

3. Анализируйте чужие сетки ↗

4. Итоги — Типографика и сетки ↗

5. Практика # 2 — Разместите контент в сетке ↗

6. Практика # 2 — Выполненная ч. 1 ↗

7. Практика # 2 — Выполненная ч. 2 ↗

Первый проект

15 уроков

1. Задача и описание проекта ↗

2. Дополнение. Где брать фото ↗

3. Создаем модульную сетку ↗

4. Создаем Hero Section, часть 1 ↗

5. Создаем Hero Section, часть 2 ↗

6. Создаем вторую секцию сайта ↗

7. Создаем третью секцию сайта ↗

8. Делаем первый баннер ↗

9. Создаем четвертую секцию сайта ↗

10. Делаем второй баннер ↗

11. Делаем пятую секцию ↗

12. Создаем шестую секцию ↗

13. Создаем footer сайта ↗

14. Меняем шрифт и делаем навигационное меню ↗

15. Завершаем сайт ↗

Отступы

3 урока

1. Правило прямого угла ↗

2. Какие отступы использовать? ↗

3. Использование пустого пространства в дизайне ↗

Визуальная иерархия

8 уроков

1. Что такое визуальная иерархия ↗

2. Уровни визуальной иерархии ↗

3. Какой элемент важнее ↗

4. Как использовать серый цвет ↗

5. Делайте наоборот. Уберите акценты с ненужного ↗

6. Практика # 3 — Настройте визуальную иерархию ↗

7. Практика #3 — Выполненная ч. 1 ↗

8. Практика #3 — Выполненная ч. 2 ↗

Границы и скругление элементов

2 урока

1. Каким должено быть скругление углов ↗

2. Консистентное скругление углов ↗

Цвет

14 уроков

1. Проблема подхода 60·30·10 ↗

2. Как создавать цветовую шкалу ↗

3. Создаем шкалу на практике ↗

4. Правило 60·30·10 и шкала цвета ↗

5. Необязательно использовать только 3 цвета ↗

6. Используйте системные цвета ↗

7. Используйте холодный или теплы серый ↗

8. Цветовые ассоциации ↗

9. Как использовать градиент в дизайне ↗

10. Пара советов по работе с цветом ↗

11. ИИ Цвет ↗

12. Практика # 4 — Примените цвет к макету ↗

13. Практика # 4 — Выполненная ч.1 ↗

14. Практика # 4 — Выполненная ч.2 ↗

Изображения

4 урока

1. Как размещать текст на изображениях ↗

2. Какие изображения использовать ↗

3. Как работать с иконками ↗

4. Как использовать скриншоты в дизайне ↗

Искусственный интеллект в изображениях

10 уроков

1. Про ИИ-изображения ↗

2. Функционал и цены на ИИ ↗

3. Удаление заднего фона с помощью ИИ ↗

4. Удаление объектов с помощью ИИ ↗

5. Расширение границ изображений с помощью ИИ ↗

6. Увеличение разрешения изображения с помощью ИИ ↗

7. Редактирование изображений с помощью ИИ ↗

8. Гармонизация изображений с помощью ИИ ↗

9. Генерация изображений ↗

10. Дополнительные возможности ИИ ↗

Тени

3 урока

1. О тенях ↗

2. Техники и приемы работы с тенями ↗

3. Практика # 5 — Применяем эффекты теней правильно ↗

Мобильный дизайн

7 уроков

1. Особенности мобильного дизайна ↗

2. Размер текста на мобильных устройствах ↗

3. Размеры и выравнивание элементов ↗

4. Практика # 6 — Адаптируйте первый проект ↗

5. Практика # 6 — Выполненная ч. 1 ↗

6. Практика # 6 — Выполненная ч. 2 ↗

7. Практика # 6 — Выполненная ч. 3 ↗

Визуальные приемы в дизайне

2 урока

1. О визуальных приёмах ↗

2. Полезные ресурсы для веб-дизайнеров ↗

Второй проект – Редизайн сайта

12 уроков

1. Обзор и задачи проекта ↗

2. Подготовка и поиск референсов ↗

3. Создаём Hero Section ↗

4. Создаем навигационное меню ↗

5. Создаем декоративные линии ↗

6. Создаем вторую секцию сайта, ч. 1 ↗

7. Создаем вторую секцию сайта, ч. 2 ↗

8. Создаем третью секцию сайта ↗

9. Создаем четвертую секцию сайта ↗

10. Создаем форму для сайта ↗

11. Создаем footer для сайта ↗

12. Завершаем сайт ↗

Заключение

2 урока

1. Моя книга по UX-Исследованиям ↗

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