Дизайн-система — страница 2

Материалы для проекта «Дизайн-система» объединяют несколько направлений. Начните с разделов ниже.

Материалы

• Дизайн учебной статьи: читательские сценарии и дизайн-регламент

  Читательские сценарии и дизайн-регламент для последовательного оформления и расширения ProfessorWeb

• Макет учебного портала в Figma

  16 уроков: оригинальный учебный портал, сетка и текст, компоненты, Auto Layout, адаптивные экраны, состояния поиска и передача.

• Figma: задача и файл учебного портала

  Формулируем сценарий портала и создаём структуру файла перед рисованием экранов.

• Figma: фреймы и структура слоёв

  Отделяем экраны, секции и группы и задаём иерархию будущего портала.

• Figma: сетка и пространство страницы

  Рассчитываем рабочую ширину, колонки и отступы каталога для двух размеров экрана.

• Figma: текст и читаемая иерархия

  Создаём типографическую шкалу и проверяем длинные заголовки на тех же данных.

• Figma: цветовые роли и переменные

  Связываем палитру с назначением элементов и отделяем базовые значения от смысловых ролей.

• Figma: кнопка и Auto Layout

  Строим кнопку, которая сохраняет отступы при изменении текста, и разбираем размеры контейнеров.

• Figma: компонент и его экземпляры

  Делаем кнопку повторно используемой и объясняем наследование и локальные изменения.

• Figma: варианты и свойства кнопки

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

• Figma: карточка курса и список

  Собираем карточку из связанных элементов и задаём правила для списка с разной длиной текста.

• Figma: шапка, вводный блок и футер

  Собираем общие области портала и отделяем глобальную навигацию от выбора курса.

• Figma: страница курса и текст урока

  Переводим посетителя от сравнения карточек к программе курса и читаемой учебной странице.

• Figma: векторные значки и обложки

  Создаём простые учебные значки из фигур, различаем boolean operations и необратимое объединение.

• Figma: адаптивные экраны и размеры

  Меняем число колонок и состав навигации, сохраняя содержание и общие компоненты.

• Figma: поиск и состояния каталога

  Проектируем результат, пустую выдачу и загрузку, сохраняя запрос и действие восстановления.

• Figma: переходы и прокрутка прототипа

  Связываем каталог, курс и урок и различаем навигацию, overlay и прокрутку внутри страницы.

• Figma: передача макета разработчику

  Собираем договор компонентов, экспортируем отдельную графику и фиксируем ограничения учебного прототипа.

• Библиотека компонентов и Storybook: проект «Набор»

  Двенадцать последовательных уроков проекта «Набор» с полными состояниями исходников.

• Storybook: изолированная мастерская компонентов

  Подготовить React-компонент, CSF-историю и конфигурацию Storybook без приложения-клиента.

• Storybook: цвета, размеры и семантические токены

  Выделить общие CSS-переменные и показать их значения в мастерской.

• Storybook: контракт кнопки и варианты оформления

  Создать варианты, размеры, нативные атрибуты и правила композиции класса.

• Storybook: истории состояний и управляемые параметры

  Организовать CSF-истории, controls и примеры длинного текста.

• Storybook: поле ввода, подпись и сообщение об ошибке

  Связать label, input и пояснения устойчивыми идентификаторами.