Краткое содержание

• Что означает «размер лендинга» в Figma
• Стандартные ширины для desktop, tablet и mobile
• Сетки, колонки и отступы — практические рекомендации
• Высота лендинга и длина контента
• Плотность пикселей, ретина и экспорт активов
• Адаптивность: фреймы, constraints и Auto Layout
• Влияние размеров дизайна на SEO и скорость
• Проверка и передача разработчикам
• Чек‑лист: настройка проекта Figma для лендинга
• FAQ
• Дальше — как мы можем помочь

Что означает «размер лендинга» в Figma

Под «размером лендинга» обычно понимают параметры рабочих фреймов (frames) в Figma: ширину и начальные высоты для ключевых точек адаптивности (desktop/tablet/mobile). Важно понимать: фрейм в Figma — не окончательная высота сайта, а канва для макета и проверки размещения блоков, отступов и видимости ключевых элементов при разных ширинах. В проекте вы создаёте несколько фреймов — для каждой точки перелома (breakpoint) — и на их основе формируете адаптивную верстку.

Почему это важно

• Единые стандарты позволяют верстать быстро и без ошибок.
• Правильные размеры упрощают тестирование UX и загрузки.
• Они влияют на SEO через скорость загрузки и мобильную доступность (mobile-first).

Стандартные ширины для desktop, tablet и mobile

Ниже — практические рекомендации по рабочим ширинам. Это отправная точка — всегда оценивайте аналитику трафика клиента и целевые устройства.

Практика: создайте фреймы 1440 / 1366 / 1024 / 768 / 375 / 320 и на каждом проверьте расположение ключевых CTA, форм и визуальных блоков.

Сетки, колонки и отступы — практические рекомендации

Сетка — основа предсказуемой вёрстки. Лучший выбор для лендинга — 12-колоночная сетка с гибкими колонками. Стандартные значения:

• Система колонок: 12 колонок;
• Gutter (межколоночный отступ): 16–24px (обычно 20px либо 24px для современных проектов);
• Margins (наружный отступ / контейнер): 16–32px на mobile, 24–40px на tablet, 80–120px на desktop для централизованных макетов;
• Container width (полезная ширина контента): 1140–1280px внутри 1440px фрейма — оставьте отступы по бокам для воздуха;
• Line length (длина строки): 50–75 символов оптимально для читаемости; контролируйте это на tablet и desktop.

Пример настройки в Figma

1. Выберите фрейм 1440px → Layout Grid → Columns: 12 → Margin: 120px → Gutter: 24px.
2. Сделайте отдельные сетки для mobile (1 колонка с margin 16px) и tablet (8–12 колонок с margin 32px).
3. Зафиксируйте глобальные отступы в дизайн-системе: small=8, base=16, medium=24, large=40, xlarge=80.

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

Высота лендинга и длина контента

Высота лендинга — гибкая. Важно ориентироваться на цель страницы и удержание пользователя, а не на фиксированную высоту. Но есть практические правила:

• Hero экраны: держите основные CTA и value proposition «above the fold» на ключевых разрешениях (desktop 1440/1366 и mobile 375);
• Оптимальная длина лендинга зависит от предложения: простые предложения — 1–2 экрана; сложные B2B-предложения — 3–6 экранов с деталями и социальным доказательством;
• Не дублируйте весь текст в hero — концентрируйте на УТП; подробности в секциях ниже, с якорными ссылками;
• Тестируйте скролл: аналитика покажет, на каких секциях пользователи теряются; если важный CTA ниже — поднимайте или вставляйте повторяющийся CTA.

Практический приём

В Figma создайте фрейм высотой 900–1100px для desktop-hero и 700–900px для tablet; для мобильной верхней части 650–800px. Это не фикс — это ориентир для проверки размещения элементов.

Плотность пикселей, ретина и экспорт активов

При проектировании учитывайте устройства с высокой плотностью пикселей. Рекомендации:

• Экспорт графики: генерируйте @1x, @2x и @3x версии для изображений и иконок. В Figma используйте экспорт 1x, 2x, 3x при экспорте PNG/WebP/SVG;
• Для векторных иконок предпочитайте SVG — он масштабируется без потери качества и меньше в весе;
• Изображения: используйте современные форматы WebP/AVIF на бэкенде, но в дизайне ориентируйтесь на соотношение и размеры (например, hero-image 1600–2000px по ширине для крупного фонового изображения);
• Проверяйте соотношение сторон и критические точки кадрирования для разных экранов (центральный объект должен оставаться видимым на 375px ширине).

Настройки экспорта в Figma

1. Иконки: экспорт в SVG + PNG@1x,@2x для резервного варианта.
2. Растровые изображения: JPG/WEBP 1x 800–1200px, 2x 1600–2400px, 3x 2400–3600px — в зависимости от секции.
3. Background hero: 1600–2400px ширины и сжать до разумного качества (60–80% для JPG).

Адаптивность: фреймы, constraints и Auto Layout

Создание адаптивных макетов в Figma — не только про несколько фреймов, но и про использование инструментов, которые облегчают передачу вёрстке.

Constraints

Constraints (ограничения привязки) помогают задавать поведение элементов при изменении ширины фрейма: закрепление слева/справа/по центру или растяжение по ширине. Указывайте constraints для ключевых элементов (логотип, навигация, CTA). Например, логотип — закреплён слева, кнопка CTA — справа/по центру.

Auto Layout

Auto Layout ускоряет создание гибких блоков (кнопки, карточки, формы). Использование Auto Layout даёт понятную структуру для разработчиков: отступы внутри блока, порядок элементов и поведение при переносе строк.

Практические шаги

1. Настройте ключевые фреймы и примените одинаковую систему колонок для всех desktop-фреймов.
2. Для динамического контента используйте Auto Layout, задайте min/max widths у элементов.
3. Проверьте поведение элементов на 375 и 320px, переключая constraints и наблюдая переносы.

Влияние размеров дизайна на SEO и скорость

Размеры макета и выбранные изображения напрямую влияют на производительность страницы, а следовательно — на SEO. Google учитывает скорость загрузки и мобильную удобочитаемость (Core Web Vitals, mobile-first индексация).

Что проектировщику важно держать в голове

• Оптимизируйте изображения по размеру и формату — тяжелые макеты приведут к увеличению LCP (Largest Contentful Paint);
• Не перегружайте лендинг большими фоновыми изображениями, используйте адаптивные srcset и современные форматы на стороне разработчика;
• Минимизируйте количество критических веб-шрифтов: используйте system fonts или заранее оптимизированные webfonts и задавайте корректную загрузку (font-display: swap);
• Думайте про порядок рендеринга: первыми должны загружаться элементы, видимые above the fold — оптимизируйте их вес и приоритет загрузки.

Маркетинговая логика

SEO — это долгосрочная стратегия: правильная настройка макетов и оптимизация изображений уменьшает расходы на удержание трафика и повышает конверсию без постоянных затрат на рекламу. Контекстная реклама воронку ускоряет, но стабильный органический трафик зависит от производительности и удобства на мобильных устройствах.

Проверка и передача разработчикам

Хорошая передача дизайна экономит время разработки и сокращает баги. Контрольные элементы:

• Передавайте фреймы для всех ключевых breakpoints (точек перелома) с сетками и отступами;
• Сниппеты CSS: укажите размеры контейнеров, значения margin/padding и типы используемых шрифтов/весов;
• Экспорт ассетов: пометьте, какие форматы и плотности нужны (@1x,@2x,@3x или SVG);
• Документация по интерактивам: указать hover/focus состояния, анимации и задержки (duration/easing);
• Тестовый чек-лист: проверить hero на 1440/1366/1024/375/320, фоновые изображения, переносы текста и адаптацию форм.

Передача в Figma

1. Группируйте фреймы по breakpoint-ам и пометьте названиями (Desktop — 1440, Tablet — 1024, Mobile — 375).
2. Добавьте комментарии и примечания с критичными местами (фиксирующиеся шапки, поведение меню и т.п.).
3. Создайте страницу «Design tokens» с переменными (цвета, spacing, типографика), чтобы разработчик мог быстрее собрать CSS/SCSS-переменные.

Чек‑лист: настройка проекта Figma для лендинга

Краткий чек‑лист перед тем, как передать макет на вёрстку:

1. Созданы фреймы: 1440 / 1366 / 1024 / 768 / 375 / 320;
2. Настроена 12-колоночная сетка для desktop и адаптивные сети для tablet/mobile;
3. Все изображения экспортируются в нужных размерах и форматах (SVG для иконок, WebP/JPG для растра, @2x/@3x для ретины);
4. Auto Layout и constraints применены к динамическим и повторяющимся компонентам;
5. Есть страница с design tokens (цвета, типографика, расстояния);
6. Документированы критические состояния (hover, active, focus) и анимации;
7. Проверено расположение CTA и форм «above the fold» на ключевых разрешениях;
8. Проведён базовый тест производительности (предполагаемый вес hero и основных изображений);
9. Добавлены заметки по SEO (alt для изображений, структура заголовков и приоритет загрузки шрифтов).

FAQ

Дальше — как мы можем помочь

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