Макет учебного портала в Figma
Создадим макет открытого учебного портала «Маршрут»: каталог трёх курсов, программу «Сетка каталога» и первый урок. Общий пример сохраняется от брифа до передачи разработчику. Нужен доступ к редактированию файла Figma Design; платная командная библиотека и дополнительные режимы переменных для основного результата не требуются.
Это самостоятельная адаптация приёмов официального начального курса Figma: вместо портфолио строим учебный портал. Цветовые переменные, варианты, состояния поиска и передача добавлены по актуальной документации. Интерфейс описан по документам, доступным 11 октября 2026 года; положение панелей может отличаться.
Уроки по порядку
- Задача и файл учебного портала
- Фреймы и структура слоёв
- Сетка и пространство страницы
- Текст и читаемая иерархия
- Цветовые роли и переменные
- Кнопка и Auto Layout
- Компонент и его экземпляры
- Варианты и свойства кнопки
- Карточка курса и список
- Шапка, вводный блок и футер
- Страница курса и текст урока
- Векторные значки и обложки
- Адаптивные экраны и размеры
- Поиск и состояния каталога
- Переходы и прокрутка прототипа
- Передача макета разработчику
Материалы проекта
Скачать тексты, спецификацию и SVG-референсы.
Архив содержит собственные учебные данные и графику. SVG-референсы являются схемами, а не снимками Figma и не рабочим .fig файлом. Макет, прототип, измерения и реализация при подготовке уроков не выполнялись; все результаты описаны как ожидаемые.