Думайте экранами

Ярослав Субботин описывает самую частую ошибку студентов так: плакат рисуется как одна длинная «колбаса» в Figma, на которую накидываются элементы так, чтобы смотрелось красиво целиком. А потом выясняется, что в реальном браузере зритель видит страницу не целиком, а экран за экраном, и при скролле композиция распадается.

Веб-плакат — это не печатный лист, который мы видим разом. Это последовательность видимых областей. Каждый экран (viewport) — отдельная сцена с собственным визуальным центром. Когда вы рисуете макет, делите его на экраны прямо в Figma. Положите полупрозрачные фреймы размером 1440×900 (десктоп) или 390×844 (мобильный) поверх макета и проверьте, как выглядит каждый кадр по отдельности. Если какой-то из них пустой или перегруженный, это сигнал к доработке.

Абсолютная любовь и боль

Отдельного разговора заслуживает position: absolute. Это, пожалуй, самая болезненная тема для студентов, и вот почему.

Абсолютное позиционирование позволяет разместить элемент в любой точке экрана по точным координатам. В Figma это выглядит просто: перетащил объект куда хочется, записал координаты, перенёс в код. Проблема в том, что эти координаты фиксированные. Они привязаны к конкретному размеру экрана, и когда окно становится уже или шире, элементы начинают налезать друг на друга, уезжать за край или собираться в кучу.

Анна Комкова описывает ситуацию со стороны преподавателей: кураторы по дизайну просят студентов делать «более блочные макеты, менее многослойные, чтобы люди не только на позишенах всё делали, а у них была возможность поработать с адаптивной вёрсткой». Иными словами, чем больше в макете абсолютного позиционирования, тем сложнее сделать адаптивную версию.

Это не значит, что position: absolute нельзя использовать вообще. Он отлично работает для декоративных элементов, которые «плавают» поверх основной вёрстки, для хаотичных и непрерывных композиций на viewport-единицах, и для одноэкранных плакатов, где всё привязано к размеру окна. Проблемы начинаются, когда абсолютами выстраивается структура всей страницы, включая текстовые блоки, навигацию и информационные секции.

Красные флаги в макете

Есть несколько вещей, которые сигнализируют о проблемах ещё до того, как вы написали первую строку кода. Если вы замечаете что-то из этого списка в своём макете, стоит остановиться и пересмотреть подход.

Все элементы стоят на абсолютных координатах в пикселях. Если в Figma каждый объект размещён вручную через x/y без привязки к сетке или контейнеру, в коде он тоже будет стоять на фиксированных координатах. При изменении размера окна ничего не перестроится.

Текст задан фиксированным кеглем без системы. Если заголовок — 48px, подзаголовок — 32px, а основной текст — 16px, и нигде не продумано, что будет на мобильном экране, типографика на телефоне будет либо слишком крупной, либо потребует ручной корректировки в каждом брейкпоинте.

Макет нарисован только для одной ширины экрана. Если у вас есть только десктопная версия на 1440 пикселей и больше ничего, вы узнаете о проблемах адаптивности только в момент вёрстки. К этому моменту менять композицию будет мучительно.

Элементы перекрывают друг друга по замыслу, но без продуманной логики слоёв. Наложение в Figma — это один z-index, наложение в коде — это система позиционирования. Если вы не понимаете, какой элемент лежит выше какого и почему, в браузере перекрытия будут вести себя непредсказуемо.

Горизонтальные раскладки без плана «а что на узком экране?» Три колонки по 30% ширины красиво смотрятся на десктопе. На телефоне шириной 390 пикселей каждая колонка окажется шириной 117 пикселей, и текст внутри станет нечитаемым. Нужен брейкпоинт, который перестроит колонки в одну вертикальную стопку.

Советы по Figma

Несколько практических советов, которые упростят переход от макета к коду.

1. Рисуйте на этапе концепта минимум две версии макета: десктоп (1440 пикселей) и мобильную (390 пикселей). Планшетная версия (768 пикселей) желательна, но не обязательна на раннем этапе. Две крайние точки дадут вам понимание, как содержимое перестраивается.
2. Используйте Auto Layout в Figma. Этот инструмент имитирует поведение Flexbox в CSS. Если ваш макет в Figma собран на Auto Layout, его будет гораздо проще перевести в код, потому что логика размещения уже совпадает.
3. Обрачивайте всё в Auto Layout. Не размещайте каждый объект отдельно на холсте. Соберите логические группы (секция заголовка, блок с описанием, карточка с иллюстрацией) в фреймы, а потом выстраивайте эти фреймы через Auto Layout. В коде это станет div-ами с Flexbox или Grid внутри.
4. Отделяйте декоративные элементы от структурных. В Figma можно маркировать слои: структурные фреймы (те, что поедут на Flexbox) и декоративные объекты (те, что будут на position: absolute). Это поможет вам и на этапе вёрстки, и при ревью макета.