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