Дизайн-системы для фронтенд-разработчиков

Коллектив авторов. — HTML Academy, 2022-02-06.Умение выделять систему из дизайна и переносить её в код сокращает время на создание новых частей больших продуктов. Даже на небольших проектах такие системы упрощают процесс разработки и поддержки.Введение
Термин — основа всего
Вопросы и детали
Разные дизайн-системы
Тест по разделу
Тест по разделу (Ответы)
Каталог российских дизайн-систем
Каталог зарубежных дизайн-систем
Обзор интерфейса Figma
Навигация, инструменты, настройки Figma
Содержание и возможности Figma
Словарь терминов
Практика работы в Figma
Декомпозиция
От страниц к компонентам
Введение в токены
Сравнение или семантика
Как это работает
Задание 1. Выделение токенов
Разбор: выделение токенов
Промежуточный тест по токенам
Промежуточный тест по токенам (Ответы)
Лейаут
Компоненты и элементы управления
Блоки контента
Результат
Задание 2. Выделение компонентов
Разбор: выделение компонентов
Тест по разделу
Тест по разделу (Ответы)
Техническая реализация
Подготовка
Токены и текст
Сетка, иконки и логотип
Кнопка, чипс и чекбокс
Поле ввода, ссылка и карточка подарка
Задание 1. Токены, текст и шапка
Разбор: токены, текст и шапка
Задание 2. Лейаут, подвал, иконки
Разбор: лейаут, подвал, иконки
Задание 3. Логотип, поле поиска и кнопка
Разбор: логотип, поле поиска и кнопка
Задание 4. Горизонтальный переключатель, боковая навигация, ссылка
Разбор: горизонтальный переключатель, боковая навигация, ссылка
Задание 5. Карточка и коллапс
Разбор: карточка и коллапс
Тест по разделу
Тест по разделу (Ответы)
Способ организации CSS: atomic CSS (eng)
Способ организации CSS: rscss (eng)
Способ организации CSS: oocss (eng)
Канареечные релизы
Советы по улучшению опыта разработки (eng)
Расширение дизайн-системы
Как происходит расширение?
Пройдёмся по новым макетам
Табы и карточка вишлиста
Баннер и карточка подарка. Релиз.
Задание
Разбор задания
Дизайн-система и командная работа
Важное о коммуникации
Важное о документации
Разбор бэклога
Тест по разделу
Тест по разделу (Ответы)
Заключение
Заключение
Финальный тест по курсу
Финальный тест по курсу (Ответы)После прохождения курса вы сможете:
-Отличать UI-кит от дизайн-системы и правильно выбирать их под задачу
-Выделять системы из существующего дизайна
-Выделять компоненты и правильно использовать переменные
-Строить дизайн-системы в коде с нуля
-Эффективнее организовывать процесс работы с дизайнерами
-Документировать дизайн-систему
-Публиковать дизайн-систему и вносить в неё изменения