Stepik О курсе
Подробнее
В курсе мы изучим основы работы в Figma, а также ключевые концепции дизайна: типографику, работу с цветом, иерархию в веб-дизайне и другие важные аспекты создания качественного интерфейса.
Мы начнём с самых основ: после установки Figma разберёмся с базовыми инструментами, формами и текстом. Затем углубимся в типографику и посмотрим, как правильно выстраивать иерархию текста. После этого изучим теорию цвета и применим полученные знания на практике, создавая полноценный макет.
Далее мы начнём структурировать проект с использованием Auto Layout и создадим профессиональный макет страницы регистрации. В финале курса реализуем крупный проект — landing page, применив все полученные навыки.
Требования
Что нужно для старта
- Требований нет
Результат
Что вы получите
- Создавать макеты в Figma
- Разбираться в основах типографики
- Понимать основы цветовой теории
- Использовать Auto Layout для адаптивных интерфейсов
- Работать с иконками и векторными элементами
- Использовать принципы атомарного дизайна
- Работать с Figma на базовом уровне
- Применять правила композиции и контраста
Аудитория
Для кого этот курс
- Начинающие дизайнеры
Содержание
10 занятийПрограмма курса
№ТемаЧто внутри
01Введение
- О веб-дизайне
- Как устроен курс
- Обзор проектов
- Обзор курсов
- Знакомство с преподавателем
- Перенос курса
02Настройка окружения
- Знакомство с Figma
- Регистрация в Figma. Тарифы
- Установка Figma - MacOS
- Установка Figma - Windows
- Установка шрифтов
03Основы работы в Figma
- Обзор интерфейса. Часть 1
- Обзор интерфейса. Часть 2
- История версий. Хоткеи
- Frame, группа, секция
- Привязки в Figma
- Страницы. Слои. Поиск
- Булевы операции
- Упражнение - Черновой прототип
- Тест - Основы работы в Figma
04Типографика
- Принцип близости
- Инструмент - Текст. Часть 1
- Инструмент - Текст. Часть 2
- Отступы в дизайне
- Вёрстка текста. Часть 1
- Вёрстка текста. Часть 2
- Плагин для работы с текстом
- Упражнение - Отступы
- Упражнение - Вёрстка текста
- Текстовые стили
- Тест по типографике
05Работа с цветом
- Основы работы с цветом
- Заливка
- Градиенты
- Работа с изображениями
- Цветовые модели в Figma
- Система для работы с цветом
- Подбор цветовой палитры
- Упражнение - Подбор цвета
- Цветовые стили
- Упражнение - Цветовые стили
- Эффекты
- Тест - Работа с цветом
06Auto layout
- Расположение элементов
- Отступы и выравнивание
- Поведение элементов
- Абсолютное позиционирование
- Min и max по высоте и ширине
- Создание списка при помощи
- Инструмент Обводка
- Упражнение - Создание табов
- Упражнение - Создание карточки
- Тест - Auto layout
07Работа с иконками
- Формат, виды, основные принципы работы с иконками
- Инструмент Scale
- Упражнение - Создание инпутов и подбор иконок
- Тест - Работа с иконками
08Атомарный дизайн
- Определение, основные понятия
- Основные преимущества использования
- Сбор формы
- Тест - Атомарный дизайн
09Практический блок
- Дизайн лендинга. Часть 1
- Дизайн лендинга. Часть 2
- Дизайн лендинга. Часть 3
- Дизайн лендинга. Часть 4
- Дизайн лендинга. Часть 5
- Дизайн лендинга. Часть 6
- Дизайн лендинга. Часть 7
10Куда двигаться дальше
- Куда двигаться дальше
- Финальное тестирование
01Введение
- О веб-дизайне
- Как устроен курс
- Обзор проектов
- Обзор курсов
- Знакомство с преподавателем
- Перенос курса
02Настройка окружения
- Знакомство с Figma
- Регистрация в Figma. Тарифы
- Установка Figma - MacOS
- Установка Figma - Windows
- Установка шрифтов
03Основы работы в Figma
- Обзор интерфейса. Часть 1
- Обзор интерфейса. Часть 2
- История версий. Хоткеи
- Frame, группа, секция
- Привязки в Figma
- Страницы. Слои. Поиск
- Булевы операции
- Упражнение - Черновой прототип
- Тест - Основы работы в Figma
04Типографика
- Принцип близости
- Инструмент - Текст. Часть 1
- Инструмент - Текст. Часть 2
- Отступы в дизайне
- Вёрстка текста. Часть 1
- Вёрстка текста. Часть 2
- Плагин для работы с текстом
- Упражнение - Отступы
- Упражнение - Вёрстка текста
- Текстовые стили
- Тест по типографике
05Работа с цветом
- Основы работы с цветом
- Заливка
- Градиенты
- Работа с изображениями
- Цветовые модели в Figma
- Система для работы с цветом
- Подбор цветовой палитры
- Упражнение - Подбор цвета
- Цветовые стили
- Упражнение - Цветовые стили
- Эффекты
- Тест - Работа с цветом
06Auto layout
- Расположение элементов
- Отступы и выравнивание
- Поведение элементов
- Абсолютное позиционирование
- Min и max по высоте и ширине
- Создание списка при помощи
- Инструмент Обводка
- Упражнение - Создание табов
- Упражнение - Создание карточки
- Тест - Auto layout
07Работа с иконками
- Формат, виды, основные принципы работы с иконками
- Инструмент Scale
- Упражнение - Создание инпутов и подбор иконок
- Тест - Работа с иконками
08Атомарный дизайн
- Определение, основные понятия
- Основные преимущества использования
- Сбор формы
- Тест - Атомарный дизайн
09Практический блок
- Дизайн лендинга. Часть 1
- Дизайн лендинга. Часть 2
- Дизайн лендинга. Часть 3
- Дизайн лендинга. Часть 4
- Дизайн лендинга. Часть 5
- Дизайн лендинга. Часть 6
- Дизайн лендинга. Часть 7
10Куда двигаться дальше
- Куда двигаться дальше
- Финальное тестирование
Организатор
Автор курса
Мнения учеников
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «Основы дизайна и Figma» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Направления:Figma
Информация обновлена 3 сентября 2026 г.
Продолжить выбор
Похожие курсы
Начать без затрат
