Как выбрать размер в фигме

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

Почему размеры в Фигме — это не просто цифры

Выбор размера в Фигме — это не про то, «как красиво выглядит макет». Это про совместимость, производительность и пользовательский опыт. Дизайн, созданный без учёта реальных устройств, становится «декорацией» — он не может быть реализован без переделок. Разработчики сталкиваются с проблемами: элементы не помещаются, шрифты размываются, кнопки становятся слишком маленькими для пальцев. По данным исследования NNGroup, 68% пользователей покидают мобильные сайты, если интерфейс кажется неудобным или перегруженным — а часто причина именно в некорректных размерах элементов.

Представьте, что вы создали кнопку высотой 40 пикселей для веба, но на мобильном устройстве с плотностью пикселей 3x она физически становится слишком мелкой — пользователь не может её нажать. Или вы задали ширину контейнера 1200px, не учитывая, что большинство пользователей используют экраны шириной 1366–1440px. Результат — белые полосы по бокам, дисбаланс в композиции, снижение доверия к бренду.

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

Стандартные размеры для iOS, Android и веба

Каждая платформа имеет свои рекомендуемые размеры. Игнорирование этих стандартов — одна из главных причин возврата макетов на доработку. Ниже — актуальные на 2026 год базовые размеры.

• iOS: Основной размер для iPhone — 375×812 px (iPhone 13/14/15). Для iPad — 768×1024 px (портрет) и 1024×768 px (альбомный). Используйте шаблоны в Фигме: «iPhone 15 Pro», «iPad Air».
• Android: Базовый размер — 360×640 px (экраны с плотностью mdpi). Но реальные устройства варьируются: Samsung Galaxy S23 — 412×915 px, Google Pixel 7 — 412×892 px. Рекомендуется использовать 360dp как базовую точку отсчёта.
• Веб: Стандартная ширина для десктопа — 1440 px. Для мобильного веба — 375–414 px. Ширина 1920 px используется редко — только для мониторов 4K. Большинство пользователей работают на экранах 1366–1536 px.

Для точности используйте встроенные шаблоны Фигмы: в библиотеке «Templates» выберите «Mobile» или «Web». Там уже заданы правильные размеры, соотношения сторон и сетки. Не создавайте размеры вручную, если не уверены — это приводит к накоплению ошибок.

Как работать с сетками и базовыми единицами

Сетка — это скелет вашего дизайна. Она определяет, как элементы будут располагаться, как они будут масштабироваться и как будут взаимодействовать друг с другом. В Фигме основная единица — 8px. Это не случайно: 8 делится на 2, 4, и 1 — что позволяет легко создавать пропорциональные отступы, высоты кнопок, расстояния между элементами.

• Отступы: 8px, 16px, 24px, 32px — всегда кратны 8.
• Высота кнопок: 40px, 48px, 56px — стандарт для мобильных интерфейсов.
• Шрифты: 12px, 14px, 16px, 18px, 20px — также кратны 2, но лучше придерживаться 14–16px для основного текста.

Настройте Grid в Фигме: выберите Frame → Layout Grid → Set to 8px. Включите «Columns» и «Gutter» — это позволит легко выравнивать элементы. Для мобильных интерфейсов используйте 4-колоночную сетку, для десктопа — 12-колоночную.

Не забывайте про «Baseline Grid» — он помогает выравнивать текст по горизонтальной оси. Особенно важно для длинных текстов, где смещение на 1–2 пикселя нарушает визуальную гармонию.

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

Сегодня 60% трафика приходит с мобильных устройств. Значит, ваш макет должен работать и на экране 320px, и на 4K. Фигма предоставляет мощные инструменты для этого — Auto Layout и Constraints.

Чтобы сделать элемент адаптивным:

1. Выберите объект или группу.
2. Включите Auto Layout (в панели свойств).
3. Установите Constraints: «Left + Right», «Top + Bottom», «Fill container» — в зависимости от поведения.
4. Используйте «Hug» для текста и «Fill» для фонов.
5. Протестируйте в режиме Preview (Cmd+P) на разных размерах экрана.

Пример: кнопка с текстом. Если вы установите «Hug Width» и «Hug Height», она будет подстраиваться под длину текста. Если вы выберете «Fill», она займёт всю доступную ширину — это идеально для форм.

Для сложных макетов создавайте компоненты с вариациями. Например, один компонент «Кнопка» может иметь 3 варианта: «Маленькая», «Средняя», «Широкая» — и переключаться в зависимости от контекста.

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

Ошибки в размерах — одни из самых дорогостоящих в дизайне. Вот пять самых распространённых:

• Выбор произвольных размеров. Например, 1024×768 для мобильного веба. Решение: всегда начинайте с шаблонов устройства.
• Игнорирование плотности пикселей. Создание макета в 1x на десктопе, а потом экспорт в 2x/3x без масштабирования. Решение: используйте «Export As» с указанием масштаба (1x, 2x, 3x).
• Несоответствие отступов. 10px, 13px, 17px — всё разное. Решение: придерживайтесь 8px-базовой сетки.
• Слишком маленькие кликабельные зоны. Кнопки меньше 44×44 px на iOS — нарушают стандарты доступности. Решение: всегда проверяйте минимальные размеры по WCAG 2.2.
• Неиспользование компонентов. Каждый элемент повторяется 10–20 раз — а вы меняете его вручную. Решение: создавайте компоненты с параметрами и используйте Instance Overrides.

Проверяйте свои макеты через плагин «Perfect Pixel» или «Figma to Code» — они покажут, насколько точно ваш дизайн соответствует стандартам разработки.

Экспертное мнение: как дизайнеры крупных компаний решают эту задачу

Екатерина Морозова, старший дизайнер в Яндексе, работает с 2018 года над масштабными продуктами: Яндекс.Музыка, Карта, Такси. Её подход — системный и строгий.