Мы используем cookie для стабильной работы сервиса. Подробнее

Веб дизайн в Figma Продвинутый уровень | Создание UI KIT в FIGMA

ФорматОнлайн
Длительность5-6
Объём5 занятий
По окончанииStepik
О курсе

Подробнее

Привет 👋 И сразу к делу. Это не просто курс по дизайну, это курс по созданию современного дизайн-продукта. Далеко не каждый практикующий дизайнер может похвастаться умением создавать такие сложные системы, как UI KIT и профессиональной работой с компонентами. Проходя уроки курса мы постепенно, шаг за шагом будем создавать свой продукт. От созданий базовых стилей текста и цвета, подбора правильного контраста и до готового UI KIT в котором все элементы расширяемы и связаны между собой. ✅ 80% моих студентов еще во время обучения окупают этот курс.  На курсе мы учимся создавать UI KIT, который можно сразу продавать на маркетплейсах. Создай несколько крутых UI KIT вместе со мной и получи пассивный заработок. ✅ Мы на практике получаем знания и с сразу же их применяем. В курсе есть максимально эффективные домашние задания. Студент не просто смотрит на то, что делает преподаватель, а включается в процесс, ведь некоторые элементы нужно создавать самостоятельно. Автор дает четкие инструкции по домашним заданиям, которые нужно выполнять. Студент их выполняет и после этого получает решение по дз от автора. Это самый эффективный способ обучения в онлайн формате на сегодняшний день. Студент постоянно находится в тонусе и практикуется. Важнее практики в нашем деле нет ничего. Весь процесс обучения происходит в Figma. Нас ничего не будет отвлекать. Мы будем пользоваться полезными плагинами и сочетаниями горячих клавиш. Узнаем крутой метод быстрого переименования слоев и объектов при помощи регулярных выражений. Это в 100 раз ускоряет рутинную работу. Не говоря уж о супер полезных для повседневной работы плагинах. После курса студент будет работать в программе как настоящий гуру фигмы По ходу курса мы в совершенстве изучим такие сложные темы как: компоненты, варианты, auto layout, стили и научимся грамотно применять свои знания.   🔥 Курс по FIGMA в подарок Если даже ты не знаешь программу или хочешь освежить знания, то в подарок ты получишь курс по FIGMA совершенно бесплатно.  Отдельно хочу отметить, что по итогу у студента будет не просто очередной дизайн-кейс по выдуманному заданию, а настоящий продукт, который может приносить создателю прибыть и которым могут пользоваться другие дизайнеры. Это реальная работа, которую можно "потрогать", а главное продать. 🥷 Пару слов обо мне Занимаюсь дизайном с 2017 года и в совершенстве владею FIGMA. Я самый популярный русскоязычный преподаватель по дизайну на Udemy. Обучил более 8000 учеников, а более 98% из них поставили курсу высшую оценку.
Требования

Что нужно для старта

  • Никаких предварительных знаний не требуется, даже если ты открыл FIGMA в первый раз , на курсе представлен блок по изучению основных функция FIGMA с нуля.
Результат

Что вы получите

  • Научитесь создавать UI KIT
  • Узнаете, как устроен UI KIT изнутри
  • Продумывание архитектуры проекта
  • Углубленная работа со сложными компонентами
  • Правильный нейминг элементов
  • Грамотная работа со стилями
  • Работа с вариантами
  • Работа с плагинами
  • Работа с hot key
  • Научитесь профессионально работать в Figma
  • Научитесь мыслить, как профессионал
  • Научитесь работать со сложными системами
Аудитория

Для кого этот курс

  • Для начинающих и опытных веб-дизайнеров, для тех кто хочет освоить новый способ заработка не выходя из FIGMA.
Содержание

Программа курса

5 занятий
ТемаЧто внутри
01О чем этот курс

- Вступление
- Как проходить курс. Организационный урок

02Создаем стили для UI Kit

- О чем этот модуль
- Стили для текстов
- Почему именно такие значения для стилей текста?
- Стиль нейтрального цвета
- Логика подбора стилей для главного цвета (Main Color)
- Создаем стили главного цвета
- Доработка цвета. Работа с цветовой моделью HSV
- Практика 01 Работа с плагинами для студента
- Проверяем контраст Главного цвета
- Функциональные цвета
- Ускоряем работу с помощью регулярных выражений
- Создание Layout
- Стили Эффектов
- Добавление пака иконок в UiKit
- Практика 02. Грамотная работа с иконками для UI KIT

03Создаем основные элементы Ui Kit

- О чем этот модуль
- Создание тегов(чипсы,бейджи)
- Создаем Аккордеоны
- Подробнее по Аккордеонам
- Создание основного стека кнопок
- Создание дополнительных состояний и стилей кнопок
- Создаем CheckBox
- Практика 03. Создание Радио кнопок
- Создаем модальные окна
- Создание окон уведомления (Notification)
- Практика 04. Создание переключателей (Switch)
- Практика 05. Создание поля ввода текста Textarea
- Разбираем домашнее задание по полям ввода текста. О Слоях
- Добавление функционала к полям ввода
- Создание Dropdown Menu
- Дополнение блока Dropdown
- Блок Select
- Дополняем блок Select
- Практика 06. Создание блока "Рейтинг"
- Создаем Табы
- Создаем блок Вертикальное Меню
- Создание блока Горизонтальное меню
- Практика 07. Создание второстепенных menu item
- Решение задачи по созданию второстепенных пунктов меню
- Создание инпутов
- Создание ячеек для таблиц. Часть 1
- Создание ячеек для таблиц. Часть 2

04Выкладываем наш Ui Kit В Community Figma

- Практика 08. Документация
- Превью для Ui Kit
- Регистрация в community в качестве автора
- Публикация своего продукта

05Курс по Figma 2022

- Установка Figma
- Простейшие фигуры(Квадрат)
- Работа с цветом
- Работа с изображениями
- Эффекты
- Группа
- Фрейм
- Комьюнити
- Плагины
- Работа с текстом
- Обновление стилей 2023
- Стили
- Настройка constraints
- Обновление Auto Layout 2022
- Auto Layout
- Практика 08. Auto Layout Часть 2
- Компоненты. Часть 1
- Компоненты. Часть 2
- Компоненты. Часть 3
- Компоненты. Часть 4
- Варианты

01О чем этот курс

- Вступление
- Как проходить курс. Организационный урок

02Создаем стили для UI Kit

- О чем этот модуль
- Стили для текстов
- Почему именно такие значения для стилей текста?
- Стиль нейтрального цвета
- Логика подбора стилей для главного цвета (Main Color)
- Создаем стили главного цвета
- Доработка цвета. Работа с цветовой моделью HSV
- Практика 01 Работа с плагинами для студента
- Проверяем контраст Главного цвета
- Функциональные цвета
- Ускоряем работу с помощью регулярных выражений
- Создание Layout
- Стили Эффектов
- Добавление пака иконок в UiKit
- Практика 02. Грамотная работа с иконками для UI KIT

03Создаем основные элементы Ui Kit

- О чем этот модуль
- Создание тегов(чипсы,бейджи)
- Создаем Аккордеоны
- Подробнее по Аккордеонам
- Создание основного стека кнопок
- Создание дополнительных состояний и стилей кнопок
- Создаем CheckBox
- Практика 03. Создание Радио кнопок
- Создаем модальные окна
- Создание окон уведомления (Notification)
- Практика 04. Создание переключателей (Switch)
- Практика 05. Создание поля ввода текста Textarea
- Разбираем домашнее задание по полям ввода текста. О Слоях
- Добавление функционала к полям ввода
- Создание Dropdown Menu
- Дополнение блока Dropdown
- Блок Select
- Дополняем блок Select
- Практика 06. Создание блока "Рейтинг"
- Создаем Табы
- Создаем блок Вертикальное Меню
- Создание блока Горизонтальное меню
- Практика 07. Создание второстепенных menu item
- Решение задачи по созданию второстепенных пунктов меню
- Создание инпутов
- Создание ячеек для таблиц. Часть 1
- Создание ячеек для таблиц. Часть 2

04Выкладываем наш Ui Kit В Community Figma

- Практика 08. Документация
- Превью для Ui Kit
- Регистрация в community в качестве автора
- Публикация своего продукта

05Курс по Figma 2022

- Установка Figma
- Простейшие фигуры(Квадрат)
- Работа с цветом
- Работа с изображениями
- Эффекты
- Группа
- Фрейм
- Комьюнити
- Плагины
- Работа с текстом
- Обновление стилей 2023
- Стили
- Настройка constraints
- Обновление Auto Layout 2022
- Auto Layout
- Практика 08. Auto Layout Часть 2
- Компоненты. Часть 1
- Компоненты. Часть 2
- Компоненты. Часть 3
- Компоненты. Часть 4
- Варианты

Документ после выпуска

Stepik

Организатор

Автор курса

StepikStepik
Stepik — образовательная платформа и конструктор онлайн-курсов. Мы разрабатываем алгоритмы адаптивного обучения, сотрудничаем с авторами MOOC, помогаем в проведении олимпиад и программ переподготовки. Наша цель — сделать образование открытым и удобным. Stepik — широко известная российская образовательная платформа, основанная в 2013 году. На Stepik зарегистрировано более миллиона пользователей из России и стран СНГ. В настоящее время на Stepik представлены несколько тысяч учебных курсов на самые разные темы.
Подробнее об авторе
Мнения учеников

Отзывы о курсе

Оставьте отзыв

Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.

Напишите ваш коментарий, не менее 30 символов

Нажимая кнопку, вы даете согласие на обработку персональных данных

Оставьте заявку

Консультант ответит на вопросы о курсе «Веб дизайн в Figma Продвинутый уровень | Создание UI KIT в FIGMA» и поможет разобраться в деталях обучения.

Комментарий ...

Нажимая кнопку, вы даете согласие на обработку персональных данных

Направления:UX-дизайнFigma

Информация обновлена 12 августа 2026 г.

Продолжить выбор

Похожие курсы

Начать без затрат

Бесплатные курсы