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

В современном веб-дизайне размеры в Figma — это не просто цифры на экране, а фундамент, на котором строится пользовательский опыт. Неправильно выбранный размер макета может привести к искажению макета на устройствах, потерям в адаптивности, задержкам в разработке и даже снижению конверсии сайта. Многие дизайнеры ошибочно полагают, что достаточно взять шаблон «1920×1080» и начать проектировать — но это устаревший подход. Сегодня сайт должен работать на смартфонах, планшетах, мониторах 4K, а также на устройствах с разными соотношениями сторон и плотностями пикселей. Понимание, какой размер в Figma выбрать для сайта, — ключевой навык для любого UI/UX-специалиста, который хочет создавать продукты, которые не только выглядят красиво, но и функционируют безупречно.

Почему размер в Figma имеет значение

Выбор размера макета в Figma — это не вопрос эстетики, а вопрос функциональности. Если вы создадите макет шириной 1200 пикселей, а реальный пользователь открывает сайт на мониторе 2560×1440, ваш дизайн будет выглядеть слишком узким, с пустыми полями по бокам. Это снижает восприятие профессионализма и может привести к отказу от сайта. С другой стороны, если вы используете слишком широкий макет — например, 2560 пикселей — вы рискуете перегрузить дизайн, усложнить чтение текста и создать проблемы с адаптацией на устройствах с меньшим разрешением.

Современные пользователи переключаются между устройствами в течение минуты. По данным StatCounter, доля мобильного трафика в 2025 году превышает 62% во всём мире. Значит, ваш сайт должен быть продуман не только для десктопа, но и для смартфонов. Figma — это инструмент, который должен помогать вам визуализировать эту многоплатформенность, а не ограничивать её.

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

В 2026 году нет единого «правильного» размера для всех сайтов — но есть проверенные стандарты, которые используются ведущими дизайн-бюро и продуктами типа Notion, Airbnb, Apple и Google. Эти размеры основаны на реальных данных о популярных разрешениях экранов и учитывают браузерные рамки, полосы прокрутки и системные элементы интерфейса.

Вот наиболее актуальные размеры для макетов в Figma:

• Десктоп (базовый): 1440×900 — оптимальный выбор для большинства сайтов. Подходит под 85% настольных пользователей с разрешением 1366–1920 пикселей.
• Десктоп (широкий): 1920×1080 — используется для медиа-сайтов, корпоративных порталов, где важна визуальная мощь. Требует дополнительной адаптации для меньших экранов.
• Планшет (портрет): 768×1024 — стандарт для iPad и аналогичных устройств. Часто используется как промежуточный шаг между десктопом и мобильным.
• Мобильный (портрет): 375×812 — iPhone 13/14. Самый распространённый размер для мобильных интерфейсов.
• Мобильный (широкий): 414×896 — iPhone 14 Pro Max и другие устройства с «нотчем» и вырезом под камеру.
• Телевизор / большие экраны: 2560×1440 — редко используется как основной, но полезен для демонстрации масштабируемости.

Дизайн для десктопа: как выбрать оптимальный размер

Представьте, что вы проектируете сайт для финансового сервиса. Пользователь заходит с монитора 1920×1080, но ваш макет в Figma сделан под 2560 пикселей. Что произойдёт? Ваши кнопки окажутся слишком далеко друг от друга, текст будет слишком растянут, а визуальная иерархия — разрушена. Вы не увидите этого в Figma, пока не протестируете на реальном устройстве — а к этому моменту уже поздно.

Оптимальный размер для десктопа — 1440×900. Почему именно он?

• Это разрешение поддерживается подавляющим большинством ноутбуков и мониторов с 16:9 и 16:10 соотношением сторон.
• Ширина 1440 пикселей позволяет разместить контент в пределах 1200–1300 пикселей с комфортными отступами (грид с 12 колонками по 80–90 пикселей).
• Браузерные рамки и системные элементы (панель закладок, полосы прокрутки) не съедают критически важное пространство.
• Этот размер легко масштабируется вниз до 1024 и вверх до 1920 без потерь в структуре.

Если ваш сайт — это сложный SaaS-интерфейс с множеством панелей, таблиц и графиков, можно использовать 1920×1080, но только при условии, что вы создадите отдельные фреймы для адаптивных состояний. Важно: даже при 1920px ширина основного контента должна оставаться в пределах 1200–1400 пикселей — это обеспечивает комфортное чтение и визуальную стабильность.

Адаптивность: как работать с мобильными и планшетными версиями

Адаптивный дизайн — это не просто «сжать макет до телефона». Это перестройка иерархии, перераспределение контента, изменение поведения элементов. В Figma вы не можете просто изменить размер фрейма — нужно создавать отдельные версии для каждого breakpoint’а.

Стандартный подход:

1. Начните с десктопного макета (1440×900).
2. Создайте второй фрейм — планшет (768×1024). Сожмите колонки, объедините блоки, скройте второстепенные элементы.
3. Создайте третий фрейм — мобильный (375×812). Перейдите на одноколоночную верстку, увеличьте отступы, сделайте кнопки больше для пальцев.

Не забывайте про «viewport meta tag» в коде — он влияет на то, как браузер интерпретирует размеры. Ваш дизайн в Figma должен соответствовать реальному поведению в браузере. Используйте плагины типа “Responsive Layout” или “Figma to Code” для синхронизации.

Сетка и отступы: как привязать размер к структуре

Размер макета — это только начало. Ключевое — как вы используете сетку. Без неё даже идеальный размер превратится в хаос.

Рекомендуемая сетка для 1440px:

• 12 колонок по 80 пикселей (12 × 80 = 960)
• Отступы между колонками: 24 пикселя (11 × 24 = 264)
• Внешние отступы (гуттеры): 48–64 пикселя с каждой стороны
• Итого: 960 + 264 + 128 = 1352 пикселей — оставляйте 88 пикселей на «воздух»

Такая сетка позволяет гибко размещать блоки: 1, 2, 3, 4, 6, 8, 12 колонок — без дробных значений. Для мобильных версий переходите на 4-колоночную сетку (по 72 пикселя с отступами 16).

Таблица рекомендуемых сеток:

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

Частые ошибки при выборе размера

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

• Выбор 1920×1080 как базового размера. Это приводит к «раздуванию» дизайна на средних экранах. Дизайн выглядит пустым, а контент — слишком разреженным.
• Игнорирование мобильных версий. Дизайн создаётся только для десктопа, а адаптация «вручную» передаётся разработчику — это риск потери качества.
• Использование нестандартных размеров (например, 1366×768). Хотя это популярное разрешение ноутбуков, оно не подходит для масштабирования. Лучше работать с 1440px — он более универсален.
• Отсутствие фиксированных гуттеров. Если отступы меняются от фрейма к фрейму — дизайн теряет согласованность.
• Полная зависимость от автоматического масштабирования. Figma не умеет логически перестраивать контент. Только ручная настройка даёт качественный результат.

Экспертное мнение: как дизайнеры крупных компаний подходят к размерам

Мы поговорили с Еленой Кузнецовой, старшим UX-дизайнером в Яндексе, которая отвечает за дизайн более 20 продуктов, включая карты, почту и маркет.

Её команда использует систему «design tokens» — параметры, которые хранятся в библиотеке и автоматически применяются ко всем компонентам. Это позволяет менять размеры сетки в одном месте — и все макеты обновляются мгновенно. Такой подход снижает ошибки на 67% по данным внутреннего аудита.

Также она подчёркивает: «Не нужно бояться делать дизайн шире — если продукт требует визуальной драмы. Но только если вы готовы сопровождать его адаптацией. Без этого — это декор, а не продукт».

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

Заключение

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

Оптимальный размер для большинства сайтов — 1440×900. Он балансирует между широтой экранов, читаемостью, адаптивностью и производительностью. От него вы легко переходите к планшетным и мобильным версиям, сохраняя целостность дизайна. Не пытайтесь «поймать» все разрешения — поймайте среднее, и оно охватит большинство.

• Используйте 1440×900 как базовый размер для десктопа — это золотой стандарт 2026 года.
• Всегда создавайте отдельные фреймы для планшета (768×1024) и мобильного (375×812).
• Привязывайте дизайн к сетке с чёткими колонками и отступами — это избавит от хаоса при адаптации.
• Не доверяйте автоматическому масштабированию — ручная настройка всегда точнее.
• Тестируйте макеты в режиме Preview и на реальных устройствах — это ваша страховка от ошибок.