Дизайн-системы для фронтендеров 2022. НТМL Academy

Умение выделять систему из дизайна и переносить её в код сокращает время на создание новых частей больших продуктов. Даже на небольших проектах такие системы упрощают процесс разработки и поддержки.Год: 2022Формат: HTML, EPUBПрограмма курсаРаздел 1ВведениеОбщие сведения о дизайн-системах. Рассмотрим разные типы и свойства дизайн-систем, разберём примеры.— Базовые знания по дизайн-системам— Тест по разделу— Отличие дизайн-систем от UI-китов— Плюсы и минусы использования дизайн-систем— Основы работы в FigmaРаздел 2ДекомпозицияРазберём выделение компонентов и научимся работать с токенами.— Токены— Пошаговая демонстрация: разбираем демо-проект— Практика: выделение токенов— Кейс: эталонная реализация— Промежуточный тест— Компоненты и блоки— Практика: выделение компонентов— Кейс: эталонная реализация— Тест по разделуРаздел 3Техническая реализацияПерейдём к практике и начнём работать с кодом. Реализуем компоненты.— Подготовка— Пошаговая демонстрация: разбираем компоненты— Практика: токены, текст и шапка— Кейс: эталонная реализация— Практика: лейаут, подвал, иконки— Кейс: эталонная реализация— Практика: логотип, поле поиска и кнопка— Кейс: эталонная реализация— Практика: горизонтальный переключатель, боковая навигация, ссылка— Кейс: эталонная реализация— Практика: карточка и коллапс— Кейс: эталонная реализация— Тест по разделу— Альтернативные способы организации стилей в проектеРаздел 4Расширение дизайн-системыНаучимся работать с изменениями в макетах.— Почему происходят изменения и что с этим делать— Пошаговая демонстрация: реализация изменений— Практическое задание: реализация новых компонентов в дизайн-системе— Кейс: эталонная реализацияРаздел 5Дизайн-система и командная работаРазберёмся, с кем и как взаимодействует команда дизайн-системы.— Принципы организации дизайн-системы— Описание и документирование частей дизайн системы— Разбор бэклога— Тест по разделуРаздел 6ЗаключениеПодведём итоги и закрепим полученные знания.‍— Итоги курса— Финальный тест