Какая единица измерения в фигме

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

Figma — один из самых популярных инструментов для дизайна пользовательских интерфейсов, которым ежедневно пользуются миллионы специалистов по всему миру. Он позволяет создавать прототипы, разрабатывать дизайн-системы, сотрудничать в реальном времени и передавать макеты разработчикам. Однако начинающие дизайнеры часто сталкиваются с вопросом: «Какая единица измерения используется в Figma? Можно ли переключаться между px, pt, mm или em?» Ответ на этот вопрос важен не только с технической точки зрения, но и для корректной передачи макетов в разработку.

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

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

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

Другие единицы измерения, такие как миллиметры (mm), дюймы (in) или пункты (pt), чаще используются в полиграфии и печати, где важна физическая точность. В цифровой среде они неэффективны, так как размер одного пикселя может отличаться на разных устройствах из-за плотности пикселей (PPI/DPI). Например, один дюйм на экране смартфона содержит гораздо больше пикселей, чем на старом мониторе. Поэтому Figma отказывается от абсолютных единиц в пользу относительной, но универсальной — пикселя.

Интересно, что Figma не просто использует пиксели — он стандартизирует их. При создании нового файла вы можете выбрать шаблон, например, iPhone 15 (393×852 px) или Desktop (1440×900 px). Эти значения в пикселях соответствуют логическим пикселям устройства, а не физическим. Это значит, что Figma оперирует устройственно-независимыми пикселями, что упрощает работу с разными экранами и плотностями.

Преимущества использования пикселей в Figma

• Точность — каждый элемент можно разместить с точностью до одного пикселя, что критично для создания чётких и аккуратных интерфейсов.
• Совместимость с разработкой — большинство фронтенд-фреймворков (CSS, SwiftUI, Jetpack Compose) также используют px или логические пиксели, что упрощает передачу макетов.
• Единообразие — независимо от масштаба просмотра, размеры объектов остаются постоянными в пикселях, что исключает путаницу.
• Поддержка ретина-экранов — Figma корректно экспортирует ассеты в 1x, 2x и 3x, сохраняя привязку к пикселям макета.

Как работают измерения в интерфейсе Figma

Когда вы создаёте объект в Figma — будь то прямоугольник, текст или фигура — его размеры сразу отображаются в правой панели свойств в пикселях. Вы можете вручную вводить значения ширины, высоты, X и Y координат, а также отступы (padding), внутренние интервалы (layout properties) и толщину обводки.

Figma также показывает расстояния между объектами автоматически. Если вы выделите два элемента, программа отобразит расстояние между ними в пикселях сверху, снизу, слева или справа. Это особенно удобно при выравнивании и создании равномерных отступов. Такая система замеров называется «smart guides» и работает в реальном времени.

Как измерять расстояния: советы и лайфхаки

1. Удерживайте Alt (на Windows) или Option (на Mac), чтобы увидеть расстояние от выделенного объекта до ближайшего соседа.
2. Используйте Auto Layout — он автоматически рассчитывает и отображает внутренние отступы и интервалы между элементами.
3. Включите Rulers (Ctrl+R / Cmd+R), чтобы видеть пиксельную сетку по краям холста и легче ориентироваться в координатах.
4. Нажмите на расстояние между объектами, чтобы быстро скопировать его значение в буфер обмена.

Масштабирование и адаптивность: px и реальные устройства

Один из главных вопросов, который возникает у новичков: «Если я проектирую на 375×812 px (iPhone), будет ли это корректно отображаться на других устройствах?» Ответ — да, при условии правильного подхода. Figma использует концепцию *логических пикселей*, которые не зависят от физического разрешения экрана. Это означает, что 1 px в Figma — это не один физический пиксель, а одна единица в системе координат устройства.

Например, iPhone 15 имеет физическое разрешение около 1179×2556 пикселей, но в Figma вы проектируете на 393×852 px. Это соотношение (3x масштаб) учитывается при экспорте. Когда разработчик использует макет, он знает, что каждому пикселю в Figma соответствует 3 физических пикселя на Retina-дисплее.

Для адаптивного дизначения Figma предлагает Constraints и Auto Layout, которые позволяют элементам вести себя предсказуемо при изменении размеров. Например, вы можете задать, чтобы кнопка растягивалась по ширине родительского контейнера или оставалась привязанной к правому краю. Эти механизмы работают на основе пикселей, но обеспечивают гибкость.

Работа с несколькими устройствами: рекомендации

• Создавайте отдельные фреймы для разных размеров экранов (mobile, tablet, desktop).
• Используйте Variants и Component Properties, чтобы управлять состояниями и размерами компонентов.
• Не копируйте макет 1:1 с одного устройства на другое — адаптируйте интервалы, размеры шрифтов и расположение элементов.
• Проверяйте дизайн в режиме презентации (Presentation Mode) на разных масштабах, чтобы убедиться в читаемости.

Распространённые ошибки при работе с единицами измерения

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

Ошибка 1: Попытка использовать другие единицы

Некоторые пользователи пытаются ввести значения в мм или pt, ожидая автоматической конвертации. Figma этого не делает — любое число воспринимается как px. Это может привести к слишком большим или маленьким объектам.

Ошибка 2: Игнорирование сетки и выравнивания

Работа без включённых Smart Guides или Grid приводит к несогласованным отступам. Даже разница в 1–2 px может испортить визуальную гармонию интерфейса.

Ошибка 3: Избыточная точность

Некоторые дизайнеры задают размеры с десятичными дробями (например, 44.78 px). Figma поддерживает дробные значения, но на практике они бесполезны — ни один движок не отобразит 0.78 пикселя. Округляйте до целых чисел.

Ошибка 4: Неучёт масштаба при экспорте

Забывая о том, что макет в Figma — это логическая сетка, дизайнеры могут неправильно настроить экспорт. Например, экспортируют иконку 24×24 px как 1x, хотя она должна быть доступна в 2x и 3x для мобильных устройств.

От дизайна к разработке: как px переходят в код

Одно из ключевых преимуществ Figma — это прозрачная передача данных разработчикам. Через функцию Inspect (в режиме Developer) программисты могут увидеть все значения: размеры, отступы, цвета, шрифты — всё в пикселях. Это позволяет точно воспроизвести макет в коде.

В CSS, например, размеры часто задаются в px, что делает переход максимально прямым. Однако современные подходы (например, использование rem, em или viewport units) требуют дополнительных расчётов. Хорошая практика — добавлять комментарии в Figma или использовать плагины (например, Tokens Studio), чтобы преобразовать px в другие единицы.

Как помочь разработчикам при работе с px

• Используйте Auto Layout — он автоматически передаёт информацию о внутренних отступах и gap.
• Добавляйте Design Tokens для цветов, типографики и отступов, чтобы избежать «магических чисел».
• Создавайте Style Guides и Component Libraries с чёткими размерами.
• Используйте плагины вроде Zeplin for Figma или Anima для более детального экспорта.

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

Интервью с Еленой Котовой, ведущим UI-дизайнером, 10 лет опыта

— Почему Figma выбрала именно пиксели?

Работа с px требует дисциплины: соблюдения сетки, использования целых чисел и системного подхода к отступам и размерам. Но именно это формирует профессиональный уровень и качество продукта. Автоматические инструменты Figma — Smart Guides, Auto Layout, Constraints — созданы для того, чтобы вы могли эффективно использовать пиксели, не теряя гибкости.

• Figma работает исключительно с пикселями (px) — это стандарт для всех размеров и позиций.
• Пиксель в Figma — это логическая, а не физическая единица, что обеспечивает совместимость с разными устройствами.
• Используйте Auto Layout и Constraints для создания адаптивных макетов на основе px.
• Избегайте дробных значений и придерживайтесь системы отступов (кратных 4 или 8).
• Передача макетов в разработку упрощается благодаря точным px-замерам в режиме Inspect.