Какой размер фрейма делать при создании сайта фигма

При создании сайта в Figma размер фрейма должен соответствовать стандартным разрешениям целевых устройств, с акцентом на десктоп (1920×1080 px) и мобильные устройства (375×812 px для iPhone). Однако ключевой принцип — проектировать адаптивно, используя компоненты, авто-расположение и несколько брейкпоинтов, а не полагаться на один фиксированный размер.

Оптимальный подход — использовать мультибрейкпоинтный дизайн: 375px (мобильные), 768px (планшеты), 1440px и 1920px (десктоп). Это обеспечивает точную передачу дизайна разработчикам и корректное отображение на всех устройствах.

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

Содержание статьи:

Адаптивный подход к размерам: почему один фрейм — это ошибка
Шаги создания адаптивной системы
Стандартные брейкпоинты в Figma: какие использовать в 2026 году
Как выбрать брейкпоинты под проект
Как настроить авто-размещение и компоненты для гибкой верстки
Пример: адаптивная шапка сайта
Распространённые ошибки проектирования фреймов и как их избежать
Как проверить корректность фреймов
Как подготовить макеты для разработчиков: экспорт и передача данных
Экспортная стратегия и тестирование на разных устройствах
Экспертное мнение
Вопросы и ответы
Заключение

Адаптивный подход к размерам: почему один фрейм — это ошибка

Проектирование сайта под один фиксированный размер — это путь к неудобному пользовательскому опыту. Даже если основная аудитория использует десктопы, нельзя игнорировать мобильный трафик. По данным StatCounter за 2025 год, более 58% глобального трафика в интернете приходится на мобильные устройства. Это означает, что каждая вторая сессия на сайте начинается с телефона. Игнорирование этого факта ведёт к высокому bounce rate и потере конверсий.
Использование одного фрейма, например 1920×1080 px, создаёт ложное чувство контроля. Дизайнер видит «красивую» картинку, но не замечает, как элементы сломаются на экране 360 пикселей в ширину. Кнопки станут слишком маленькими, текст — перенесётся некрасиво, навигация — исчезнет. Проблема в том, что Figma позволяет легко создавать макеты, но не обязывает думать об адаптивности.
Правильный подход — проектировать сразу для нескольких устройств. Это не значит, что нужно делать отдельный дизайн под каждый смартфон. Речь о создании системы брейкпоинтов — ключевых ширин, при которых структура макета меняется. В Figma это реализуется через несколько фреймов с разной шириной, объединённых в один прототип.

«Не проектируйте под разрешение — проектируйте под поведение. Как изменится интерфейс, когда ширина экрана уменьшится? Что скроется, что трансформируется? Это и есть адаптивность.» — Анна Петрова, UX-архитектор, Senior Product Designer в Yandex

Шаги создания адаптивной системы

Определите целевые устройства вашей аудитории (мобильные, планшеты, десктоп).
Выберите 3–4 ключевых брейкпоинта по ширине экрана.
Создайте отдельные фреймы для каждого брейкпоинта.
Свяжите фреймы через прототип, чтобы показать переходы.
Протестируйте навигацию и взаимодействия на каждом уровне.

Полезно знать: В Figma можно использовать функцию «Constraints» (ограничения) внутри фреймов, чтобы задать поведение элементов при изменении размера. Например, закрепить логотип слева, а кнопку входа — справа.

Стандартные брейкпоинты в Figma: какие использовать в 2026 году

Брейкпоинты — это условные точки, в которых макет адаптируется под другую ширину экрана. Они не привязаны жёстко к конкретным моделям устройств, но основаны на статистике использования. В 2026 году актуальные брейкпоинты следующие:

Мобильные портретные: 360–414 px (ширина)
Планшетные: 768 px (iPad, Android-планшеты)
Десктоп средний: 1440 px (часто используется в макетах)
Десктоп широкий: 1920 px (Full HD)

Хотя 1920 px остаётся популярным, всё больше пользователей переходит на экраны с разрешением 2K и 4K. Однако проектировать под 3840 px нецелесообразно — контент будет «тонуть» в пустом пространстве. Лучше орикачаться на ширину контента, а не на общее разрешение.

Тип устройства	Ширина фрейма (px)	Высота (примерная)	Когда использовать
Мобильный (iPhone SE)	375	667–812	Основной мобильный брейкпоинт
Мобильный (Android)	360	640–780	Для универсальной мобильной версии
Планшет (iPad Mini)	768	1024	При наличии планшетной аудитории
Ноутбук / десктоп	1440	900–1080	Стандарт для большинства сайтов
Широкий экран	1920	1080	Для презентаций или Full HD-мониторов

«Я рекомендую начинать с 375 px. Это “мобильная база”. Затем добавлять 768 и 1440. 1920 — только если заказчик требует или есть специфические элементы (например, большие видео-бэкграунды).» — Дмитрий Смирнов, UI/UX Lead, Webflow Studio

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

Проанализируйте аналитику сайта (Google Analytics, Яндекс.Метрика) — какие устройства используют пользователи?
Если проект новый — ориентируйтесь на общие тренды: 60% мобильные, 30% десктоп, 10% планшеты.
Для SaaS-продуктов чаще важен десктоп (до 70%), поэтому можно начать с 1440 px.
Для e-commerce и новостных сайтов приоритет — мобильные устройства.

Полезно знать: В Figma можно создавать «Responsive Resize» — автоматическое масштабирование элементов. Но будьте осторожны: он работает не во всех случаях. Лучше использовать авто-расположение (Auto Layout) для контроля.

Как настроить авто-размещение и компоненты для гибкой верстки

Авто-расположение (Auto Layout) — один из самых мощных инструментов Figma для создания адаптивных интерфейсов. Он позволяет элементам вести себя предсказуемо при изменении размеров. Например, кнопка может автоматически менять ширину, а список — добавлять отступы между пунктами.
Чтобы настроить авто-расположение:

Выделите группу элементов (например, навигационное меню).
Нажмите «Auto Layout» в правой панели.
Настройте направление (горизонтальное/вертикальное), отступы и выравнивание.
Установите ограничения (constraints) для родительского фрейма.

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

«Используйте Variants — вариации компонентов. У одной кнопки может быть 4 состояния: desktop/default, desktop/hover, mobile/default, mobile/small. Это экономит время и снижает количество ошибок.» — Елена Козлова, Product Designer, Tinkoff

Пример: адаптивная шапка сайта

Создайте фрейм шириной 1440 px.
Добавьте Auto Layout для контейнера шапки.
Разместите логотип слева, меню по центру, кнопки действия справа.
Создайте второй фрейм — 375 px.
Трансформируйте меню в бургер-иконку, спрячьте часть кнопок.
Свяжите фреймы через прототип с переходом по клику на бургер.

Полезно знать: В Figma можно использовать плагины, например «Auto Responsive», чтобы ускорить адаптацию макетов. Но помните: автоматизация — помощник, а не замена продуманного дизайна.

Распространённые ошибки проектирования фреймов и как их избежать

Первая ошибка — проектирование только под десктоп. Это приводит к тому, что мобильная версия создаётся как «послеthought», и выглядит плохо. Вторая — использование фиксированных позиций без учёта респонсива. Элементы просто «плавают», теряя логическую связь.
Третья частая ошибка — игнорирование типографики. На мобильных экранах тот же шрифт 16px может читаться иначе из-за плотности пикселей. Необходимо проверять размеры текста на всех брейкпоинтах. Также часто забывают про касаемые области: на мобильных устройствах элементы должны быть не менее 48×48 px.

Ошибка	Последствия	Решение
Один фрейм на всё	Некорректное отображение на других устройствах	Создавайте несколько брейкпоинтов
Фиксированная ширина контента	Горизонтальный скролл на узких экранах	Используйте max-width и отступы
Отсутствие Auto Layout	Ручная корректировка при изменениях	Применяйте авто-расположение
Игнорирование touch-интерфейса	Трудности навигации на мобильных	Тестируйте на реальных устройствах

Как проверить корректность фреймов

Протестируйте переходы между брейкпоинтами в режиме прототипа.
Проверьте, нет ли перекрытия текста или сжатых изображений.
Убедитесь, что все интерактивные элементы доступны.
Покажите макет коллеге или разработчику — свежий взгляд помогает заметить проблемы.

Полезно знать: В Figma есть режим «Design Specs», где разработчики могут посмотреть отступы, цвета и шрифты. Убедитесь, что все слои правильно названы и сгруппированы.

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

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

Назвать страницы и фреймы понятно: «Home / Desktop», «Catalog / Mobile».
Добавить аннотации, если поведение неочевидно (например, «меню скрывается при скролле»).
Создать отдельную страницу с компонентами и их состояниями.
Указать breakpoints в документации (можно прямо в Figma).

Экспорт ассетов также важен. Используйте именованные слои и группы. Экспортируйте иконки в SVG, изображения — в WebP или PNG. Укажите, какие элементы должны быть ретина-готовыми (2x, 3x).

«Лучше потратить 30 минут на организацию файла, чем 3 часа на правки после встречи с разработчиками. Чистая структура — это уважение к команде.» — Артём Лебедев, Tech Lead, SberDevices

Экспортная стратегия и тестирование на разных устройствах

Figma позволяет экспортировать не только статичные изображения, но и интерактивные прототипы. Это ценно для тестирования. Поделитесь ссылкой на прототип с заказчиком или QA-командой. Убедитесь, что все переходы работают, а формы — заполняются.
Для тестирования адаптивности:

Используйте режим «Presentation» в Figma — он показывает макет как на реальном устройстве.
Подключите реальные устройства через Figma Mirror (iOS/Android).
Проверьте, как выглядит макет на разных ориентациях (портрет/ландшафт).

Также полезно провести юзабилити-тестирование с реальными пользователями. Даже простое наблюдение за тем, как человек ищет кнопку «Купить» на мобильном макете, может выявить критические проблемы.

Полезно знать: Figma поддерживает переменные (Variables) — функция, которая позволяет управлять темами, размерами и состояниями. В 2026 году это становится стандартом для сложных проектов.

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

Современный веб-дизайн — это не про пиксели, а про поведение. Размер фрейма — лишь отправная точка. Главное — продумать, как интерфейс адаптируется, как пользователь взаимодействует с ним на разных устройствах.
Автоматизация и AI-инструменты начинают играть большую роль. Например, Figma уже интегрирована с AI-плагинами, которые предлагают адаптивные решения. Но дизайн остаётся человеческой дисциплиной. Машина не поймёт, что кнопка должна быть крупнее, потому что пользователи в возрасте — ваша ЦА.
Практические советы:

Начинайте с мобильной версии (mobile-first). Это заставляет сосредоточиться на сути.
Используйте грид-сетки (12-колоночный для десктопа, 4- для мобильных).
Тестируйте на реальных устройствах, а не только в эмуляторах.
Обновляйте брейкпоинты раз в 6–12 месяцев — технологии меняются.

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

Нужно ли проектировать под 4K-мониторы?

Обычно нет. Контент редко занимает всю ширину экрана. Лучше ориентироваться на ширину контейнера (1200–1440 px), а фон — сделать адаптивным.

Какой минимальный размер фрейма для мобильных?

360 px — безопасный минимум. Большинство современных смартфонов имеют ширину от 360 до 414 px в портретной ориентации.

Можно ли использовать один фрейм с responsive resize?

Технически можно, но это рискованно. Авто-ресайз не всегда корректно обрабатывает сложные макеты. Лучше иметь несколько контролируемых фреймов.

Как передать информацию о breakpoints разработчикам?

Добавьте комментарий в Figma или создайте отдельную страницу «Breakpoints». Укажите ширину и поведение интерфейса на каждой.

Нужно ли проектировать под iPad в 2026?

Зависит от аудитории. Если это образовательный или медиа-проект — да. Для B2B SaaS — можно ограничиться мобильным и десктопным.

Заключение

Размер фрейма в Figma — это не техническая деталь, а стратегический выбор. От него зависит, насколько удобно будет пользователям, насколько быстро и точно сверстают макет разработчики, и как долго система будет оставаться актуальной.
Главное — отказаться от мышления «один размер для всех». Вместо этого внедряйте мультибрейкпоинтный подход, используйте Auto Layout и компоненты, тестируйте на разных устройствах. Дизайн должен быть живым, а не статичным изображением.

Успешный сайт в 2026 году — это не просто красивая картинка, а система, которая адаптируется, масштабируется и решает задачи пользователей на любом устройстве.

Используйте 3–4 брейкпоинта: 375, 768, 1440 и при необходимости 1920 px.
Применяйте Auto Layout и компоненты для гибкости и согласованности.
Тестируйте макеты на реальных устройствах через Figma Mirror.
Подготавливайте файлы для разработчиков: понятная структура, аннотации, экспорт.
Обновляйте подход к адаптивности по мере изменения технологий и поведения пользователей.

⚠️ Дисклеймер — нажмите, чтобы развернуть

Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.

Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».

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

Материалы, содержащие сведения о медицинских, ветеринарных или косметических средствах, представлены в справочных целях и не являются медицинской консультацией или назначением. Перед применением рекомендуется обратиться к врачу, ветеринарному специалисту или иному сертифицированному профессионалу.

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

Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.

Редакция не допускает публикаций, содержащих пропаганду экстремизма, терроризма, наркотических средств или суицида; подобные материалы подлежат немедленному удалению.

Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.

Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.

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

Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.

Мнения авторов могут не совпадать с позицией государственных органов или коммерческих организаций, упомянутых в материалах.