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

[Кот феликс]

Ссылка на картинку

Умение выделять систему из дизайна и переносить её в код сокращает время на создание новых частей больших продуктов. Даже на небольших проектах такие системы упрощают процесс разработки и поддержки.
Год: 2022
Формат: HTML, EPUB
Программа курса
Раздел 1

Введение
Общие сведения о дизайн-системах. Рассмотрим разные типы и свойства дизайн-систем, разберём примеры.

— Базовые знания по дизайн-системам
— Тест по разделу
— Отличие дизайн-систем от UI-китов
— Плюсы и минусы использования дизайн-систем
— Основы работы в Figma

Раздел 2

Декомпозиция
Разберём выделение компонентов и научимся работать с токенами.

— Токены
— Пошаговая демонстрация: разбираем демо-проект
— Практика: выделение токенов
— Кейс: эталонная реализация
— Промежуточный тест
— Компоненты и блоки
— Практика: выделение компонентов
— Кейс: эталонная реализация
— Тест по разделу

Раздел 3

Техническая реализация
Перейдём к практике и начнём работать с кодом. Реализуем компоненты.

— Подготовка
— Пошаговая демонстрация: разбираем компоненты
— Практика: токены, текст и шапка
— Кейс: эталонная реализация
— Практика: лейаут, подвал, иконки
— Кейс: эталонная реализация
— Практика: логотип, поле поиска и кнопка
— Кейс: эталонная реализация
— Практика: горизонтальный переключатель, боковая навигация, ссылка
— Кейс: эталонная реализация
— Практика: карточка и коллапс
— Кейс: эталонная реализация
— Тест по разделу
— Альтернативные способы организации стилей в проекте

Раздел 4

Расширение дизайн-системы
Научимся работать с изменениями в макетах.

— Почему происходят изменения и что с этим делать
— Пошаговая демонстрация: реализация изменений
— Практическое задание: реализация новых компонентов в дизайн-системе
— Кейс: эталонная реализация

Раздел 5

Дизайн-система и командная работа
Разберёмся, с кем и как взаимодействует команда дизайн-системы.

— Принципы организации дизайн-системы
— Описание и документирование частей дизайн системы
— Разбор бэклога
— Тест по разделу

Раздел 6

Заключение
Подведём итоги и закрепим полученные знания.
‍
— Итоги курса
— Финальный тест