Как сделать фрейм в сантиметрах в фигме

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

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

Почему Figma использует только пиксели?

Figma — это веб-инструмент для цифрового дизайна, и его архитектура построена вокруг пиксельной сетки. Все операции — от рисования фигур до позиционирования элементов — выполняются в пикселях. Это стандарт для всех современных UI/UX-редакторов, таких как Sketch, Adobe XD или Framer. Пиксель — минимальная неделимая единица на экране, и он обеспечивает точность при масштабировании и экспорте.
Сантиметры, в свою очередь, являются физической единицей длины и зависят от плотности пикселей на дюйм (DPI). На экранах с разным DPI один и тот же пиксель может занимать разное физическое пространство. Поэтому Figma не может напрямую использовать сантиметры без знания целевого устройства вывода.

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

Как перевести сантиметры в пиксели: формулы и расчёты

Чтобы создать фрейм, соответствующий нужному размеру в сантиметрах, необходимо выполнить конвертацию. Основой расчёта является DPI (dots per inch — точек на дюйм), который определяет, сколько пикселей приходится на один дюйм изображения. Стандартное значение для большинства экранов — 96 DPI.
Первым делом переведём сантиметры в дюймы:

• 1 дюйм = 2.54 см
• Значит, 1 см = 1 / 2.54 ≈ 0.3937 дюйма

Теперь умножаем на DPI:

• При 96 DPI: 0.3937 × 96 ≈ 37.8 пикселей на 1 см

Таким образом, чтобы получить фрейм шириной 10 см, нужно установить ширину 378 пикселей (10 × 37.8).

Пример расчёта

Допустим, вы проектируете этикетку размером 7×4 см:

• Ширина: 7 × 37.8 = 264.6 пикселей → округляем до 265 px
• Высота: 4 × 37.8 = 151.2 пикселей → 151 px

Эти значения вы вводите вручную в панель свойств фрейма.

Как создать фрейм нужного размера в сантиметрах

Процесс создания фрейма с заданными размерами в сантиметрах состоит из нескольких шагов:

1. Определите физические размеры объекта в сантиметрах (например, 15×10 см).
2. Выберите подходящий DPI (96 для экрана, 300 для печати).
3. Переведите сантиметры в пиксели с помощью формулы: px = см × (DPI / 2.54).
4. В Figma нажмите F, создайте новый фрейм и введите рассчитанные значения в поля W (ширина) и H (высота) в правой панели свойств.
5. При необходимости добавьте сетку (Layout Grid) с шагом, соответствующим 1 см (например, 37.8 px при 96 DPI).

Использование грид-сетки для удобства

Чтобы визуально контролировать сантиметровую сетку, добавьте Layout Grid:

• Выделите фрейм.
• В правой панели нажмите «+» рядом с «Layout Grids».
• Выберите «Grid» и установите шаг 37.8 px (для 96 DPI).
• Настройте цвет и прозрачность, чтобы сетка была заметной, но не мешала дизайну.

Настройка DPI и масштаба для точного отображения

Хотя Figma не позволяет изменить DPI в настройках проекта, вы можете имитировать нужное разрешение через масштабирование макета. Например, если вы работаете с макетом для печати 300 DPI, но хотите, чтобы он «выглядел» как на экране, вы можете уменьшить масштаб просмотра до 32% (96/300 ≈ 0.32).

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

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

Плагины и инструменты для работы с физическими размерами

Figma поддерживает сторонние плагины, которые могут помочь в работе с физическими единицами:

• Ruler Tool — позволяет рисовать линейки и измерять расстояния в пикселях. Некоторые версии поддерживают пользовательские метки, которые можно настроить под сантиметры.
• Unit Converter — конвертирует значения между px, pt, cm, mm прямо в интерфейсе Figma.
• Physical Size Preview — показывает, как будет выглядеть макет на реальном устройстве при текущем масштабе (полезно для AR/VR и IoT-устройств).

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

1. Откройте Figma и перейдите во вкладку «Plugins».
2. Нажмите «Find more plugins» и введите название (например, «Unit Converter»).
3. Установите плагин и запустите его через меню «Run plugin».
4. Используйте в диалоговом окне для быстрого перевода значений.

Распространённые ошибки и как их избежать

При попытке работать с сантиметрами в Figma дизайнеры часто допускают типичные ошибки:

• Ошибка 1: Игнорирование DPI. Многие считают, что 1 см всегда равен одному и тому же количеству пикселей. На самом деле это зависит от плотности экрана или принтера.
• Ошибка 2: Округление без учёта точности. Округление 37.8 до 38 может привести к накоплению погрешностей в крупных макетах. Лучше использовать точные значения или корректировать в конце.
• Ошибка 3: Попытка изменить единицы в настройках Figma. Такой опции нет. Все изменения выполняются через расчёты вне интерфейса.
• Ошибка 4: Отсутствие документации в файле. Не указывайте, какой DPI использовался. Добавляйте текстовый блок с пояснением: «Масштаб: 1 см = 37.8 px (96 DPI)».

Чек-лист перед сдачей макета

• ✓ Указан целевой DPI
• ✓ Размеры фреймов соответствуют расчётам
• ✓ Добавлена поясняющая надпись о масштабе
• ✓ Использована сетка (при необходимости)
• ✓ Проверены отступы и пропорции

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

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

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

Заключение

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

• Figma работает только в пикселях — сантиметры нужно конвертировать вручную.
• Для точного соответствия используйте формулу: пиксели = см × (DPI / 2.54).
• При 96 DPI 1 см = 37.8 пикселей — это стандарт для экранов.
• Добавляйте поясняющие надписи и сетки для удобства работы.
• Для финальной печати используйте специализированные программы, а Figma — для прототипирования.