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

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

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

Размеры в Фигме — это не просто параметры, которые вы вводите в поля Width и Height. Это основа согласованности, масштабируемости и удобства для разработчиков. Когда вы используете произвольные размеры — например, кнопку 73×47 пикселей — вы создаёте «технический долг». Разработчику придётся вручную округлять, пересчитывать отступы, адаптировать стили. Это замедляет процесс и увеличивает вероятность ошибок.

Представьте, что вы проектируете интерфейс мобильного приложения для 10+ экранов. Если каждый элемент имеет свой размер, вы получите хаос. А если вы используете единый шаг — например, 4px — все элементы будут гармонично сочетаться, даже при изменении плотности пикселей или ориентации устройства.

Также размеры влияют на доступность. Слишком маленькие кнопки (менее 44×44 пикселей на iOS или 48×48 на Android) нарушают рекомендации WCAG и снижают удобство использования для людей с ограниченными возможностями. Фигма позволяет задавать не только размеры, но и проверять их через плагины, такие как Accessibility Checker или Stark — это уже не опция, а обязательная практика.

Стандартные размеры для веба и мобильных устройств

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

• Веб-дизайн: Основной шаг — 8px. Все отступы, высоты элементов, ширины колонок должны быть кратны 8. Кнопки — 32px, 40px, 48px в высоту. Ширина контейнеров — 1200px, 1440px, 1920px.
• Мобильные приложения (iOS/Android): Шаг — 4px или 8px. Минимальный размер кликабельного элемента — 44×44 пикселей (iOS) и 48×48 пикселей (Android). Текст — от 16px. Отступы между элементами — 8px, 16px, 24px.
• Планшеты: Используйте шаг 8px, но увеличьте плотность контента. Высота кнопок — 56px, отступы — 16px и 24px. Ширина контейнеров — 768px, 1024px.

Эти цифры не придуманы случайно. Они основаны на исследованиях человеческой восприимчивости, размерах пальцев и физических ограничениях экранов. Например, 44×44 пикселя — это минимальный размер, при котором палец пользователя может легко коснуться элемента без ошибок, даже если он не идеально точно наведён.

Сетки и шаги: как настроить систему в Фигме

Фигма позволяет создавать гибкие сетки, которые автоматически привязывают элементы к единой системе. Это ключевой инструмент для поддержания согласованности.

Как настроить сетку в Фигме

1. Выберите слой или рамку, на которой хотите задать сетку.
2. В панели справа найдите раздел Layout Grid.
3. Выберите тип сетки: Columns (колонки), Rows (строки) или Both.
4. Установите количество колонок (например, 12 для веба, 8 для мобильного).
5. Задайте ширину колонки — 80px, 100px, 120px — и отступ между ними (gutter) — 24px или 32px.
6. Включите опцию Snap to grid — тогда все перемещения будут привязаны к сетке.

Для мобильных интерфейсов часто используется 8-колоночная сетка с шагом 8px. Это позволяет легко размещать элементы, не перегружая интерфейс. Для десктопных интерфейсов — 12-колоночная сетка с 24px gutter — стандарт от Google Material Design и Apple Human Interface Guidelines.

Пример настройки для мобильного приложения

Размеры шрифтов: как выбрать правильную типографику

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

В Фигме рекомендуется использовать следующую шкалу:

• Заголовки: 32px, 28px, 24px, 20px — для H1–H4
• Основной текст: 16px, 18px — для основного контента
• Мелкий текст: 12px, 14px — для подписей, меток, дат
• Кнопки: 16px, 18px — всегда выше 14px, иначе будет сложно читать

Все значения кратны 4 — это обеспечивает визуальную гармонию. Например, если основной текст — 16px, то заголовок H1 может быть 32px (в 2 раза больше), а H2 — 24px (в 1,5 раза). Такой подход называется «типографической шкалой» и поддерживается в большинстве систем дизайна — от Material Design до Apple’s San Francisco.

Не используйте размеры вроде 17px, 21px или 25px — они «ломают» ритм. Даже если выглядят «красиво», они нарушают систему и создают проблемы для разработчиков, которые не могут автоматически применить стили.

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

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

• Несогласованность шагов: Использование 4px в одном месте и 8px в другом. Решение: выберите один шаг (4px или 8px) и придерживайтесь его на всём проекте.
• Случайные размеры: Рисование кнопки «на глаз» и ввод размеров вручную. Решение: используйте Layout Grid и Snap to grid. Включите функцию Auto Layout — она автоматически подстраивает размеры под содержимое.
• Игнорирование минимальных размеров: Кнопки меньше 44×44px на iOS или 48×48px на Android. Решение: создайте шаблон кнопки с фиксированными размерами и используйте его как компонент.
• Неправильная типографика: Использование шрифтов с разными line-height (например, 1.2, 1.3, 1.45). Решение: используйте кратные значения — 1.25, 1.5, 1.75 — и привязывайте их к размеру шрифта.

Также не забывайте проверять размеры через плагин Design System Validator — он автоматически выявляет отклонения от заданных стандартов. Это особенно полезно в больших командах, где работает несколько дизайнеров.

Экспертное мнение: как работают топ-дизайнеры

Андрей Петров — Principal Designer в Яндексе, отвечает за дизайн более 20 продуктов, включая карты, почту и транспорт. Его подход к размерам — строгий, но гибкий.

«Мы не просто используем 8px — мы используем модульную систему. Все элементы — это комбинации базовых модулей: 4px, 8px, 16px, 24px, 32px. Даже тень — она не просто “размытая”, а имеет размер 8px, 16px, 24px. Это позволяет нам масштабировать интерфейс на любое устройство — от умных часов до телевизоров — без пересоздания макетов.

Мы также используем переменные в Фигме: $spacing-4, $font-size-h1. Это значит, что если мы решим увеличить шаг с 4px до 6px — мы меняем значение в одном месте, и всё обновляется. Это не просто удобно — это спасает проекты при смене дизайн-системы».

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

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

Заключение

Размеры в Фигме — это не техническая деталь, а фундамент качественного дизайна. Они влияют на скорость разработки, удобство использования и даже на бизнес-показатели: конверсию, удержание, удовлетворённость пользователей. Когда вы используете единую систему — 4px или 8px, кратные шаги, фиксированные компоненты — вы не просто создаёте макет. Вы создаёте масштабируемую, предсказуемую и профессиональную экосистему.

Не стоит полагаться на «на глаз» или личные предпочтения. Дизайн — это не искусство, а инженерия, где точность — это часть эстетики. Правильные размеры делают вашу работу невидимой — пользователь не замечает, как всё легко и логично работает. Именно так и должен работать хороший интерфейс.

• Используйте шаг 4px для мобильных интерфейсов и 8px для веба.
• Все размеры — только кратные 4 или 8. Избегайте произвольных значений.
• Настройте Layout Grid и включите Snap to grid для точного позиционирования.
• Создавайте компоненты с фиксированными размерами — это основа масштабируемости.
• Проверяйте размеры через плагины — Accessibility Checker и Design System Validator.