Как поменять единицы измерения в фигме

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

Основы Figma и единицы измерения

Figma — это векторный редактор, ориентированный на кросс-платформенный дизайн интерфейсов. Все измерения в нём базируются на пикселях (px), что делает его идеальным инструментом для веб- и мобильного дизайна. Пиксель в Figma соответствует одному физическому пикселю на экране с плотностью 96 PPI, что является стандартом для большинства цифровых дисплеев.
Однако при работе с типографикой или импортом дизайнов из других программ (например, Adobe Illustrator или Sketch) может возникнуть необходимость в использовании пунктов (points, pt). Важно понимать, что 1 pt = 1.333 px при соотношении 72 точки на дюйм (PPI), что часто вызывает путаницу у новичков. Figma автоматически конвертирует значения при копировании из внешних источников, но ручная корректировка всё равно может потребоваться.
Для контроля точности дизайна важно осознавать, что все размеры — от высоты строки до отступов — отображаются в пикселях. Это означает, что если вы создаёте дизайн для iOS, где традиционно используются пункты, вам нужно либо мысленно конвертировать значения, либо использовать специальные методики.

Как сменить единицы в свойствах объекта

Хотя Figma не предоставляет прямого способа смены единиц измерения в интерфейсе, вы можете управлять восприятием размеров через контекстные действия и ручной ввод значений. Например, при создании прямоугольника вы можете указать его ширину как «100px», «50%», или даже «auto», хотя последнее относится к режимам автолейаута.
Чтобы задать процентное значение, просто введите число с символом % в поле ширины или высоты. Это особенно полезно при проектировании адаптивных интерфейсов, где элементы должны масштабироваться относительно родительского фрейма. Однако такие значения будут работать только в рамках авто-компонента или фрейма с включённым autolayout.

Шаги для установки процентных значений

1. Выделите нужный объект или фрейм.
2. В правой панели свойств найдите поля Width и Height.
3. Введите значение с символом процента, например, 80%.
4. Убедитесь, что родительский фрейм имеет фиксированный размер.
5. Проверьте поведение при изменении размеров родителя.

Если вы попытаетесь ввести «pt» вручную, Figma проигнорирует это и оставит значение в пикселях. Однако при работе с текстом система сама распознаёт, когда вы имеете в виду пункты.

Работа с текстом и шрифтами: pt против px

Один из самых частых случаев, когда дизайнеры сталкиваются с вопросом единиц измерения — настройка текстовых стилей. В Figma размер шрифта всегда указывается в пунктах (pt), хотя в интерфейсе он отображается без буквенных обозначений. Например, значение «16» будет означать 16pt, что эквивалентно примерно 21.33px.
Это может вызывать путаницу при согласовании с разработчиками, особенно если они ожидают значения в пикселях. Чтобы избежать ошибок, рекомендуется заранее договориться о системе измерений в команде. Для веба часто используется px, для iOS — pt, для Android — sp или dp.

Пример конвертации для типографики

• Заголовок H1: 32pt в Figma → 42.67px для CSS.
• Основной текст: 16pt → 21.33px.
• Подпись: 12pt → 16px.

Обратите внимание, что при экспорте макетов через Figma Inspect разработчики видят значения в пикселях, что упрощает реализацию. Тем не менее, важно документировать эти нюансы в дизайн-системе.

Плагины для управления единицами измерения

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

Популярные плагины для работы с единицами

• Units Converter — позволяет быстро конвертировать значения между px, pt, rem, em и % прямо в интерфейсе Figma.
• Dimensions — добавляет подробные метки размеров с возможностью выбора единиц отображения.
• Auto Layout Helper — помогает настраивать процентные и фиксированные размеры в рамках автолейаута.
• Text Style Manager — позволяет стандартизировать текстовые стили с указанием единиц и платформенной привязки.

Установка плагина проста: откройте панель плагинов (Ctrl+P), найдите нужное название, нажмите «Install» и запустите из меню. После этого вы сможете использовать его в активном файле.

Как использовать Units Converter

1. Выделите объект с нужным размером.
2. Запустите плагин Units Converter.
3. Выберите входную единицу (например, pt) и выходную (px).
4. Плагин покажет конвертированное значение.
5. Скопируйте результат и примените вручную, так как прямое редактирование в Figma остаётся в px.

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

Советы по командной работе и стандартизации

При совместной работе над проектом в Figma ключевым фактором успеха становится единая система измерений. Даже если вы не можете изменить единицы в интерфейсе, вы можете установить правила их использования в команде.
Первое, что нужно сделать — создать гайдлайн в разделе «Documentation» файла Figma. Укажите, какие единицы используются для каких элементов: например, все отступы — в пикселях, размеры шрифтов — в пунктах, а ширина колонок — в процентах при использовании автолейаута.
Второй шаг — использование компонентов и стилей. Создайте текстовые стили с чёткими названиями: «Body / 16pt», «Caption / 12pt». Это позволит избежать путаницы и обеспечит единообразие.

Чек-лист стандартизации единиц

• Определите основную платформу (веб, iOS, Android).
• Согласуйте систему измерений с разработчиками.
• Создайте текстовые и цветовые стили.
• Добавьте страницу с гайдлайнами и примерами.
• Настройте шаблоны для новых проектов.
• Обучите новичков в команде.

Также рекомендуется использовать комментарии в Figma для пояснения спорных моментов. Например, если вы используете 16pt для веба, добавьте комментарий: «Это 21.33px в CSS, значение округляется до 21px при реализации».

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

В профессиональной практике дизайнера важно не только уметь работать с инструментами, но и понимать логику их построения. Figma сделала ставку на пиксели как универсальную единицу, что упрощает кросс-платформенную разработку, но требует дополнительной осведомлённости от команды.
«Я рекомендую не бороться с системой, а адаптироваться к ней. Вместо того чтобы искать способы заменить px на pt, научитесь читать контекст: 16 в поле шрифта — это pt, а в поле ширины — px. Это не ошибка, а особенность. Главное — документировать это в дизайн-системе», — говорит Елена Ковалёва, руководитель отдела UX в крупной IT-компании.
Также эксперты отмечают, что будущее за автоматизацией. С развитием API Figma и ростом числа плагинов, можно ожидать появления более гибких решений для управления единицами измерения. Возможно, в будущем появится возможность настройки профилей единиц под разные проекты.

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

Заключение

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

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