Содержание пакета (4 курса)
4
курса
341
урок
46
тестов
49 ч.
1. FIGMA 2024: быстрый старт в профессию веб-дизайнера 4.50
383
62
15
8 ч.
Введение
7 уроков
1.
Введение
↗
2.
О чем этот модуль
↗
3.
Скачиваем программу
↗
4.
Структура файлов
↗
5.
Обзор интерфейса
↗
6.
Сохранение и передача файла
↗
7.
Горячие клавиши
↗
Основные инструменты Figma
24 урока
1.
Move tool, Scale Tool
↗
2.
Выравнивание объектов
↗
3.
Инструмент Прямоугольник
↗
4.
Работа с цветом
↗
5.
Математика
↗
6.
Инструмент Овал
↗
7.
Решение задачи с овалом
↗
8.
Полигон + Звезда
↗
9.
Обводка
↗
10.
Заливка и Градиент
↗
11.
Практика работы с Заливкой
↗
12.
Работа с изображениями
↗
13.
Эффекты
↗
14.
Маска
↗
15.
Экспорт
↗
16.
Перо
↗
17.
Работа с текстом
↗
18.
Группа
↗
19.
Фрейм
↗
20.
Булевы группы
↗
21.
Секция
↗
22.
Комьюнити
↗
23.
Плагины
↗
24.
Selection Colors
↗
Продвинутые инструменты Figma
11 уроков
1.
Обновление стилей 2023
↗
2.
Стили
↗
3.
Настройка constraints
↗
4.
Auto Layout
↗
5.
Обновление Auto Layout 2022
↗
6.
Практика Auto Layout Часть 2
↗
7.
Компоненты. Часть 1
↗
8.
Компоненты. Часть 2
↗
9.
Компоненты. Часть 3
↗
10.
Компоненты. Часть 4
↗
11.
Варианты
↗
Практика работы в Figma
15 уроков
1.
Что такое Скетч и зачем он нужен
↗
2.
Обзор будущего макета
↗
3.
Стили
↗
4.
Практика 01
↗
5.
Практика 02
↗
6.
Практика 03
↗
7.
Практика 04
↗
8.
Практика 05
↗
9.
Практика 06. ДЗ
↗
10.
Практика 07
↗
11.
Практика 08
↗
12.
Практика 09
↗
13.
Практика 10
↗
14.
Практика 11
↗
15.
Вопросы
↗
Создаем прототип макета
5 уроков
1.
Перелистывание фильмов + ДЗ
↗
2.
Страница открытого фильма
↗
3.
Страница бронирования билета
↗
4.
Дорабатываем анимацию и скролы
↗
5.
Ответ на ДЗ
↗
2. UX-дизайн в Figma. UX-аналитика проекта 5.00
517
70
10
10 ч.
Введение
4 урока
1.
Что такое UX
↗
2.
Этапы работы
↗
3.
Выбор проекта
↗
4.
Тест 1
↗
UX Аналитика проекта
29 уроков
1.
Бриф
↗
2.
Анализ конкурентов. Сравнительная Таблица
↗
3.
Анализ конкурентов. Поиск прямых и косвенных конкурентов
↗
4.
Обзор конкурентов
↗
5.
Делаем вывод по конкурентам и рынку
↗
6.
Тест 2
↗
7.
Заполняем таблицу конкурентов
↗
8.
Пара советов по составлению вопросов
↗
9.
Знакомство с FigJam
↗
10.
Создаем план опроса
↗
11.
Вносим опрос в форму
↗
12.
Что делать с опросом?
↗
13.
Предварительный анализ опроса
↗
14.
Работаем с таблицей данных из опроса
↗
15.
Анализ опроса
↗
16.
Несколько инсайдов для интервью
↗
17.
Составляем план интервью
↗
18.
Анализ интервью
↗
19.
Персона
↗
20.
Use Case
↗
21.
Use Case + Features
↗
22.
MVP
↗
23.
Flow. Вводная лекция
↗
24.
Flow. Регистрация
↗
25.
Flow. Личный кабинет
↗
26.
Flow. Выбор книги
↗
27.
Flow. Отправка сообщений
↗
28.
Информационная Архитектура
↗
29.
Тест 3
↗
Wireframe (Вайрфрейм/прототип)
12 уроков
1.
Создание низкоуровневого прототипа. Часть 1
↗
2.
Создание низкоуровневого прототипа. Часть 2
↗
3.
Создание низкоуровневого прототипа. Часть 3
↗
4.
Создание низкоуровневого прототипа. Часть 4
↗
5.
Высокоуровневый прототип
↗
6.
Высокоуровневый прототип. Часть 2
↗
7.
Высокоуровневый прототип. Часть 3
↗
8.
Высокоуровневый прототип. Часть 4
↗
9.
Высокоуровневый прототип. Часть 5
↗
10.
Высокоуровневый прототип. Часть 6
↗
11.
Высокоуровневый прототип. Часть 7
↗
12.
Высокоуровневый прототип. Часть 8
↗
Создание кликабельного прототипа
5 уроков
1.
Регистрация -> Главная
↗
2.
Добавляем скролл к страницам
↗
3.
Создаем связи для всех страниц
↗
4.
Прототип страницы отправки сообщения
↗
5.
Тестирование прототипа
↗
Bonus. Курс Figma 2023
20 уроков
1.
Установка Figma
↗
2.
Примитивы(Простые фигуры)
↗
3.
Работа с цветом
↗
4.
Работа с изображениями
↗
5.
Эффекты
↗
6.
Группа
↗
7.
Фрейм
↗
8.
Комьюнити
↗
9.
Плагины
↗
10.
Работа с текстом
↗
11.
Стили
↗
12.
Настройка constraints
↗
13.
Обновление Auto Layout 2022
↗
14.
Auto Layout
↗
15.
Практика Auto Layout Часть 2
↗
16.
Компоненты. Часть 1
↗
17.
Компоненты. Часть 2
↗
18.
Компоненты. Часть 3
↗
19.
Компоненты. Часть 4
↗
20.
Варианты
↗
3. Веб дизайн в Figma Продвинутый уровень | Создание UI KIT в FIGMA 5.00
461
69
10
8 ч.
О чем этот курс
2 урока
1.
Вступление
↗
2.
Как проходить курс. Организационный урок
↗
Создаем стили для UI Kit
15 уроков
1.
О чем этот модуль
↗
2.
Стили для текстов
↗
3.
Почему именно такие значения для стилей текста?
↗
4.
Стиль нейтрального цвета
↗
5.
Логика подбора стилей для главного цвета (Main Color)
↗
6.
Создаем стили главного цвета
↗
7.
Доработка цвета. Работа с цветовой моделью HSV
↗
8.
Практика 01 Работа с плагинами для студента
↗
9.
Проверяем контраст Главного цвета
↗
10.
Функциональные цвета
↗
11.
Ускоряем работу с помощью регулярных выражений
↗
12.
Создание Layout
↗
13.
Стили Эффектов
↗
14.
Добавление пака иконок в UiKit
↗
15.
Практика 02. Грамотная работа с иконками для UI KIT
↗
Создаем основные элементы Ui Kit
27 уроков
1.
О чем этот модуль
↗
2.
Создание тегов(чипсы,бейджи)
↗
3.
Создаем Аккордеоны
↗
4.
Подробнее по Аккордеонам
↗
5.
Создание основного стека кнопок
↗
6.
Создание дополнительных состояний и стилей кнопок
↗
7.
Создаем CheckBox
↗
8.
Практика 03. Создание Радио кнопок
↗
9.
Создаем модальные окна
↗
10.
Создание окон уведомления (Notification)
↗
11.
Практика 04. Создание переключателей (Switch)
↗
12.
Практика 05. Создание поля ввода текста Textarea
↗
13.
Разбираем домашнее задание по полям ввода текста. О Слоях
↗
14.
Добавление функционала к полям ввода
↗
15.
Создание Dropdown Menu
↗
16.
Дополнение блока Dropdown
↗
17.
Блок Select
↗
18.
Дополняем блок Select
↗
19.
Практика 06. Создание блока "Рейтинг"
↗
20.
Создаем Табы
↗
21.
Создаем блок Вертикальное Меню
↗
22.
Создание блока Горизонтальное меню
↗
23.
Практика 07. Создание второстепенных menu item
↗
24.
Решение задачи по созданию второстепенных пунктов меню
↗
25.
Создание инпутов
↗
26.
Создание ячеек для таблиц. Часть 1
↗
27.
Создание ячеек для таблиц. Часть 2
↗
Выкладываем наш Ui Kit В Community Figma
4 урока
1.
Практика 08. Документация
↗
2.
Превью для Ui Kit
↗
3.
Регистрация в community в качестве автора
↗
4.
Публикация своего продукта
↗
Курс по Figma 2022
21 урок
1.
Установка Figma
↗
2.
Простейшие фигуры(Квадрат)
↗
3.
Работа с цветом
↗
4.
Работа с изображениями
↗
5.
Эффекты
↗
6.
Группа
↗
7.
Фрейм
↗
8.
Комьюнити
↗
9.
Плагины
↗
10.
Работа с текстом
↗
11.
Обновление стилей 2023
↗
12.
Стили
↗
13.
Настройка constraints
↗
14.
Обновление Auto Layout 2022
↗
15.
Auto Layout
↗
16.
Практика 08. Auto Layout Часть 2
↗
17.
Компоненты. Часть 1
↗
18.
Компоненты. Часть 2
↗
19.
Компоненты. Часть 3
↗
20.
Компоненты. Часть 4
↗
21.
Варианты
↗
4. Веб-дизайн в Figma 2025. Основы UI/UX дизайна на практике 4.30
634
140
11
23 ч.
Знакомство с Figma. Простые инструменты
39 уроков
1.
О чем этот модуль
↗
2.
Скорость видео
↗
3.
Скачать Figma и зарегистрироваться в программе
↗
4.
Структура файлов
↗
5.
Обзор интерфейса программы
↗
6.
Команды в Figma
↗
7.
Сохранение и передача файла
↗
8.
Горячие клавиши
↗
9.
Move tool, Scale tool
↗
10.
Выравнивание объектов
↗
11.
Прямоугольник
↗
12.
Математика в Figma
↗
13.
Работа с цветом
↗
14.
ПРАКТИКА Овал
↗
15.
Решение задачи по инструменту ARC
↗
16.
Полигон + Звезда
↗
17.
Обводка
↗
18.
Линия
↗
19.
Заливка + градинет
↗
20.
ПРАКТИКА Заливка градиент обводка
↗
21.
Изображения
↗
22.
Эффекты
↗
23.
Экспорт
↗
24.
Маска
↗
25.
Перо
↗
26.
Инструмент "Текст"
↗
27.
Про PNG
↗
28.
Группа
↗
29.
Frame
↗
30.
Секция
↗
31.
Булевы группы
↗
32.
Направляющие и Линейка
↗
33.
Selection colors
↗
34.
Комьюнити
↗
35.
Плагины
↗
36.
ПРАКТИКА. Контрольные проекты
↗
37.
Решение задачи на работу с текстом
↗
38.
Решение задачи на работу с маской
↗
39.
Решение задачи на работу с эффектами наложения
↗
Продвинутые инструменты Figma
22 урока
1.
Стили. Цвет
↗
2.
ПРАКТИКА. Стили Текст
↗
3.
Стили. Эффект
↗
4.
Constraints (Ограничения/привязки) Часть 1
↗
5.
Constraints (Ограничения/привязки) Часть 2
↗
6.
Сетки. Часть 1
↗
7.
ПРАКТИКА. Работа с сетками и привязками Часть 1
↗
8.
ПРАКТИКА. Работа с сетками и привязками Часть 2
↗
9.
ПРАКТИКА. Работа с сетками и привязками Часть 3
↗
10.
Auto Layout
↗
11.
Auto Layout. Базовые настройки
↗
12.
Auto Layout. Примеры использования
↗
13.
ПРАКТИКА. Auto Layout Сложный пример работы
↗
14.
ПРАКТИКА. Auto Layout делаем адаптив
↗
15.
ПРАКТИКА. Auto Layout Адаптив блока с карточками
↗
16.
Компоненты
↗
17.
Компоненты. Удобная организация
↗
18.
Компоненты. Свойства компонентов
↗
19.
Компоненты. Варианты компонентов
↗
20.
Переменные
↗
21.
Переменные. Зона видимости
↗
22.
ПРАКТИКА Переменные. Организация переменныех
↗
Практика работы в Figma
13 уроков
1.
Основа атомарного дизайна
↗
2.
Анализ проекта
↗
3.
Создание токенов. Текст
↗
4.
Создание токенов. Цвет
↗
5.
Создание атомов. Иконки
↗
6.
Создание молекул
↗
7.
Создание организмов. Хедер
↗
8.
ПРАКТИКА Создание организмов. Сайд Бар
↗
9.
Создание организмов. Виджет Юзера
↗
10.
ПРАКТИКА Создание организмов. Виджет Группа
↗
11.
Создание виджета. Пост
↗
12.
ПРАКТИКА Создание организмов Виджет Пост 2
↗
13.
Последний урок модуля
↗
Теория Веб-Дизайна
20 уроков
1.
Типографика Введение
↗
2.
Типографика. Урок 2
↗
3.
Типографика Душним
↗
4.
Типографика. Установка шрифтов
↗
5.
Типографика. Точки Управления
↗
6.
Типографика. Практика + ДЗ
↗
7.
ПРАКТИКА Типографика. Часть 1
↗
8.
ПРАКТИКА Типографика. Часть 2
↗
9.
ПРАКТИКА Типографика. Часть 3
↗
10.
ПРАКТИКА Типографика. Часть 4
↗
11.
ПРАКТИКА Типографика. Часть 5
↗
12.
Информационная иерархия в UI дизайне
↗
13.
Тест по типографике
↗
14.
Сетки и направляющие
↗
15.
Теория цвета
↗
16.
Где брать картинки для веб дизайна
↗
17.
Как подбирать картинки для проектов
↗
18.
Выравнивание объектов
↗
19.
Правило внутреннего и внешнего
↗
20.
Иерархия в веб дизайне
↗
Практика. Создание дизайн концепции сайта(Шот)
2 урока
1.
Что такое дизайн концепт
↗
2.
Практика создания дизайн концепта сайта
↗
Практика. Создание Лендинга. Бюджет 650$
18 уроков
1.
Техническое задание проекта(ТЗ)
↗
2.
UX Часть нашего проекта
↗
3.
Подробнее о брифах
↗
4.
Порядок выполнения проекта
↗
5.
Определение целевой аудитории
↗
6.
Аналитика конкурентов
↗
7.
Создание прототипа сайта. Теория
↗
8.
Создание прототипа сайта. Практика
↗
9.
Создание концепта сайта
↗
10.
Создаем блоки с информацией
↗
11.
Создаем блок тарифов, форму связи и футер
↗
12.
Работа со слоями. Доработка дизайна.
↗
13.
Адаптив дизайна под планшет
↗
14.
Создание мобильной версии дизайна
↗
15.
Создание модальных окон + ДЗ
↗
16.
Готовим работу к верстке. Стайл Гайд + ДЗ
↗
17.
Этапы работы над проектом на фрилансе
↗
18.
Создание личного кабинета
↗
Практика. Создания дизайна интернет магазина. Бюджет $1200
11 уроков
1.
Получение ТЗ
↗
2.
Создание концепта интернет магазина
↗
3.
Создание основных блоков главной страницы
↗
4.
Создание рекламного баннера и формы подписки
↗
5.
Создание футера
↗
6.
Проверка дизайна главной
↗
7.
Страница выдачи товара
↗
8.
Создание страницы товара. Карточка товара
↗
9.
Создание модального окна
↗
10.
Создание корзины
↗
11.
Создаем страницу оплаты
↗
Создание кликабельного макета.
2 урока
1.
Введение в прототипирование в Figma
↗
2.
Создание кликабельного макета
↗
Адаптивная версия дизайна интернет магазина
7 уроков
1.
Адаптация главной
↗
2.
Адаптив страницы выдачи товаров
↗
3.
Адаптив карточки товара + ДЗ
↗
4.
Адаптив корзины
↗
5.
Адаптив страницы оплаты
↗
6.
Создаем открытое меню в мобильной версии сайта
↗
7.
Проверка на ошибки
↗
Создание стайл гайда
1 урок
1.
Создание стайл гайда
↗
Оформление работ в портфолио
3 урока
1.
Обзор кейсов
↗
2.
Оформление кейса по лендингу
↗
3.
Презентация кейса
↗
Что делать дальше
2 урока
1.
Где и как искать работу Веб дизайнеру
↗
2.
Не очевидные способы способы дохода для веб дизайнера
↗