Размеры в фигме в чем измеряется

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

В каких единицах измеряются размеры в Figma?

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

Однако Figma не ограничивает вас только пикселями. Система поддерживает несколько альтернативных единиц: миллиметры (mm), сантиметры (cm), дюймы (in) и точки (pt). Эти единицы особенно полезны при работе с печатными материалами, упаковкой, рекламными щитами или дизайном для устройств с фиксированной физической размерностью — например, телевизоров или киосков.

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

Изменение единиц измерения — простая операция, но она легко упускается из виду. Чтобы переключиться на другую систему:

1. Откройте любой файл в Figma.
2. Найдите в правом верхнем углу панели инструментов значок линейки — он находится рядом с масштабом.
3. Нажмите на него — откроется выпадающее меню с перечнем доступных единиц.
4. Выберите нужную: px, mm, cm, in или pt.

После выбора все значения в панели свойств (Properties), в инспекторе и на линейках будут отображаться в новой системе. Например, если вы выбрали mm, то прямоугольник шириной 100px автоматически покажется как ≈26,46 мм.

Пиксели vs другие единицы: когда что использовать?

Выбор единицы измерения зависит от контекста проекта. Ниже — таблица с рекомендациями:

Представьте, что вы проектируете мобильное приложение. Вы выбрали mm и сделали кнопку шириной 50 мм. На экране с плотностью 320 ppi это будет ≈630 пикселей — что явно выходит за рамки рекомендаций Apple и Google (минимум 44px для тач-элементов). Такая ошибка может сделать интерфейс непригодным для использования.

Как единицы измерения влияют на дизайн-систему?

Дизайн-система — это не просто набор цветов и шрифтов. Это стандартизированная система измерений, которая обеспечивает согласованность на всех этапах: от макета до кода. Если в вашей команде кто-то работает в пикселях, а другой — в миллиметрах, это создаёт хаос в документации.

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

— Все интерфейсные элементы: px
— Все типографические размеры: px (для веба) или pt (если используется в PDF-версиях)
— Все физические размеры (например, коробки для упаковки): mm

Также важно, чтобы все участники команды знали: размеры в Figma — это не “предположения”, а точные значения. Если вы используете компоненты и стилевые переменные, они должны быть привязаны к единицам, которые используются в разработке.

Частые ошибки и как их избежать

Даже опытные дизайнеры допускают ошибки, связанные с единицами измерения. Вот самые распространённые:

• Смена единиц без уведомления команды. Если вы переключились на mm и отправили макет разработчику, он может не заметить разницы и скопировать 50 вместо 50px — получится элемент в 5 раз больше.
• Использование pt для веба. Точки (pt) — это типографская единица, рассчитанная на 72 dpi. В вебе 1pt ≠ 1px. Это приводит к несоответствиям в шрифтах и отступах.
• Экспорт в SVG/PNG с неправильными настройками. Если вы работаете в mm, но экспортируете в px без масштабирования — размеры могут быть неверными.
• Работа с растровыми изображениями без учёта DPI. Если вы вставляете PNG с 72 dpi в файл, работающий в mm, и ожидаете, что он будет 100 мм в печати — он может оказаться вдвое меньше.

Чтобы избежать этих ошибок:

1. Установите в настройках Figma единицы по умолчанию — px для цифровых проектов.
2. Используйте комментарии в файлах: «Единицы измерения: px».
3. Проверяйте размеры в инспекторе перед экспортом — не полагайтесь только на визуальное восприятие.
4. Создайте шаблон с предустановленными единицами для типовых проектов.

Настройки экспорта и их связь с размерами

Экспорт в Figma — это не просто кнопка «Скачать». Он напрямую зависит от того, как вы задали размеры. Даже если вы работаете в mm, при экспорте в PNG или SVG Figma конвертирует размеры в пиксели на основе текущего масштаба и DPI.

По умолчанию Figma экспортирует с разрешением 1x (96 dpi). Это нормально для веба. Но если вы экспортируете для печати с требованием 300 dpi — вам нужно вручную указать масштаб:

• Для печати: выберите масштаб 3.125x (300 dpi / 96 dpi ≈ 3.125)
• Для Retina-экранов: 2x
• Для Ultra HD: 4x

Лучшие практики работы с размерами в Figma

Чтобы избежать ошибок и ускорить работу всей команды, следуйте этим рекомендациям:

• Всегда устанавливайте единицы измерения в начале проекта — не меняйте их по ходу работы.
• Для веба и мобильных приложений — используйте только px. Это стандарт индустрии.
• Создавайте шаблоны файлов с предустановленными единицами и сетками — и распространяйте их по команде.
• Добавляйте в описание файла: «Единицы: px | Дизайн под 1x, 2x, 3x».
• Проверяйте размеры компонентов через инспектор — не полагайтесь на визуальную оценку.
• Используйте Auto Layout с фиксированными размерами — это снижает риск «разъезжания» при адаптации.
• При работе с типографикой — задавайте размер шрифта в px, а не в em или rem. Это упрощает контроль.

Также полезно использовать плагины, такие как Pixel Perfect или Measure, чтобы сравнивать дизайн с макетом разработчика. Они показывают отклонения в пикселях — что особенно ценно при работе в команде.

Заключение

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

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

• По умолчанию Figma использует пиксели (px) — это оптимально для веба и мобильных интерфейсов.
• Можно переключаться на mm, cm, in, pt, но только при необходимости — и с уведомлением команды.
• Единицы измерения не влияют на физический размер объекта — только на отображение.
• Экспорт в PNG/SVG требует ручной настройки масштаба для печати (3.125x для 300 dpi).
• Создавайте шаблоны с предустановленными единицами и включайте их в дизайн-систему.