Как перевести сантиметры в пиксели в фигме

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

В современном дизайне граница между физическим и цифровым мирами становится всё более размытой. Дизайнеры работают над проектами, которые могут быть напечатаны на бумаге формата А4, отображаться на экранах смартфонов или транслироваться на больших телевизорах. При этом инструменты вроде Figma ориентированы на цифровые среды, где основной единицей измерения являются пиксели. Это создаёт вызов: как корректно перенести физические размеры, заданные в сантиметрах, в пиксельную сетку? Особенно остро этот вопрос стоит при работе с печатными макетами, упаковкой, вывесками или когда клиент предоставляет ТЗ в сантиметрах.
Проблема заключается в том, что пиксель — это не фиксированная физическая величина. Его размер зависит от плотности пикселей устройства (PPI — pixels per inch). Экран с высоким PPI покажет тот же пиксель гораздо меньше, чем экран с низким PPI. Поэтому перевод сантиметров в пиксели — это не просто математика, а осознанный выбор параметров вывода. В этой статье мы детально разберём, как выполнить такой перевод, какие факторы учитывать, и как адаптировать результат под конкретные задачи — от мобильного дизайна до подготовки к печати.

Что такое пиксель и сантиметр: фундаментальные различия

Сантиметр — это метрическая единица длины, равная одной сотой доле метра. Он используется повсеместно в физическом мире: при измерении расстояний, размеров изделий, чертежей и упаковки. Сантиметр абсолютен: 10 см всегда будут 10 см, независимо от того, где вы их измеряете. Это делает его удобным для стандартизации и передачи точных данных.
Пиксель — это минимальный элемент растрового изображения на экране. В отличие от сантиметра, пиксель не имеет фиксированного физического размера. Его величина зависит от разрешения и плотности пикселей устройства. Например, один пиксель на экране Retina MacBook Pro будет значительно меньше, чем на бюджетном мониторе с тем же диагональным размером, но меньшим PPI.
Именно эта разница и лежит в основе сложностей перевода. Figma, будучи цифровым инструментом, оперирует координатами и размерами в пикселях. Интерфейс не позволяет переключиться на сантиметры, миллиметры или дюймы — все замеры ведутся в px. Это означает, что если вам нужно создать блок шириной 15 см, вы должны заранее знать, сколько это будет в пикселях при выбранной плотности.

Почему Figma не поддерживает сантиметры?

Figma — это инструмент для цифрового дизайна. Он ориентирован на создание интерфейсов, веб-страниц, приложений и других продуктов, которые будут отображаться на экранах. Экраны измеряют размеры в пикселях, поэтому логично, что Figma использует ту же систему. Поддержка физических единиц, таких как сантиметры, добавила бы сложности без реальной пользы для большинства пользователей.
Кроме того, большинство стандартов веб-разработки (CSS, SVG, React Native) также используют пиксели. Это обеспечивает согласованность между дизайном и реализацией. Если бы Figma использовал сантиметры, возникла бы необходимость постоянного перевода, что увеличило бы риск ошибок.

Формула перевода: как посчитать пиксели из сантиметров

Чтобы перевести сантиметры в пиксели, необходимо знать плотность пикселей (PPI — pixels per inch). Формула проста:

• px = см × (PPI / 2.54)

Где:

• px — количество пикселей;
• см — размер в сантиметрах;
• PPI — плотность пикселей на дюйм;
• 2.54 — количество сантиметров в одном дюйме.

Например, чтобы перевести 10 см в пиксели при PPI = 96:

• px = 10 × (96 / 2.54) ≈ 10 × 37.8 ≈ 378 пикселей.

Это означает, что блок шириной 10 см на экране с плотностью 96 PPI будет занимать 378 пикселей.

Распространённые значения PPI

Разные устройства имеют разную плотность пикселей. Ниже приведены типичные значения:

Как работать в Figma: настройка и практические шаги

Хотя Figma не позволяет изменить единицы измерения в интерфейсе, вы можете вручную рассчитать и ввести нужные значения. Вот пошаговый алгоритм:

1. Определите, для какой цели создаётся макет: веб, мобильное приложение, печать.
2. Выберите соответствующее значение PPI (например, 96 для веба, 300 для печати).
3. Используйте формулу px = см × (PPI / 2.54) для расчёта.
4. Введите полученное значение в поля «Width» и «Height» в правой панели Figma.
5. При необходимости используйте плагины для упрощения расчётов.

Например, если вы проектируете этикетку размером 8×5 см для печати с разрешением 300 PPI:

• Ширина: 8 × (300 / 2.54) ≈ 945 px
• Высота: 5 × (300 / 2.54) ≈ 591 px

Создайте прямоугольник с этими размерами — он будет соответствовать нужному физическому размеру при указанной плотности.

Плагины для помощи в расчётах

Figma поддерживает сторонние плагины, которые могут автоматизировать перевод. Некоторые популярные решения:

• Unit Converter — позволяет конвертировать между px, pt, cm, mm, in.
• Size Converter — специализируется на изменении размеров с учётом масштаба.
• Density Calculator — помогает рассчитать PPI и перевести физические размеры.

Эти инструменты не меняют принцип работы Figma, но экономят время и снижают риск ошибок при ручных расчётах.

Типичные ошибки и как их избежать

Одной из самых распространённых ошибок является использование неправильного значения PPI. Например, применение 72 PPI для веб-дизайна — это устаревший миф, восходящий к эпохе старых Mac. Современные стандарты веба основаны на 96 PPI, принятых в Windows и CSS.
Ещё одна ошибка — игнорирование масштаба просмотра. В Figma вы можете масштабировать холст от 0.1% до 400%. Это визуальное увеличение не влияет на реальные размеры объектов в пикселях. Дизайнер может ошибочно считать, что объект «выглядит слишком большим», хотя его размер соответствует ТЗ.

Как проверить соответствие физическим размерам

Если важно, чтобы макет соответствовал реальным габаритам, можно использовать следующий метод:

• Откройте макет на реальном устройстве (телефоне, планшете).
• Убедитесь, что масштаб отображения — 100%.
• Приложите физическую линейку к экрану и сравните.

Этот способ работает только если вы знаете PPI устройства и правильно рассчитали пиксели. Например, iPhone 13 имеет PPI около 460 — значит, 1 см на экране займёт примерно 181 пиксель (460 / 2.54).

Особенности перевода для печати и цифровых экранов

При подготовке к печати требования к точности выше. Ошибка в несколько миллиметров может сделать продукт непригодным. Поэтому важно:

• Использовать PPI не ниже 300 для качественной печати.
• Учитывать припуски на обрезку (обычно 3–5 мм).
• Работать в RGB, но помнить о возможном сдвиге цветов при конвертации в CMYK.

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

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

Перевод сантиметров в пиксели — это не просто математическая операция, а часть процесса проектирования. Каждое решение должно быть обосновано контекстом использования. Для веб-интерфейсов достаточно приблизительного соответствия, так как пользователи не измеряют элементы линейкой. Однако для упаковки, вывесок или POS-материалов физический размер критичен.
Важно понимать, что Figma — это инструмент для прототипирования и дизайна, а не полноценная система компьютерной графики вроде Adobe Illustrator. Он не предназначен для управления печатью напрямую. Тем не менее, при правильном подходе он отлично справляется с задачами, требующими точности.
Ключевой принцип — документировать все допущения: плотность PPI, целевые устройства, режим экспортов. Это помогает команде (дизайнеры, разработчики, клиенты) говорить на одном языке и избегать недопонимания.

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

Заключение

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

• Figma использует пиксели как единственную единицу измерения.
• Для перевода см в px применяется формула: px = см × (PPI / 2.54).
• Типичные значения PPI: 96 для веба, 300 для печати.
• Плагины могут упростить расчёты, но не заменяют понимания основ.
• Всегда документируйте плотность и контекст использования макета.