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

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

Figma — один из самых популярных инструментов для проектирования пользовательских интерфейсов. Его используют как фрилансеры, так и крупные дизайн-команды в компаниях уровня Google и Airbnb. Одним из ключевых аспектов эффективной работы в Figma является понимание системы измерений. Многие новички задаются вопросом: «Почему в Figma нет миллиметров, сантиметров или дюймов?», «Можно ли переключиться на другие единицы?» и «Как это влияет на адаптацию под разные экраны?». Эти вопросы не просто технические детали — они напрямую касаются качества продукта, скорости разработки и взаимодействия между дизайнерами и разработчиками.

Сегодняшняя статья даёт полный ответ на вопрос, в чём измеряется размер в Figma, объясняет логику выбора пикселей, раскрывает особенности работы с плотностью пикселей (PPI/DPI), показывает, как правильно использовать размеры при создании отзывчивых интерфейсов, и помогает избежать типичных ошибок. Мы также рассмотрим, как Figma обрабатывает масштабирование, приведём практические примеры и сравним подход Figma с другими графическими редакторами.

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

Цифровой дизайн отличается от полиграфии или чертежей тем, что его конечная цель — экран. В отличие от бумаги, где физические размеры имеют значение (например, А4 — 210×297 мм), экраны устройств воспроизводят изображение через матрицу пикселей. Именно поэтому Figma, как и большинство современных инструментов UI/UX-дизайна (Sketch, Adobe XD, Framer), использует пиксели как базовую единицу измерения.

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

Изначально некоторые дизайнеры, пришедшие из мира печати или CAD-систем, ожидают возможности использовать физические единицы. Однако в контексте UI это неэффективно. Например, кнопка шириной 100 мм будет выглядеть по-разному на iPhone и на 27-дюймовом мониторе. Пиксель же остаётся стабильной величиной в рамках одного макета, что обеспечивает предсказуемость.

Кроме того, Figma ориентирован на работу с сетками, отступами и компонентами, где важна относительность. Размеры строятся по принципу кратности: 8px, 16px, 24px — это не случайные числа, а часть систематического подхода к дизайну. Такая система упрощает создание масштабируемых библиотек компонентов.

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

• Единый стандарт для дизайна и разработки — разработчики получают значения в тех же единицах, которые используют в CSS.
• Точность контроля за положением и размером элементов — каждый пиксель можно переместить или изменить с шагом 0.1 px.
• Совместимость с автолэйаутом и компонентами — все внутренние механизмы Figma рассчитывают расстояния в пикселях.
• Универсальность — не зависит от DPI или PPI экрана пользователя, так как оперирует логическими пикселями.

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

Figma предоставляет интуитивно понятную систему измерений, доступную через правую панель свойств (Inspector). При выделении любого объекта вы видите поля X, Y, Width, Height — всё в пикселях. Даже если вы работаете с текстом, тенью или скруглениями, все параметры указываются в px.

Например:

• Радиус скругления угла — 8 px;
• Отступ между элементами — 16 px;
• Высота строки (line height) — 24 px;
• Толщина обводки — 2 px.

Figma также поддерживает дробные значения. Вы можете установить ширину слоя в 15.5 px или сдвинуть объект на 0.1 px по оси X. Это особенно полезно при точной выравнивании иконок или тонкой настройке типографики.

Как измерять расстояния между объектами

• Выберите два объекта — Figma автоматически покажет расстояние между ними в панели справа.
• Удерживайте Alt (на Windows) или Option (на Mac) и наведите курсор между элементами — появится измерительная линейка.
• Используйте плагины вроде Dimensions или Auto Layout Spacing для более сложных замеров.

Масштабирование и адаптивность: как пиксели работают на разных экранах

Один из самых частых вопросов: «Если я рисую макет для iPhone 15 (393×852 px), как он будет выглядеть на Samsung Galaxy с другой плотностью пикселей?». Ответ кроется в понятии логического пикселя.

Figma работает с логическими (или CSS) пикселями, а не физическими. Это означает, что макет масштабируется пропорционально в зависимости от плотности экрана (DPR — device pixel ratio). Например, на Retina-экране 1 логический пиксель = 2×2 физических пикселя, но в Figma вы всё равно работаете с 1 px.

Для создания адаптивных интерфейсов Figma предлагает Auto Layout — технологию, позволяющую элементам «расти» и «сжиматься» в зависимости от контента и ширины контейнера. При этом все отступы и размеры по-прежнему задаются в пикселях, но поведение элементов становится динамическим.

Пример: кнопка с авто-шириной

1. Создайте фрейм с текстом и добавьте Auto Layout по горизонтали.
2. Установите padding: 16 px слева и справа.
3. Текст внутри будет определять ширину кнопки, но отступы всегда будут 16 px.
4. На любом экране кнопка сохранит свои пропорции и читаемость.

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

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

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

• Игнорирование сетки 8px. Несоблюдение кратности 4 или 8 px приводит к «дрожащему» интерфейсу и сложностям при верстке.
• Ручная настройка вместо Auto Layout. Фиксированные размеры мешают адаптивности. Лучше использовать flex-подобные контейнеры.
• Забытый масштаб при презентации. Макет должен просматриваться в 100%, иначе оценка размеров будет искажена.
• Экспорт в неправильном разрешении. Забытый @2x или @3x может привести к размытым изображениям на мобильных устройствах.

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

«Когда я начал работать в Figma после 10 лет в Photoshop, мне было сложно принять идею «всё в пикселях». Я привык думать в миллиметрах и DPI. Но со временем понял: UI-дизайн — это не полиграфия. Это язык взаимодействия, и пиксель — его алфавит.

Сегодня я не представляю работу без строгой системы: 4px — минимальный шаг, 8px — базовый отступ, 16px — разделитель секций. Это как музыкальный ритм — если он сбит, интерфейс «не звучит».

Ключевой совет: не бойтесь пикселей. Учитесь думать в них, строить на них систему. Тогда ваш дизайн станет не только красивым, но и жизнеспособным.»

— Дмитрий Смирнов, главный дизайнер в продуктовой команде SberDevices, 15 лет в UX

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

Заключение

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

• Все размеры в Figma измеряются в пикселях (px) — других единиц нет.
• Пиксель в Figma — это логическая, а не физическая единица, совместимая с CSS.
• Для адаптивности используйте Auto Layout, а не фиксированные размеры.
• Соблюдайте сетку кратности (4px/8px) для визуальной гармонии и удобства верстки.
• Экспорт ассетов требует внимания к множителям: 1x, 2x, 3x — в зависимости от целевого устройства.