Конструтокр лендингов в Figma

О ПРОЕКТЕ

Для создания лендингов платных продуктов используем внутренний конструктор (о конструкторе лендингов в Нетологии рассказал Павел Комягин в статье на Хабре). На момент реализации проекта у нас не было общего файла с макетами всех блоков конструктора. При необходимости дизайнеры команды лендингов верстали блоки конструктора заново. Тоже самое делали дизайнеры продуктовой команды. Также отсутствовала документация к конструктору, что затрудняло обучение новых сотрудников.

ЗАДАЧА

Собрать адаптивные макеты всех блоков в одном файле, чтобы собрать макет страницы в фигме можно было быстрее чем на конструкторе.

ОБОСНОВАНИЕ

Зачем нам библиотека в фигме, если есть конструтор? Мы стали часто разрабатывать шаблоны лендингов для бизнес юнитов. Проводить исследования, показывать несколько вариантов леднингов. И поняли, что Использовать наш конструктор для разработки шаблонов, проведения тестов и исследований лендингов не всегда удобно. Для таких случаев удобно собирать лендинги в фигме из готовых блоков, которые ведут себя также как в конструкторе.

РЕАЛИЗАЦИЯ

Решили подойти к этой задачи системно. Поэтому действовали в несколько этапов:

Актуализировали всю типографику и собрали ее в библиотеку стилей.
Актуализировали все палитры бренда и собрали их в библиотеку. Сетки тоже упаковали в стили.

Все цвета собраны в стили и разбиты по разделам-палитрам

Приступили к вёрстки блоков с использованием autolayout. Придерживались принципов атомарного дизайна. Все «атомы», «молекулы» и «организмы» упаковывали в компоненты, создавали комбайны.
Все блоки разбили на разделы и разложили по страницам файла, чтобы облегчить поиск по библиотеки.
Описали работу каждого блока и возможности его настроек в конструкторе.

Вид блок может сильно измениться в зависимости от настроек конструктора. Описали эти зависимости в документации

Также описали правила использования всех цветов, шрифтов и сеток.
Добавили навигацию по файлу со статусами работы, быстрому доступу к главному компоненту и документации.

Файл получился объемным, что ускорить ориентацию по файлу добавили навигацию

РЕЗУЛЬТАТ

Получили большой файл, который назвали «Библиотека блоков конструктора». Это оптимизирует работу и помогает собирать макеты быстрее.

Библиотека помогает:

Видеть в одном файле все актуальные стили, цвета и типографику
Наглядно видеть варианты вёрстки одного и того же блока
Быстро собирать шаблоны лендингов
Создавать несколько макетов лендинга для исследования без привязки к конструктору
Видеть возможности доработки блоков для улучшения функционала конструктора

Опубликовали файл в библиотеку и теперь в несколько кликов можем собирать основу для лендинга