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

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

По умолчанию: в каких единицах измеряются размеры в Figma

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

Пиксели обеспечивают точность при разработке интерфейсов для браузеров, где CSS-код также работает в пикселях. Даже при работе с ретина-дисплеями, где один CSS-пиксель может соответствовать нескольким физическим, Figma сохраняет логику «1 пиксель = 1 единица дизайна», что упрощает коммуникацию между дизайнерами и разработчиками.

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

Изменить единицы измерения в Figma можно двумя способами: через настройки профиля и через контекстное меню в правой панели. Первый способ применяется ко всем проектам, второй — только к текущему файлу.

Чтобы изменить единицы глобально:
1. Нажмите на свою аватарку в правом верхнем углу.
2. Выберите «Account settings» (Настройки аккаунта).
3. Перейдите во вкладку «Units».
4. Из списка выберите нужную единицу: пиксели (px), миллиметры (mm), дюймы (in), сантиметры (cm) или точки (pt).
5. Сохраните изменения.

Для временного изменения в конкретном файле:
1. Выделите любой объект.
2. В правой панели найдите поля «Width» и «Height».
3. Нажмите на значок единицы измерения (например, «px») рядом с числом.
4. Выберите нужную единицу из выпадающего списка.

Когда какую единицу измерения использовать

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

• Пиксели (px) — стандарт для веб-дизайна, мобильных приложений (iOS/Android), интерфейсов десктопных программ. Используйте, если ваш продукт отображается на экране.
• Точки (pt) — основная единица в iOS и macOS. В Figma 1 pt = 1 px на экранах с плотностью 1x, но автоматически масштабируется на Retina-дисплеях. Идеально для дизайна iOS-приложений.
• Миллиметры (mm) и сантиметры (cm) — для печатных материалов: буклеты, открытки, этикетки, упаковка. Особенно полезны, если вы работаете с типографией или производством.
• Дюймы (in) — применяются в США и Канаде. Уместны, если ваш заказчик или типография работает с дюймовой системой.

Для смешанных проектов (например, веб-сайт + мобильное приложение) рекомендуется использовать пиксели как базовую единицу, а в отдельных файлах — переключаться на точки для iOS-макетов. Это позволяет сохранять единый масштаб и избежать путаницы.

Пиксель-перфект: почему пиксели остаются стандартом

Термин «пиксель-перфект» (pixel-perfect) означает, что дизайн полностью соответствует макету без смещений, искажений или несоответствий в размерах. Именно поэтому пиксели остаются неоспоримым стандартом в UI/UX-дизайне. Разработчики используют CSS, в котором все отступы, ширины и высоты задаются в пикселях. Даже при использовании относительных единиц (rem, em, %), базовый расчет ведётся от пикселей.

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

Figma поддерживает режим «Pixel Perfect» при экспорте, позволяя экспортировать изображения с точностью до пикселя, без сглаживания или сжатия. Это особенно важно при работе с иконками, логотипами и интерфейсными элементами, требующими чёткости.

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

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

• Смена единиц без понимания последствий. Например, переключение на mm в веб-проекте и последующее копирование размеров в CSS без конвертации.
• Игнорирование масштаба. При масштабе 50% размеры в панели свойств не меняются, но визуально объект кажется меньше — это может ввести в заблуждение.
• Ожидание автоматической конвертации. Figma не преобразует значения при экспорте. Если вы сделали кнопку 60 mm, а разработчику нужно 60 px — он не получит нужный размер без ручного расчёта.
• Использование разных единиц в разных файлах. В одной папке — px, в другой — pt. Это создаёт хаос при объединении макетов.

Чтобы избежать ошибок, создайте чек-лист для новичков в команде:
1. Установите единицу измерения в настройках аккаунта.
2. Проверяйте единицы в каждом новом файле.
3. Не копируйте числа без учёта контекста.
4. Всегда сверяйте размеры с требованиями разработки.

Влияние единиц измерения на экспорт

Единицы измерения в Figma не влияют на параметры экспорта. При экспорте изображений (PNG, JPG, SVG) вы задаёте размеры в пикселях, независимо от того, в каких единицах был создан макет. То есть, даже если вы работали в миллиметрах, при экспорте вы выбираете: «100×100 px» — и Figma автоматически рассчитает нужный размер.

Однако есть важный нюанс: при экспорте SVG-файлов, если в дизайне использовались относительные единицы (например, при импорте из Illustrator), в коде могут появиться значения в mm или in. Это может вызвать проблемы в браузерах, если они не поддерживают такие единицы. Лучше всегда экспортировать SVG в пикселях.

Настройка единиц для команды: как избежать хаоса

В больших командах, особенно с удалёнными участниками, единые стандарты — ключ к успеху. Вот как наладить процессы:

1. Создайте стиль-гайд по единицам. Добавьте в внутренний документ: «Для веба — px, для iOS — pt, для печати — mm».
2. Используйте Figma Community Plugins. Например, plugin «Unit Converter» позволяет быстро переключать значения между единицами без изменения настроек.
3. Настройте шаблоны. Создайте шаблонные файлы с заранее установленными единицами измерения и распространяйте их среди команды.
4. Проведите короткое обучение. Даже 10-минутный интро-сессия на стендапе снижает количество ошибок на 70%.

Не забывайте: Figma не синхронизирует настройки единиц между пользователями. Каждый дизайнер настраивает их индивидуально. Поэтому ответственность за единообразие лежит на лидере проекта.

Заключение

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

Соблюдение единой системы измерений — это не вопрос эстетики, а вопрос точности, скорости и качества продукта. Один неправильный размер может привести к недопониманию, переделкам и даже отказу от дизайна. Настройте Figma под вашу работу, закрепите правила в команде, и вы сэкономите десятки часов на уточнениях.

• По умолчанию Figma использует пиксели (px) — оптимально для веба и мобильных интерфейсов.
• Для iOS-дизайна лучше использовать точки (pt), для печати — миллиметры (mm).
• Единицы измерения не синхронизируются между участниками команды — настраивайте их индивидуально и согласовывайте стандарты.
• Экспорт всегда происходит в пикселях, независимо от используемой единицы в дизайне.
• Самая частая ошибка — смешивание единиц в одном проекте; избегайте её с помощью чек-листов и шаблонов.