Как в фигме изменить единицы измерения

В Figma единицы измерения по умолчанию используют пиксели (px), но пользователи могут настроить отображение значений в свойствах объектов — например, для удобства при работе с сетками, расстояниями или экспортом. Хотя глобальная смена системы измерений (например, на миллиметры или дюймы) недоступна, можно контролировать формат отображения через настройки проекта, плагины и особенности интерфейса. Основная рекомендация — использовать плагины вроде «Units» или «Measure» для гибкости при презентациях и кросс-платформенной разработке.

Какие единицы измерения используются в Figma по умолчанию

Figma — это векторный редактор, ориентированный на цифровой дизайн интерфейсов, поэтому все измерения внутри него выражаются в пикселях (px). Это касается как ширины и высоты объектов, так и отступов, радиусов скруглений, толщины линий и других параметров. Пиксель в Figma является условной единицей, соответствующей одной точке на экране макета, и не привязан напрямую к физическому размеру дисплея.

Когда вы создаёте прямоугольник 375×812 пикселей, вы задаёте его размер относительно координатной сетки Figma. Эта система идеально подходит для проектирования мобильных экранов, веб-страниц и приложений, где реализация происходит в CSS, SwiftUI или Android XML — технологиях, также оперирующих пикселями или логическими единицами.

Однако важно понимать, что Figma работает в режиме «device-independent pixels», то есть абстрагируется от реального разрешения экрана. Это означает, что один пиксель в Figma соответствует одному логическому пикселю на целевом устройстве, а не физическому. Такой подход обеспечивает согласованность между дизайном и разработкой.

Отображение размеров в панели свойств

Когда вы выделяете любой объект в Figma, в правой панели Inspector отображаются его геометрические параметры: X, Y, Width, Height. Все эти значения указаны в пикселях. То же самое касается полей Margin, Padding, Line height, Letter spacing и других.

Даже если вы используете Auto Layout, где важны относительные величины, система продолжает оперировать пикселями. Например, внутренний отступ (padding) в 16 px будет отображаться именно как «16», без указания единиц — потому что контекст подразумевает px по умолчанию.

Единицы при экспорте и автолейауте

При настройке Auto Layout контейнеров вы можете задавать фиксированные отступы, минимальную/максимальную ширину и другие параметры. Все они также выражаются в пикселях. При этом Figma позволяет использовать относительные значения (например, Grow, Fill Container), но базовая метрика остаётся пиксельной.

При экспорте ассетов (PNG, SVG, PDF) вы можете выбрать масштаб: 1x, 2x, 3x. Это влияет на финальное разрешение файла, но не меняет единицы измерения в самом документе. Например, слой 100×100 px при экспорте 2x даст изображение 200×200 физических пикселей.

Можно ли изменить отображаемые единицы измерения

Прямого способа изменить единицы измерения в Figma с пикселей на миллиметры, дюймы или пункты (pt) не существует. Интерфейс и движок Figma заточены исключительно под px как стандартную единицу. Это принципиальное решение, обусловленное спецификой digital-дизайна.

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

Первый подход — использование комментариев и аннотаций. Вы можете вручную добавлять текстовые метки вида «10 мм» рядом с элементами, чтобы передать требуемый размер. Этот метод прост, но требует дисциплины и может привести к рассинхронизации, если изменения не отслеживаются.

Второй способ — переопределение восприятия через масштаб. Если вы знаете, что 1 дюйм = 96 px (стандарт Windows), вы можете строить макеты в масштабе 1:1, где 96 px = 1 дюйм. Это полезно при проектировании для устройств с известной плотностью пикселей (PPI).

Настройка сеток и руководств под нужные единицы

Figma позволяет создавать Custom Grids и Layout Grids. Вы можете настроить шаг сетки, например, в 25.4 px, чтобы имитировать миллиметровую сетку (поскольку 1 дюйм = 25.4 мм). Тогда каждый шаг сетки будет соответствовать 1 мм при масштабе 100%.

• Откройте панель Design справа.
• Выберите объект или холст, добавьте Layout Grid.
• Установите тип — Rows или Columns.
• Задайте значение шага: например, 25.4 для имитации 1 мм.
• Используйте эту сетку как визуальную опору.

Такой приём не меняет единицы в Inspector, но помогает соблюдать пропорции при проектировании физических интерфейсов, например, для IoT-устройств или автомобильных панелей.

Пример: проектирование дисплея с PPI 96

Представьте, что вы разрабатываете интерфейс для промышленного экрана с плотностью 96 PPI. Вы хотите, чтобы кнопка была ровно 2 дюйма в ширину. В Figma вы задаёте ширину 192 px (2 × 96). Хотя в интерфейсе будет указано «192», вы понимаете, что это эквивалент 2 дюймам.

Плагины для работы с единицами: альтернативные решения

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

Самый популярный плагин — Units. Он позволяет:

• Добавлять текстовые метки с пересчитанными значениями (мм, см, дюймы).
• Выбирать целевую плотность пикселей (PPI).
• Автоматически конвертировать выделенные размеры.

После установки плагина вы выделяете объект, запускаете Units и выбираете нужную единицу. Плагин создаёт текстовый слой рядом с объектом, например: «50.8 мм» для 200 px при PPI 96. Это не влияет на поведение макета, но помогает при презентациях и согласованиях.

Другой полезный инструмент — Measure. Он предназначен для подготовки макетов к передаче разработчикам, но также поддерживает кастомные аннотации. Вы можете настроить его так, чтобы он показывал расстояния не только в px, но и в rem, em, pt или мм — правда, только в виде всплывающих меток.

Как установить плагин Units

1. Откройте Figma и перейдите во вкладку Plugins в правом верхнем углу.
2. Нажмите Find more plugins и введите в поиск «Units».
3. Найдите плагин от автора «Rafael Vidal» и нажмите «Install».
4. После установки вызовите его через меню Plugins → Development → Units.
5. Выберите объект и укажите целевую единицу (например, mm).

Плагин создаст текстовый слой с конвертированным значением. Его можно стилизовать, закрепить в фрейме или скрыть в отдельном слое для презентаций.

Единицы измерения в дизайн-системах и адаптивной верстке

Хотя Figma использует пиксели, в реальной разработке часто применяются относительные единицы: rem, em, dp, sp. Это создаёт разрыв между дизайном и реализацией. Чтобы минимизировать путаницу, современные дизайн-системы внедряют соглашения по конвертации.

Например, в веб-проектах часто используется правило: 1 rem = 16 px. Тогда отступ в 24 px из Figma становится 1.5 rem в CSS. Команда может зафиксировать это в документации, и тогда разработчики автоматически конвертируют значения.

В мобильной разработке на Android используются density-independent pixels (dp). При плотности экрана 160 PPI, 1 dp = 1 px. На экранах 320 PPI (2x) — 1 dp = 2 px. Дизайнеры обычно работают в масштабе 2x, поэтому все размеры в Figma нужно делить на 2, чтобы получить dp.

iOS использует points (pt), аналогичные dp. Здесь 1 pt может соответствовать 2 или 3 физическим пикселям (2x, 3x). Но в Figma вы всё равно работаете в пикселях, которые совпадают с point-размерами при выбранном масштабе.

Шаблоны и токены для управления размерами

Продвинутые команды используют Design Tokens — переменные, хранящие значения размеров, цветов, шрифтов. Например:

• size-sm: 8 px
• size-md: 16 px
• size-lg: 24 px

Эти токены синхронизируются между Figma и кодом через инструменты вроде Style Dictionary или Zeroheight. Это позволяет избежать ручной конвертации и ошибок.

Распространённые ошибки при работе с размерами в Figma

Первая и самая частая ошибка — попытка точно соответствовать физическим размерам без учёта PPI. Дизайнеры, переходящие с печатного дизайна, иногда ожидают, что 100 px = 100 мм, что неверно. Без знания плотности пикселей такие расчёты приводят к несоответствиям.

Вторая ошибка — игнорирование масштаба при использовании Auto Layout. Например, если вы задаёте padding 12 px в компоненте, но ожидаете, что он будет масштабироваться, важно понимать, что px — это фиксированная величина. Для адаптивности лучше использовать относительные настройки (Fill, Hug, Fixed vs Flexible).

Третья ошибка — отсутствие документации по конвертации. Когда дизайнер передаёт макет, разработчик может не знать, как перевести 44 px в dp или rem. Это приводит к вопросам, задержкам и ошибкам в реализации.

Как избежать проблем: чек-лист

• Чётко укажите целевую платформу (iOS, Android, Web) и плотность пикселей (PPI).
• Добавьте примечание в макет: «Все размеры в px. Конвертация: 1 rem = 16 px, 1 dp = 0.5 px (2x scale)».
• Используйте плагины для аннотаций, если требуется показать физические единицы.
• Создайте шаблон фрейма с сеткой, соответствующей целевому устройству.
• Обсудите с командой правила использования токенов и отступов.

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

Она отмечает, что в её практике команды, настаивающие на физических единицах, чаще сталкиваются с путаницей. «Один раз мы работали над медицинским устройством, где критичен точный размер. Вместо изменения единиц мы создали контрольный макет с эталонной линейкой 100 мм = 378 px (при 96 PPI). Это стало единым источником истины для всех.»

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

Заключение

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

• Figma работает исключительно в пикселях (px) — это стандарт для digital-дизайна.
• Прямая смена единиц (на мм, дюймы) невозможна, но возможна имитация через плагины и сетки.
• Плагины вроде Units и Measure помогают добавлять аннотации с конвертированными значениями.
• Для согласования с разработкой используйте design tokens и правила конвертации (например, 1 rem = 16 px).
• Главное — не единицы, а ясность передачи намерений. Документируйте принятые соглашения.