Размеры в фигме в чем

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

Figma — это инструмент, построенный вокруг пиксельной точности. В отличие от некоторых графических редакторов, где можно выбирать между дюймами, миллиметрами или пунктами, Figma работает только в одной системе: пикселях. Это упрощает процесс проектирования цифровых интерфейсов, поскольку именно пиксели являются стандартом для веб- и мобильной разработки. Однако новички часто сталкиваются с путаницей: почему нельзя указать размер в процентах? Как передать относительные величины разработчику? Что означают значения в Inspector при использовании Auto Layout? Ответы на эти вопросы лежат в понимании архитектуры Figma, её подхода к размерам и взаимодействию с другими системами.

Единицы измерения в Figma: почему только пиксели?

Figma использует пиксели (px) как единственную единицу измерения. Это не ограничение, а осознанный выбор, обусловленный спецификой цифрового дизайна. Все экраны — от смартфонов до мониторов — отображают информацию в виде пикселей. Даже при высоком DPI (Retina, Quad HD) базовой единицей остаётся пиксель, хотя он может быть физически меньше. Figma оперирует логическими пикселями, что обеспечивает консистентность при просмотре на разных устройствах.
Некоторые пользователи ожидают возможности использовать другие единицы — например, проценты, em или vh/vw, как в CSS. Но Figma не является средой исполнения кода, а служит для визуального моделирования. Здесь вы задаёте конкретные значения, а относительное поведение определяется через структуру слоёв, Auto Layout и constraints. Именно поэтому в свойствах объекта всегда отображаются px: ширина, высота, отступы, радиусы, тени — всё в одном формате.

Это упрощает совместную работу: дизайнер из Нью-Йорка и разработчик из Токио видят одинаковые цифры. При этом Figma корректно масштабирует интерфейс при зуме (от 1% до 6400%), но внутренние значения остаются неизменными. Например, если кнопка имеет ширину 200 px, она будет такой же и при 50%, и при 200% увеличении — меняется только масштаб просмотра, а не данные.

• Figma не поддерживает mm, cm, дюймы, пункты (pt) или picas.
• Все числовые поля принимают только цифры и знак минус (для отрицательных offset).
• Плагины могут добавлять визуальные метрики, но не изменяют базовую систему единиц.

Как Figma обрабатывает дробные значения?

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

Сетки и отступы: как основа точного дизайна

Правильная работа с размерами невозможна без чёткой системы сеток и отступов. В Figma есть несколько типов сеток: документные, фреймовые, колоночные, гайдлайны и layout grids. Каждая играет свою роль в контроле размеров.
Layout Grid — один из самых мощных инструментов. Он позволяет задать равномерную структуру внутри фрейма: количество колонок, ширину, отступы между ними и внешние padding. При этом все значения указываются в пикселях. Например, 12-колоночная сетка с шириной колонки 80 px и gutter 16 px даёт предсказуемую структуру, которую легко повторить в коде.

• Колоночные сетки идеальны для веб-страниц и адаптивных интерфейсов.
• Грид с привязкой помогает выравнивать элементы без ручных измерений.
• Document Grid задаёт фоновую сетку для всего файла, удобен при черновой компоновке.

Отступы — ключевой элемент визуальной иерархии. В Figma нет встроенного «отступометра», но при включённой привязке (Snap to Grid) и активных guidelines вы сразу видите расстояния между объектами. При выделении нескольких элементов в правой панели Inspector отображается расстояние по X и Y — это одна из главных фич для контроля размеров.

Auto Layout и относительные размеры: мост между дизайном и кодом

Auto Layout — это технология, которая позволяет создавать «умные» компоненты, способные менять размеры в зависимости от содержимого. Хотя Figma по-прежнему использует пиксели, Auto Layout имитирует поведение flexbox в CSS. Это особенно важно при проектировании интерактивных элементов: кнопок, табов, списков.
Когда вы применяете Auto Layout к фрейму, вы можете задать:

• Направление (горизонтальное или вертикальное);
• Отступы (padding);
• Интервалы между дочерними элементами (gap);
• Выравнивание и распределение пространства.

При этом каждый элемент сохраняет свои размеры в px, но поведение группы становится динамическим. Например, кнопка с текстом «Отправить» автоматически растягивается при замене текста на «Отправить сообщение». Разработчик видит это как flex-контейнер с white-space: nowrap и min-content width.

Как Auto Layout влияет на восприятие размеров?

При использовании Auto Layout в Inspector появляются новые параметры: fill container, fixed, hug contents. Эти значения не меняют единицы измерения, но определяют, как элемент будет вести себя при изменении контекста. Например:

• Fixed — жёстко заданная ширина в пикселях;
• Fill container — занимает доступное пространство (аналог 100% ширины);
• Hug contents — подстраивается под содержимое (min-content).

Передаём размеры разработчику: что важно?

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

• Расстояние от элемента до родителя и соседей;
• Ширина, высота, border-radius, тени;
• CSS-код (включая margin, padding, размеры);
• Цвета в HEX, RGB, HSL.

Проблема в том, что CSS-код генерируется на основе пикселей, но в реальной верстке часто используются relative units (rem, em, %). Чтобы избежать недопонимания, важно:

1. Чётко документировать базовый размер шрифта (обычно 16px = 1rem);
2. Указывать, какие отступы должны быть адаптивными;
3. Использовать плагины вроде Tokens Studio или Zeplin для синхронизации design tokens.

Ошибки, которые делает каждый новичок

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

• Игнорирование сеток и гайдов. Ручное позиционирование приводит к несогласованности. Разница в 1–2 пикселя кажется незначительной, но накапливается по всему интерфейсу.
• Отсутствие единой системы отступов. Использование случайных значений (13, 19, 27 px) затрудняет верстку и портит визуальный ритм.
• Работа без Auto Layout. Создание статичных фреймов, которые не масштабируются, увеличивает объём работы при изменениях.
• Неправильное использование групп. Группы в Figma не поддерживают Auto Layout. Вместо них нужно использовать фреймы.
• Экспорт без учёта масштаба. Экспорт в 1x, 2x, 3x требует понимания, где и как будет использоваться изображение.

Как избежать этих ошибок?

1. Настройте layout grid во всех основных фреймах.
2. Создайте библиотеку компонентов с Auto Layout.
3. Используйте плагин «Spacing Guide» для визуализации отступов.
4. Проверяйте макет с помощью функции «Design Lint».
5. Проводите регулярные review с разработчиками.

Экспорт и масштабирование: как размеры влияют на качество

При экспорте из Figma вы выбираете разрешение: 1x, 2x, 3x. Это напрямую связано с размерами. 1x — это базовое разрешение (например, 100×100 px). 2x — удвоенные размеры (200×200 px), предназначено для Retina-экранов. 3x — для устройств с очень высокой плотностью пикселей (в основном Android).
Важно понимать, что:

• Векторные элементы (формы, текст, иконки) экспортируются чётко при любом масштабе.
• Растровые изображения при увеличении могут терять качество.
• Экспорт в SVG сохраняет векторную природу, но требует проверки совместимости.

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

Точность в размерах — не про педантизм, а про уважение к команде и пользователям. Когда все элементы выстроены по единой системе, интерфейс становится предсказуемым, а разработка — быстрее. Лучшие практики включают использование кратных 4 или 8 значений, внедрение design tokens и постоянную синхронизацию с разработчиками.
Автоматизация — ключ к масштабированию. Чем больше компонентов используют Auto Layout, тем легче вносить изменения. Не стоит бояться экспериментировать с вложенными Auto Layout-структурами: они позволяют создавать сложные, но гибкие макеты.
Главное — помнить, что Figma работает в пикселях, но ваша задача — передать не просто цифры, а логику. Размеры — это часть дизайнерского языка, и их нужно «говорить» правильно.

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

Заключение

Размеры в Figma — это не просто цифры, а фундамент качественного дизайна. Понимание того, что вся система построена на пикселях, позволяет избежать путаницы и выстроить эффективный workflow. Использование сеток, Auto Layout и единых правил отступов делает макеты предсказуемыми, а сотрудничество с разработчиками — прозрачным.

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