Как в фигме перевести в метры
Figma - это инструмент для дизайна интерфейсов, а не для создания реальных физических объектов. Прямого способа «конвертировать пиксели в метры» в Figma нет. Но это можно сделать с помощью простых расчетов, основанных на ключевом параметре - PPI (пикселей на дюйм).
Основной принцип перевода в метры в Figma
Физический размер пикселя не фиксирован. Он зависит от плотности пикселей экрана (PPI), на котором будет отображаться ваш дизайн.
- 1 пиксель в Figma = 1 физический пиксель на экране устройства.
- Чтобы перевести пиксели в метры, нужно знать PPI целевого экрана.
Пошаговая инструкция и формула
Узнайте PPI вашего устройства
PPI (Pixels Per Inch) - это количество пикселей на одном дюйме экрана. Это известная величина для большинства популярных устройств.
- iPhone (с Retina-экраном): 326 PPI (например, iPhone 8, SE), 458 PPI (iPhone 15 Pro Max) и другие.
- MacBook Pro: около 254 PPI.
- Стандартный монитор: обычно 96 PPI (часто принимается за базовое значение для веба).
- Устройство Android: может сильно варьироваться (от 200 до 500+ PPI).
Вспомните формулу перевода
1 дюйм = 0.0254 метра. Следовательно, размер одного пикселя в метрах рассчитывается так:
1 пиксель = (1 / PPI) дюймов = (1 / PPI) * 0.0254 метров.
Примените формулу на практике
Пример 1: Веб-интерфейс для стандартного монитора (96 PPI). Вы создали кнопку шириной 192px.
- Считаем: 192 px / 96 PPI = 2 дюйма.
- Переводим в метры: 2 дюйма * 0.0254 = 0.0508 метра (или 5.08 см).
Таким образом, на стандартном мониторе ваша кнопка шириной 192px будет иметь физический размер примерно 5 сантиметров.
Пример 2: Интерфейс для iPhone 8 (326 PPI). Вы создали иконку размером 64px.
- Считаем: 64 px / 326 PPI ≈ 0.196 дюйма.
- Переводим в метры: 0.196 дюйма * 0.0254 ≈ 0.005 метра (или 0.5 см).
Вывод: На iPhone 8 ваша иконка будет иметь физический размер примерно 5 миллиметров.
Автоматизация с помощью плагинов
Чтобы не считать вручную, можно использовать плагины для Figma, которые делают это за вас. Например, плагин «PX to MM» или «Unit Converter».
- Откройте ваш макет в Figma.
- Перейдите в меню Plugins - Run plugin.
- Найдите один из этих плагинов, запустите его.
- Плагин попросит вас ввести PPI целевого устройства и автоматически пересчитает размеры выделенного объекта в миллиметры или сантиметры.
Соответствие размеров в пикселях и сантиметрах:
|
Размер в Figma (px) |
На мониторе (96 PPI) |
На iPhone 13 (460 PPI) |
На планшете (200 PPI) |
|---|---|---|---|
|
100 px |
~2.64 см |
~0.55 см |
~1.27 см |
|
200 px |
~5.29 см |
~1.10 см |
~2.54 см |
|
375 px (ширина iPhone) |
~9.92 см |
~2.07 см |
~4.76 см |
|
500 px |
~13.23 см |
~2.76 см |
~6.35 см |
Как читать таблицу:
- Столбец "На мониторе": Показывает, насколько большим будет элемент на обычном компьютеферном мониторе. Кнопка шириной 200px будет довольно крупной - около 5 см.
- Столбец "На iPhone 13": Демонстрирует, что на smartphone с высоким PPI те же 200px займут чуть больше 1 см. Именно поэтому в мобильных интерфейсах используют более мелкие элементы, чем в веб-версиях.
- Столбец "На планшете": Показывает промежуточное значение для устройства со средней плотностью пикселей.
Один и тот же дизайн, созданный в пикселях, будет иметь разные физические размеры на разных устройствах. Это важно учитывать при проектировании интерфейсов, особенно если физический размер элемента имеет значение для юзабилити.
Важные нюансы и для чего это может понадобиться
- Дизайн для печати: Если вы готовите макет для печати (например, постер или визитку), в Figma это не лучшая идея. Используйте для этого Adobe Illustrator или InDesign, где работа ведется в физических единицах (миллиметрах, дюймах). Figma позволяет экспортировать изображения с высоким DPI (до 512), что может быть достаточно для некоторых целей, но логика работы всё равно пиксельная.
- Дизайн интерфейсов для устройств с известным PPI: Это самый частый и правильный сценарий. Вы точно знаете, что ваш UI будет показываться на iPhone 14 (458 PPI) или планшете Samsung (287 PPI), и можете рассчитать, какого реального размера будут ваши элементы для пользователя.
- AR/VR и физические дисплеи: При проектировании интерфейсов для дополненной реальности или для рекламных экранов на улице знание физического размера элементов критически важно.
Не существует кнопки «Convert to Meters» в Figma. Но есть универсальная формула: Размер в метрах = (Размер в пикселях / PPI) * 0.0254. Используйте плагины like «PX to MM» для автоматизации. Помните о контексте: Всегда учитывайте, на экране какого устройства будет отображаться ваш дизайн.
Вывод
Прямого преобразования пикселей в метры в Figma не существует, так как физический размер пикселя зависит от плотности экрана устройства (PPI). Для перевода требуется расчет по формуле, где ключевым параметром является PPI целевого экрана. Это означает, что один и тот же элемент дизайна будет иметь разный физический размер на разных устройствах.