Макеты и дизайн-системы
Figma, Penpot, компоненты, варианты, Auto Layout, токены, прототипы, передача разработчику и перенос макета в код.
Материалы
- Компоненты оформления статьи: настройка шаблонов
Компоненты и параметры оформления на готовом учебном проекте reading-lab для ProfessorWeb
- Законченная страница нового урока
Законченная страница нового урока на готовом учебном проекте reading-lab для ProfessorWeb
- Дизайн страницы учебного курса
Дизайн страницы учебного курса для последовательного оформления и расширения 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: контракт кнопки и варианты оформления
Создать варианты, размеры, нативные атрибуты и правила композиции класса.