Как убрать дробные значения в фигме

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

Почему появляются дробные значения в Figma

Figma — векторный редактор, основанный на математических вычислениях. Он не ограничивает пользователей жёсткой сеткой пикселей, что обеспечивает гибкость при работе с масштабом, трансформацией и выравниванием. Однако именно эта свобода часто приводит к появлению дробных значений в свойствах объектов: X=10.345, Y=27.667, Width=80.125 и т.д.

Такие значения возникают при копировании элементов между артбордами с разным смещением, при зуме 125% или 150%, при использовании авто-выравнивания (Auto Layout) с дробными отступами, а также при импорте данных из других программ. Даже простое перетаскивание может оставить объект «между пикселями», особенно если отключены привязки.

Дроби не ломают дизайн, но создают дискомфорт при передаче макетов разработчикам. В коде CSS или SwiftUI требуется чёткая пиксельная точность, и значения вроде 16.667px выглядят непрофессионально. Кроме того, они могут вызвать субпиксельный рендеринг, блюры и другие визуальные дефекты.

Когда дроби неизбежны

Некоторые ситуации технически оправданы. Например, при центрировании блока шириной 100px внутри контейнера 150px его X-координата будет (150–100)/2 = 25 — идеально. Но если ширина контейнера 149px, центр смещается на 24.5 — и это корректно с точки зрения математики. Проблема возникает, когда такие значения попадают в финальную спецификацию.

• Масштабирование: работа на зуме 110% или 133% увеличивает вероятность неточных позиций.
• Auto Layout: при равномерном распределении трёх элементов в контейнере 100px каждый получит по ~33.333px.
• Импорт из Sketch или Illustrator: внешние файлы могут содержать дробные координаты.
• Плагины: некоторые автоматизированные инструменты генерируют объекты без округления.

Основные методы установки целых чисел в позициях и размерах

Простейший способ — ручное исправление. Выделите объект, найдите поле X, Y, W или H в правой панели свойств и введите целое число. Figma примет значение и переместит/изменил объект соответствующим образом. Этот подход надёжен, но неэффективен при работе с сотнями элементов.

Более продвинутый вариант — использование сочетаний клавиш. При активированной рамке объекта кликните по значению размера или координаты, затем используйте стрелки вверх/вниз для изменения с шагом 1px. Удержание Shift увеличивает шаг до 10px. Это быстрее, чем ручной ввод, но требует внимания.

Пошаговый алгоритм ручного округления

1. Выделите нужный объект или группу (можно использовать Shift для множественного выбора).
2. Перейдите в правую панель Inspector и найдите поля X, Y, Width, Height.
3. Кликните по значению и введите новое — округлённое до целого числа.
4. Проверьте, не нарушилось ли выравнивание с соседними элементами.
5. Повторите для всех проблемных объектов.

Для массовой обработки подойдёт функция «Replace selection with frame» или предварительная группировка. Также можно использовать команду «Reset scaling to 1:1», доступную через контекстное меню (правый клик → «Reset scaling»), чтобы устранить искажения, вызванные масштабированием.

Автоматическая привязка и настройки Figma для работы с пикселями

Figma предлагает встроенные инструменты, минимизирующие появление дробных значений. Главный из них — Pixel Grid (сетка пикселей). Чтобы её включить:

• Откройте меню View (или нажмите ⌘ + ‘ )
• Активируйте опцию «Snap to pixel grid»
• Убедитесь, что включена опция «Constrain to square» при необходимости

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

Настройка привязок и сеток

Помимо пиксельной сетки, используйте:

• Object snapping — автоматическое выравнивание краёв и центров объектов.
• Grids and layout grids — наложите 8px-сетку на артборд, чтобы структурировать расположение.
• Constraints — задайте поведение элементов при изменении размеров родительского фрейма.

Эти инструменты не устраняют дроби напрямую, но снижают вероятность их появления. Например, при использовании 8px-системы все отступы и размеры будут кратны 8, что автоматически исключает большинство дробных значений.

Плагины для массовой коррекции дробных значений

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

• Pixel Snap — один из самых известных. Округляет X, Y, W, H всех выделенных объектов до ближайшего целого числа.
• Round Me — позволяет выбрать степень округления: до целых, до десятых, до 5 или 10 px.
• Cleaner — помимо округления, удаляет пустые фреймы, сливает дубли и оптимизирует слои.
• Layout++ — расширенный контроль над Auto Layout, включая принудительное округление отступов.

Как использовать Pixel Snap

1. Выберите объекты, которые нужно скорректировать.
2. Откройте плагин через меню Plugins → Pixel Snap → Run.
3. Плагин мгновенно округлит все значения.
4. Проверьте результат: иногда округление может сместить выравнивание.

Обратите внимание: плагины не всегда учитывают контекст. Например, если три элемента в Auto Layout занимают 100px и должны быть равны, округление каждого до 33px даст итог 99px — и появится зазор. В таких случаях лучше использовать относительные значения или вручную корректировать крайние элементы.

Распространённые ошибки и как их избежать

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

Ещё одна ловушка — работа на нестандартном масштабе. На 133.33% даже при включённой привязке объекты могут занимать некорректные позиции. Рекомендуется работать на 100%, 50% или 200% для максимальной точности.

Чек-лист перед передачей макета разработчику

• Все ключевые фреймы имеют целочисленные X, Y, W, H.
• Включена привязка к пиксельной сетке при финальной проверке.
• Использованы плагины для массового округления.
• Auto Layout-контейнеры имеют размеры, кратные 1px.
• Проверены отступы и выравнивание после округления.

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

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

Профессиональные команды всё чаще автоматизируют контроль качества. Некоторые используют кастомные скрипты через Figma API, чтобы находить и исправлять дроби в фоновом режиме. Это особенно актуально для систем дизайна, где консистентность — приоритет.

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

Заключение

Дробные значения в Figma — техническая особенность, а не ошибка. Они возникают из-за гибкости редактора, но могут подорвать доверие к качеству макета при передаче в разработку. Полностью исключить их невозможно, но можно минимизировать с помощью комплексного подхода.

• Figma допускает дробные значения из-за своей векторной природы.
• Включите Snap to pixel grid для автоматической привязки к целым пикселям.
• Используйте плагины вроде Pixel Snap для массового округления.
• Проверяйте не только элементы, но и корневые фреймы.
• Очищайте макеты перед финальной передачей в разработку.