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

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

Размер фрейма в Фигме измеряется в пикселях по умолчанию, но может быть изменён на другие единицы (например, rem, em, %) через настройки единиц измерения. Для веб-дизайна рекомендуется использовать пиксели, для адаптивных систем — rem, а для масштабируемых интерфейсов — проценты. Всегда проверяйте текущие единицы в панели свойств.

Содержание статьи:

Какие единицы измерения используются в Фигме для фреймов?
Почему по умолчанию используется пиксель?
Как изменить единицы измерения в Фигме?
Конвертация единиц: пиксели, rem, em, проценты
Лучшие практики выбора единиц для разных проектов
Частые ошибки и как их избежать
Экспертное мнение: как профессионалы подходят к измерениям
Вопросы и ответы
Заключение

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

Фигма поддерживает несколько единиц измерения: пиксели (px), проценты (%), em, rem и даже миллиметры (mm) — но не все из них доступны по умолчанию. По умолчанию, при создании нового фрейма или холста, размеры отображаются в пикселях. Это логично: пиксель — базовая единица цифрового экрана, и именно он используется в веб-разработке для точного позиционирования элементов. Однако, если вы работаете над дизайном для мобильных приложений с поддержкой разных плотностей экранов или используете дизайн-системы на основе CSS-переменных, то пиксели могут стать ограничением.

Для адаптивного дизайна важно понимать, что фреймы в Фигме — это не просто прямоугольники, а контейнеры, которые могут масштабироваться, растягиваться и реагировать на контент. Поэтому выбор единицы измерения — это стратегическое решение, влияющее на гибкость макета. Например, если вы зададите ширину фрейма в 100%, он будет автоматически подстраиваться под ширину родительского контейнера — что особенно полезно при проектировании responsive-интерфейсов.

Полезно знать: Фигма не ограничивает вас одной единицей — вы можете комбинировать пиксели и проценты в одном макете. Например, фрейм может иметь фиксированную высоту в 80px, а ширину — в 100%.

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

Пиксель — это минимальная единица отображения на экране. Он не зависит от размера шрифта, масштаба или устройства, что делает его предсказуемым и стабильным. Именно поэтому Фигма выбрала его как основную единицу: он обеспечивает точность, необходимую для дизайна интерфейсов, где даже 1–2 пикселя могут нарушить визуальную гармонию.

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

Однако, если вы проектируете для систем с динамическим масштабированием — например, для iOS или Android с поддержкой Dynamic Type — пиксели становятся менее гибкими. В таких случаях рекомендуется переключиться на rem, которые привязаны к базовому размеру шрифта пользователя.

«Пиксель — это фундамент, но не всегда идеальная основа. Я работаю в пикселях для десктопных интерфейсов, а для мобильных — перехожу на rem. Это позволяет сохранить масштабируемость, не теряя контроль над пропорциями.» — Елена Кузнецова, UX-дизайнер, 8 лет опыта в fintech

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

Изменить единицы измерения в Фигме можно за несколько кликов. Это не влияет на размеры объектов — только на отображение значений в панели свойств. Вот пошаговая инструкция:

Откройте любой фрейм или объект в редакторе.
В правой панели найдите раздел Size (Размер).
Наведите курсор на поле с числом (например, 1200×800).
Кликните на стрелочку справа от числа — откроется выпадающее меню единиц.
Выберите нужную единицу: px, %, em, rem или mm.

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

Полезно знать: Если вы используете Design System с компонентами, изменение единиц измерения в одном фрейме не повлияет на другие экземпляры. Каждый фрейм управляет своими настройками отображения.

Конвертация единиц: пиксели, rem, em, проценты

Чтобы эффективно работать с разными единицами, важно понимать их взаимосвязь. Ниже — таблица с примерами конвертации при базовом размере шрифта 16px (стандарт для большинства браузеров).

Единица	Что означает	Пример (при 16px)	Когда использовать
px (пиксель)	Фиксированный размер	16px = 16 пикселей	Десктоп-интерфейсы, точные элементы (иконки, кнопки)
rem	Относительно корневого шрифта (html)	1rem = 16px, 1.5rem = 24px	Мобильные приложения, адаптивные сайты, системы с масштабированием
em	Относительно родительского шрифта	Если родитель — 16px, то 1em = 16px; если родитель — 20px, то 1em = 20px	Вложенные компоненты, где нужна пропорциональность
%	Процент от родительского контейнера	50% = половина ширины/высоты родителя	Адаптивные сетки, fluid-дизайн, full-width секции

При проектировании интерфейса для веба, где важна доступность, rem — оптимальный выбор. Он позволяет пользователям увеличивать шрифт в браузере, а ваш интерфейс будет масштабироваться пропорционально. Пиксели же «ломают» эту гибкость — элементы остаются неизменными, даже если пользователь включил крупный шрифт.

«Я никогда не использую px для основных контейнеров в веб-проектах. Даже если клиент просит — объясняю, что rem не только удобнее для разработки, но и соответствует WCAG 2.1.» — Дмитрий Смирнов, фронтенд-архитектор, более 10 лет в e-commerce

Лучшие практики выбора единиц для разных проектов

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

Веб-сайты (десктоп + мобильный) — используйте rem для ширин, высот и отступов. Пиксели — только для фиксированных элементов (иконки, границы, тени).
Мобильные приложения (iOS/Android) — rem или pt (в Фигме можно включить через плагины), особенно если проект требует поддержки Dynamic Type.
Прототипы с адаптивной сеткой — комбинируйте % и px: ширина колонок в %, отступы в px или rem для точности.
Дизайн-системы — стандартизируйте единицы. Если в вашей системе используется rem, все фреймы должны быть созданы в rem, чтобы избежать рассогласования.
Экспорт в код — убедитесь, что экспортируемые значения соответствуют ожиданиям разработчика. Если вы используете rem, укажите в документации базовый размер (например, 16px).

Представьте, что вы проектируете интерфейс для банка, где пользователи могут увеличивать шрифт до 200%. Если вы использовали px для всех элементов — интерфейс развалится. Если использовали rem — всё останется читаемым и функциональным. Это не просто «хорошая практика» — это требование доступности.

Полезно знать: В Фигме можно установить единицы по умолчанию для всех новых файлов через настройки аккаунта: File → Preferences → Units. Это особенно полезно для команд, работающих в едином стиле.

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

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

Ошибка 1: Использование px для контейнеров, которые должны быть адаптивными. Результат — интерфейс не масштабируется на мобильных устройствах.
Ошибка 2: Смешивание em и rem без понимания иерархии. Например, если родительский элемент имеет font-size: 20px, а дочерний — 1em, то он будет 20px, а не 16px. Это приводит к непредсказуемым результатам.
Ошибка 3: Неправильная настройка экспорта. Если вы экспортируете в CSS, а в Фигме установлены px, но разработчик ожидает rem — возникает расхождение в 10–20%.
Ошибка 4: Игнорирование базового размера шрифта. Некоторые сайты используют 18px или 14px как базовый — если вы работаете в rem, но не знаете этого, ваши значения будут неверными.
Ошибка 5: Установка единиц в % без учёта родительского контейнера. Фрейм с шириной 100% в пустом холсте — это 100% от холста. Если вы вставите его в другой фрейм — он изменится.

Чтобы избежать этих ошибок, создайте чек-лист перед передачей макета разработчику:

Какие единицы используются в макете?
Какой базовый размер шрифта принят в проекте?
Какие элементы должны быть фиксированными, а какие — адаптивными?
Согласованы ли единицы с разработчиком до начала верстки?

Экспертное мнение: как профессионалы подходят к измерениям

Алексей Морозов, Lead UX-дизайнер в крупной SaaS-компании, работает с Фигмой более 7 лет. Его подход к единицам измерения — результат экспериментов, ошибок и обратной связи от команд разработки.

«Я не просто выбираю единицы — я создаю систему. В наших проектах мы используем rem как основу, потому что это единственный способ обеспечить доступность и масштабируемость. Но для кнопок, иконок и границ — остаюсь на px. Почему? Потому что кнопка 48x48px — это стандарт WCAG, а 3rem не всегда даст нужный размер. Мы используем компоненты с фиксированными значениями внутри, но обёртку делаем в rem. Так мы получаем и точность, и гибкость.

Ещё один совет: никогда не полагайтесь на автоматическое преобразование. Если вы переключаете единицы — проверяйте каждый элемент вручную. Фигма не пересчитывает значения при смене единиц — она просто меняет метку. Это как поменять надпись на термометре с градусов Цельсия на Фаренгейты — температура не изменится, но вы начнёте думать, что она стала выше».

«Если вы работаете в команде — создайте документ “Единицы измерения в проекте”. Разместите его в Notion или Confluence. Это сэкономит сотни часов на уточнениях.»

— Алексей Морозов

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

Можно ли использовать миллиметры в Фигме для печатных макетов?

Да, Фигма поддерживает миллиметры (mm), сантиметры (cm) и дюймы (in). Это удобно для печатных материалов, таких как брошюры или этикетки. Однако для цифровых интерфейсов это не рекомендуется — экраны имеют разную плотность пикселей, и 10мм на одном устройстве может быть 300px, а на другом — 400px.

Почему после смены единицы на rem размеры фрейма не изменились?

Потому что Фигма не пересчитывает значения автоматически. Вы меняете только отображение. Чтобы фрейм стал действительно 2rem (32px при базовом 16px), вам нужно вручную ввести 2rem в поле размера — и только тогда он изменится.

Как узнать, какой базовый размер шрифта используется в проекте?

Откройте любой текстовый слой. В свойствах шрифта вы увидите размер в px или rem. Если там указано 16px — базовый размер 16px. Если вы видите 1rem — проверьте, какое значение установлено в корневом элементе (html) в макете.

Поддерживает ли Фигма автоматическую конвертацию между единицами?

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

Какие единицы лучше использовать для Figma Auto Layout?

Для Auto Layout идеально подходят rem и %. Пиксели работают, но ограничивают гибкость. Если вы используете stretch и fill, лучше задавать ширину в %, а высоту — в rem, чтобы элементы корректно растягивались и не ломали структуру.

Заключение

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

Помните: в дизайне нет «правильных» единиц — есть правильные решения для конкретной задачи. Не полагайтесь на настройки по умолчанию. Проверяйте, согласовывайте, документируйте. Особенно если работаете в команде.

Точность в измерениях — это не деталь, а фундамент. Один неверный пиксель может сорвать весь дизайн; один неправильный rem — нарушить доступность для тысяч пользователей. Ваша задача — не просто рисовать красиво, а создавать интерфейсы, которые работают для всех.

По умолчанию Фигма использует пиксели — но это не всегда оптимально.
Для веб-дизайна с доступностью выбирайте rem.
Для адаптивных сеток — комбинируйте % и px.
Никогда не полагайтесь на автоматическую конвертацию единиц — проверяйте вручную.
Согласуйте единицы измерения с разработчиками до начала верстки.

⚠️ Дисклеймер — нажмите, чтобы развернуть

Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.

Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».

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

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

Возрастные ограничения: материалы, содержащие сведения о продукции категории 18+, включая алкоголь или азартные игры, предназначены исключительно для совершеннолетней аудитории и публикуются в информационных целях.

Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.

Редакция не допускает публикаций, содержащих пропаганду экстремизма, терроризма, наркотических средств или суицида; подобные материалы подлежат немедленному удалению.

Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.

Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.

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

Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.

Мнения авторов могут не совпадать с позицией государственных органов или коммерческих организаций, упомянутых в материалах.