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

В дизайне интерфейсов точность измерений имеет критическое значение, особенно при переходе от физических единиц, таких как сантиметры, к цифровым — пикселям. Figma, как один из ведущих инструментов для UI/UX-дизайна, оперирует исключительно в пикселях, что создаёт вызов для новичков и даже опытных специалистов, работающих с печатными макетами или реальными размерами. Перевод сантиметров в пиксели в Figma требует понимания плотности пикселей (PPI/DPI), целевых устройств и контекста проекта.

Зачем переводить см в пиксели: основы цифрового дизайна

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

Когда дизайнер получает ТЗ с указанием размеров в сантиметрах — например, «ширина блока должна быть 10 см» — возникает необходимость конвертировать эти значения в пиксели. Такая ситуация типична при работе с кросс-медийными проектами, где есть как печатные, так и цифровые носители.

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

Основы перевода: формула и коэффициенты

Перевод сантиметров в пиксели основан на плотности пикселей экрана, выраженной в PPI (pixels per inch). Один дюйм равен 2.54 сантиметра, поэтому базовая формула выглядит так:

• Пиксели = (Сантиметры × PPI) / 2.54

Например, если вы работаете с экраном 96 PPI (стандартное значение для многих мониторов Windows), то 1 см будет равен:

• (1 × 96) / 2.54 ≈ 37.8 пикселей

Для macOS и Retina-экранов плотность выше — часто 144 PPI, тогда:

• (1 × 144) / 2.54 ≈ 56.7 пикселей на сантиметр

Выбор PPI зависит от целевой платформы. Мобильные устройства могут иметь плотность от 300 до 500 PPI, но в Figma принято проектировать в одном базовом масштабе (чаще всего 1x), а затем использовать множители (1x, 2x, 3x) при экспорте.

Как рассчитать пиксели из см: практические шаги

Перевод см в пиксели можно выполнить за несколько простых шагов. Ниже — пошаговый алгоритм, который подойдёт как для новичков, так и для опытных дизайнеров.

1. Определите целевое устройство — мобильный телефон, планшет, десктоп. Узнайте его PPI (можно найти в технических характеристиках).
2. Выберите стандартную плотность, если устройство неизвестно: 96 PPI для веб, 144 PPI для Retina-экранов.
3. Примените формулу: умножьте количество сантиметров на PPI и разделите на 2.54.
4. Округлите результат до целого числа — Figma использует целые пиксели, хотя допускает дробные значения.
5. Внесите значение в Figma — просто введите число в поле ширины или высоты объекта.

Например, вам нужно сделать блок шириной 5 см для сайта на Windows-мониторе (96 PPI):

• 5 × 96 = 480
• 480 / 2.54 ≈ 188.98 → округляем до 189 пикселей

Теперь в Figma вы задаёте ширину прямоугольника как 189 px.

Пример расчёта для мобильного дизайна

Если вы проектируете под iPhone 14 Pro (плотность около 460 PPI), то 1 см будет:

• (1 × 460) / 2.54 ≈ 181.1 пикселей

Однако здесь важно понимать: в Figma не принято проектировать в реальных пикселях устройств. Вместо этого используются логические пиксели (points), а экспорт выполняется в 1x, 2x, 3x. Поэтому для мобильных интерфейсов чаще берут базовые размеры (например, 375×812 px для iPhone) и работают в этих рамках.

Ошибки при переводе и как их избежать

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

Ошибка 1: Игнорирование PPI

Многие начинающие считают, что 1 см всегда равен одному и тому же количеству пикселей. На самом деле — нет. Без учёта плотности пикселей вы можете получить объект, который на экране будет в два раза больше или меньше ожидаемого.

Ошибка 2: Попытка использовать см напрямую в Figma

Figma не поддерживает сантиметры в полях ввода. Если вы введёте «10 см», система не распознает это и проигнорирует. Единственный способ — предварительный расчёт в пикселях.

Ошибка 3: Округление без учёта сетки

Округляя 188.98 до 189, вы получаете почти точное значение. Но если таких элементов много, погрешности накапливаются. Рекомендуется использовать сетку (например, 4px или 8px grid), чтобы все размеры были кратны базовому шагу.

Ошибка 4: Несоответствие между макетом и устройством

Если вы проектируете под мобильное устройство, но используете PPI 96, макет может не соответствовать реальному отображению. Всегда сверяйтесь с референсными размерами экранов.

Работа с разными экранами и PPI: адаптивный подход

Современные устройства имеют огромный диапазон плотности пикселей. От бюджетных смартфонов (200–300 PPI) до профессиональных мониторов Apple (218 PPI на Mac Studio). Как быть?

Ключевой принцип — проектируйте в логических единицах, а не в физических. В Figma вы создаёте макет в одном масштабе (часто 1x), а затем экспортируете в разных разрешениях.

Например:

• Базовый макет: 375×812 px (iPhone)
• Экспорт: @1x, @2x, @3x

При этом реальные сантиметры не важны — важны пропорции, читаемость текста и удобство взаимодействия. Шрифт 16 px будет комфортным для чтения независимо от PPI, потому что система масштабирует его на устройстве.

Если же задача — создать макет, который должен точно соответствовать физическому размеру (например, печатный стикер в цифровом виде), тогда нужно строго придерживаться расчётов с учётом целевого PPI.

Когда использовать физические размеры?

• Печать AR-маркетинговых материалов
• Дизайн упаковки с цифровым прототипом
• Создание референсов для производителей

Во всех остальных случаях — ориентируйтесь на стандартные размеры экранов и гайдлайны платформ (Material Design, Human Interface Guidelines).

Экспорт и точность размеров в Figma

После перевода см в пиксели важно правильно экспортировать ассеты. Figma позволяет задавать множители экспорта: 1x, 2x, 3x. Это критично для обеспечения чёткости изображений на высокоплотных экранах.

Например, если вы экспортируете иконку 100×100 px:

• @1x — 100×100 px
• @2x — 200×200 px
• @3x — 300×300 px

При этом физический размер на экране остаётся одинаковым — система автоматически масштабирует изображение.

Чтобы сохранить точность:

• Используйте целые значения пикселей
• Избегайте дробных размеров при экспорте
• Проверяйте макет в режиме предпросмотра (Preview mode)

Экспортная таблица соответствия см и пикселей

Ниже представлена таблица, которая поможет быстро конвертировать сантиметры в пиксели для разных значений PPI.

Вы можете сохранить эту таблицу как шпаргалку или импортировать в Figma как компонент для быстрого доступа.

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

Профессионалы подчёркивают: понимание связи между физическими и цифровыми единицами делает дизайн более осознанным. Это особенно важно при работе с IoT-устройствами, умными часами, AR/VR, где размеры имеют прямое влияние на юзабилити.

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

Заключение

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

• Для перевода см в px используйте формулу: (см × PPI) / 2.54
• Стандартные значения PPI: 96 для веба, 144 для Retina
• Figma работает только в пикселях — конвертация обязательна
• При экспорте используйте @1x, @2x, @3x для разных устройств
• Избегайте дробных пикселей при финальной подготовке макета