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

В Figma дробные значения в координатах и размерах объектов появляются автоматически при масштабировании, выравнивании или работе с сеткой. Чтобы убрать дробные значения, нужно активировать опцию «Snap to Pixel» (Привязка к пикселям) и настроить параметры привязки в настройках документа или холста. Главное — убедиться, что включена целочисленная привязка, а также использовать плагины или ручную корректировку при необходимости.

Значение дробных чисел в дизайне интерфейсов

Figma — мощный инструмент для проектирования цифровых интерфейсов, но его высокая точность может стать двойственным благом. Дробные значения в координатах X/Y, ширине, высоте или радиусах углов возникают при увеличении масштаба, свободном перемещении или использовании сложной геометрии. На первый взгляд это не критично, однако в реальности пиксельная чёткость важна для восприятия элементов на экране.
Когда дизайнер передаёт макет разработчику, дробные значения могут вызвать проблемы при верстке. Например, CSS поддерживает дробные пиксели (через `rem`, `em` или `vw`), но финальный рендеринг зависит от устройства. На экранах с низким DPI это может привести к размытию границ, особенно у тонких линий или иконок. Поэтому приведение всех параметров к целым числам — стандарт хорошего тона в командной работе.
Многие команды используют внутренние гайдлайны, где прямо указано: «все размеры должны быть кратны 1px». Это упрощает коммуникацию и снижает количество правок после передачи макета. Особенно важно это в адаптивных проектах, где каждый пиксель на счету.

Как работает привязка в Figma: основы точности

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

• Grid Snap — привязка к сетке, заданной вручную;
• Snap to Pixel — принудительное округление до целых пикселей;
• Object snapping — привязка к краям других объектов;
• Precision mode — временная отмена привязки при удержании клавиши (по умолчанию Alt).

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

Шаги по убиранию дробных значений

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

1. Активируйте Snap to Pixel. Найдите иконку магнита в правом верхнем углу и убедитесь, что она включена. Если значок серый — кликните, чтобы активировать.
2. Настройте шаг привязки к сетке. В том же меню выберите «Grid snapping» и установите значение 1. Это исключит привязку к половинкам пикселей.
3. Отключите или настройте layout grid. Если в фрейме используется layout grid с шагом 0.5 — измените его на 1 или удалите, если он не нужен.
4. Проверьте текущие объекты. Выделите проблемные элементы и в инспекторе справа вручную округлите значения X, Y, W, H до ближайшего целого.
5. Используйте авто-выравнивание. Через панель выравнивания (Align) переместите объекты строго по осям — Figma сам скорректирует позиции при включённой привязке.

Если вы работаете с компонентами или instance, помните: изменения нужно вносить в мастер-компонент. Иначе дробные значения могут сохраняться при замене вариантов.

Пример: исправление фрейма с дробями

Представьте, что у вас есть карточка товара с шириной 320.4px и позицией X = 15.7. Вы хотите привести всё к целым числам:

• Выделяете фрейм;
• В поле ширины вводите 320;
• В поле X — 16;
• Figma автоматически переместит содержимое, если включена привязка.

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

Ошибки и как их избежать

Даже опытные дизайнеры сталкиваются с «возвращением» дробных значений. Вот самые распространённые причины и способы их устранения.

Ошибка 1: Привязка включена, но значения всё равно дробные

Это происходит, когда вы используете layout grid с шагом меньше 1. Например, сетка 8px с колонками 0.5 — приводит к позициям вроде 16.5. Решение: измените шаг сетки на 1 или отключите привязку к layout grid.

Ошибка 2: Масштабирование привело к дробям

Если вы увеличили объект на 105%, его размеры стали нецелыми. Лучше использовать масштаб 100%, 200% и т.д., или вручную корректировать результат. Альтернатива — создавать копии с нужными размерами, а не масштабировать.

Ошибка 3: Проблемы с группами и вложенными фреймами

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

Ошибка 4: Синхронизация с плагинами

Некоторые плагины (например, для автолейаута или иконок) могут добавлять объекты с дробными координатами. Всегда проверяйте результат после их использования и при необходимости корректируйте вручную.

Дополнительные методы: плагины и скрипты

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

Популярные плагины для очистки дробных значений

• Pixel Perfect — автоматически выравнивает все выбранные объекты по пиксельной сетке. Поддерживает массовое применение.
• Cleaner — убирает неиспользуемые стили, дубликаты и корректирует позиции объектов. Есть опция округления до целых пикселей.
• Round Me — специализируется на округлении координат и размеров. Прост в использовании: выделил — запустил — получил результат.

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

Скрипты и API Figma

Для продвинутых пользователей доступен Figma API. Можно написать скрипт, который проходится по всем страницам и округляет значения:
«`js
figma.currentPage.selection.forEach(node => {
node.x = Math.round(node.x);
node.y = Math.round(node.y);
node.width = Math.round(node.width);
node.height = Math.round(node.height);
});
«`
Такой подход подходит для больших проектов с сотнями компонентов. Его можно интегрировать в CI/CD процесс перед публикацией design system.

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

По её словам, команда использует комбинацию встроенных настроек и плагина Round Me. Перед каждым релизом проводится «чистка» макетов. Это стало частью чек-листа QA.
Также Елена отмечает, что важно обучать новых сотрудников этому процессу. «Молодые дизайнеры часто не замечают дробей, потому что на большом масштабе это не видно. Мы делаем акцент на этом на onboarding’е».

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

Заключение

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

• Всегда включайте Snap to Pixel для точного позиционирования.
• Настройте шаг привязки к сетке на 1px, чтобы избежать дробей.
• Используйте плагины типа Round Me или Cleaner для автоматизации.
• Проверяйте макеты перед передачей в разработку.
• Создайте шаблон с правильными настройками, чтобы не настраивать каждый раз вручную.