Какой размер сайта в фигме

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

Стандартные размеры в Figma для сайтов

При проектировании веб-интерфейсов в Figma важно понимать, что нет единого «правильного» размера холста. Однако есть устоявшиеся стандарты, которые используются профессиональными дизайнерами и командами разработки. Эти размеры основаны на статистике разрешений экранов пользователей, данных Google Analytics и рекомендациях производителей устройств.

Наиболее распространённый размер для десктопной версии сайта — 1440 пикселей по ширине. Это компромисс между узкими экранами (1366×768) и современными мониторами (до 4K). Такой выбор позволяет дизайнеру видеть, как контент будет выглядеть на большинстве устройств, не перегружая интерфейс избыточным пространством.

Для мобильных устройств чаще всего используют два основных размера:

• 375×812 пикселей — стандарт iPhone 13/14 mini;
• 414×896 пикселей — размеры iPhone 11 Pro Max и аналогичных Android-устройств.

Эти значения позволяют точно моделировать поведение интерфейса на популярных смартфонах.

Почему именно 1440 пикселей?

Ширина 1440 px стала золотым стандартом не случайно. Большинство пользователей интернета имеют разрешение экрана от 1366 до 1920 пикселей. При этом:

• 1366×768 — всё ещё актуально для бюджетных ноутбуков;
• 1920×1080 — самый популярный формат Full HD;
• 1440 px — идеальный баланс: достаточно широкий для комфортного контента, но не создаёт проблем на узких экранах.

Если сделать макет шире 1440 px, например 1920, есть риск, что на более маленьких экранах появится горизонтальная прокрутка или обрезка важных элементов. Если же сделать уже — теряется потенциал использования пространства.

Как выбрать правильный размер под проект

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

Первое — определите тип проекта. Это лендинг, интернет-магазин, блог или веб-приложение? Например, для SaaS-платформы с большим количеством таблиц и панелей управления может быть оправдано использование ширины 1920 px, особенно если основная аудитория работает с ПК.

Второе — проанализируйте данные о пользователях. Если у вас есть доступ к аналитике (например, Яндекс.Метрика или Google Analytics), проверьте, какие устройства и разрешения экранов используют посетители. Если 70% трафика — с мобильных, начинайте с мобильного макета (mobile-first подход).

Третье — согласуйте с командой разработки. Верстальщики часто предпочитают макеты 1440 px, так как это упрощает адаптацию под CSS-сетки (например, Bootstrap 12-колоночная сетка рассчитана на ~1140–1170 px контентной области).

Примеры выбора размера под нишу

Сетки и расположение элементов

Правильная сетка — основа профессионального дизайна. В Figma можно использовать встроенные grid-системы: layout grids, frame grids и auto-layout. Они помогают выравнивать элементы, соблюдать отступы и обеспечивать визуальную гармонию.

Для десктопных макетов чаще всего применяются:

• 12-колоночная сетка с шириной колонки 80–100 px;
• Гutter (промежуток между колонками) — 20–30 px;
• Отступы от краёв — 80–100 px слева и справа.

Например, при ширине холста 1440 px и отступах по 100 px, доступная ширина контента — 1240 px. Это хорошо вписывается в 12-колоночную систему с колонкой 86.66 px и гаттером 24 px (стандарт Bootstrap).

Как настроить сетку в Figma

1. Выделите фрейм с макетом.
2. В правой панели найдите раздел «Layout Grids».
3. Выберите «Columns», установите количество — 12.
4. Задайте ширину колонки, гаттер и отступы.
5. Активируйте опцию «Visible» для визуальной помощи.

Для мобильных макетов сетка обычно упрощается:

• Одна или две колонки;
• Отступы — 16–24 px;
• Контент занимает всю доступную ширину за вычетом полей.

Важно помнить, что сетка — это направляющая, а не догма. Иногда нужно выйти за её пределы ради креатива, но делать это следует осознанно.

Адаптивный дизайн и брейкпоинты

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

Брейкпоинты — это точки, в которых макет изменяет свою структуру. В Figma их можно моделировать с помощью отдельных фреймов или компонентов с вариациями.

Основные брейкпоинты:

• 320–375 px — узкие смартфоны;
• 768 px — планшеты в портретной ориентации;
• 1024 px — планшеты в ландшафтной ориентации;
• 1200–1440 px — десктопы;
• 1920 px и выше — большие экраны.

Как организовать адаптивность в Figma

1. Создайте главный макет (например, 1440 px).
2. Сделайте копию и измените ширину под нужный брейкпоинт.
3. Используйте Auto Layout для кнопок, меню, списков — они будут масштабироваться.
4. Настройте скрытие/показ элементов (например, мобильное меню).
5. Добавьте аннотации для разработчиков: где что меняется.

Ошибки, которых нужно избегать

Даже опытные дизайнеры иногда допускают ошибки при работе с размерами в Figma. Вот самые распространённые:

• Проектирование только под 1920 px. Это создаёт проблемы на меньших экранах. Контент может обрезаться, появляться горизонтальная прокрутка.
• Игнорирование mobile-first подхода. Если сайт плохо работает на телефоне, вы потеряете до 60% пользователей (по данным StatCounter, мобильный трафик превышает 55% глобально).
• Жёсткая привязка к пикселям без учёта плотности экрана. Figma работает в логических пикселях, но важно помнить, что на Retina-экранах 1 px = 2 физическим пикселям.
• Отсутствие сетки и отступов. Это приводит к хаотичному расположению элементов и усложняет верстку.
• Несогласованность между макетами. Разные размеры шрифтов, кнопок, отступов на десктопе и мобильной версии.

Чек-лист перед сдачей макета

• Проверены все брейкпоинты: mobile, tablet, desktop.
• Сетка настроена и соблюдается.
• Авто-расположение (Auto Layout) применено к интерактивным элементам.
• Отступы и интервалы соответствуют дизайн-системе.
• Текст читаем на всех размерах (не менее 16 px на мобильных).
• Кнопки и ссылки имеют достаточный размер для касания (минимум 44×44 px).
• Файл структурирован: страницы, фреймы, слои подписаны.

Экспертное мнение

«Сегодня многие дизайнеры фокусируются на пикселях, забывая о сути. Размер в Figma — это не цель, а инструмент. Главное — создать удобный, понятный и быстрый интерфейс. Да, 1440 px — хороший стандарт, но я начинаю с user journey, а не с холста. Сначала исследую, кто будет пользоваться сайтом, как, с чего начнёт и куда пойдёт. Только потом выбираю размер.»

— Елена Ковалёва, руководитель отдела UX в продуктовой компании, 12 лет в дизайне

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

Вопросы и ответы

Заключение

Размер сайта в Figma — это не просто цифра, а результат анализа, стратегии и технических требований. Хотя стандартные значения вроде 1440 px для десктопа и 375 px для мобильных являются хорошей отправной точкой, важно помнить, что каждый проект уникален. Успешный дизайн рождается там, где стандарты сочетаются с пониманием пользователя.

• Стандартная ширина десктопного макета — 1440 px.
• Для мобильных устройств — 375×812 px (iPhone).
• Используйте 12-колоночную сетку с отступами 80–100 px.
• Проектируйте под брейкпоинты: mobile, tablet, desktop.
• Всегда проверяйте макет на читаемость и удобство навигации.