Scott
Если элемент должен оставаться у края фрейма при изменении его размера, задайте привязки — Constraints. Если блок должен подстраиваться под текст, количество строк и соседние элементы, используйте Auto Layout. В одной карточке нужны оба подхода: текст участвует в потоке и увеличивает высоту, а кнопка закрытия остаётся в правом верхнем углу.
Ниже разберём, как выбрать правило для конкретного слоя и собрать такую карточку в Pixso. Настройки отступов, интервалов и размеров подробнее разобраны в руководстве по Auto Layout; здесь главное — понять, на каком уровне применять каждое правило, чтобы одно не мешало другому.
Сначала определите, что будет меняться
У макета есть как минимум два разных источника изменений. Первый — доступная ширина: например, карточку показывают в широкой области профиля и в узкой боковой панели. Второй — содержимое: у одного человека короткая должность, у другого длинное название роли, а у третьего добавлена ещё одна строка контактов.
Привязки отвечают на вопрос «где должен оставаться слой, когда меняется родительский фрейм?». Auto Layout отвечает на другой вопрос: «как связаны размеры и расположение соседних элементов, когда меняется содержимое?». Если длинный текст закрывает кнопку, одной привязкой к правому краю это не исправить. Если значок должен лежать поверх карточки, добавление его в обычный вертикальный поток тоже не решит задачу.
Такая структура уменьшает число ручных правок в вариантах одного компонента. Но она не выбирает за дизайнера контрольные ширины, порядок чтения или поведение мобильной версии. Например, на небольшом экране меню может превратиться в отдельную кнопку: растянуть исходную строку недостаточно. Эти изменения нужно задать в макете и обсудить с разработчиком.
Привязки: положение относительно родительского фрейма
Constraints определяют, как слой реагирует на изменение размеров содержащего его фрейма. Правила по горизонтали и вертикали задаются отдельно. Для кнопки закрытия подойдут привязки справа и сверху; для плавающей кнопки действия — справа и снизу.
- К одному краю. Сохраняется расстояние до выбранной стороны. Кнопка остаётся у правого края, когда карточка становится шире.
- К противоположным краям. Слой растягивается между ними, сохраняя соответствующие отступы. Так может вести себя поле, которое должно занимать ширину обычного фрейма.
- По центру. Сохраняется положение относительно центра по выбранной оси.
- Scale. Положение и размер связаны с пропорциями родителя. Это другое поведение, чем постоянный отступ в пикселях.
Представьте фрейм шириной 360 px и квадратную кнопку 24 × 24 px с отступом 16 px справа. Её координата по горизонтали равна 320 px. После сужения фрейма до 280 px координата станет 240 px, но размер кнопки и отступ справа сохранятся. Если вместо этого выбрать масштабирование, результат будет зависеть от пропорций родителя, а не от требования «всегда 16 px от края».
Привязки относятся к непосредственному родителю. Значок внутри небольшого вложенного фрейма привязывается к нему, а не автоматически ко всей странице. Поэтому при неожиданном смещении сначала посмотрите на иерархию слоёв.
Растяжение по двум осям само по себе не гарантирует сохранения пропорций фотографии. Для изображения отдельно определите размеры слоя и способ заполнения. И не путайте привязку к нижнему краю фрейма с фиксацией при прокрутке: поведение прокрутки настраивается отдельно.
Auto Layout: размеры и порядок зависят от содержимого
В Auto Layout дочерние элементы размещаются по правилам контейнера: направление, выравнивание, внутренние отступы и интервалы. У кнопки это может быть горизонтальная пара «иконка + подпись», у карточки — вертикальная последовательность «имя → должность → действие».
Замените надпись «Купить» на «Добавить в корзину». Если кнопка подстраивается под содержимое, она станет шире и сохранит внутренние отступы. Если её ширина фиксирована, одного Auto Layout недостаточно: нужно решить, разрешён ли перенос, должна ли кнопка занять всю строку или требуется другая формулировка.
Режимы размеров нужно выбирать отдельно для контейнера и его дочерних слоёв, а также отдельно по каждой оси:
- Fixed. У выбранного объекта задан фиксированный размер. Например, ширина тестовой карточки составляет 360 px.
- Hug contents. Размер контейнера подстраивается под содержимое с учётом интервалов и внутренних отступов. Это подходит для высоты карточки с переменным количеством текста.
- Fill container. Дочерний слой занимает доступное пространство внутри родителя. Например, текстовый блок заполняет ширину карточки между боковыми отступами.
Для переноса текста важна вся цепочка: доступная ширина текста, его собственное поведение по высоте и высота родительского контейнера. Если текстовый слой имеет фиксированную высоту, а карточка подстраивается под его границы, добавленные строки могут всё равно обрезаться.
Auto Layout удобно сравнивать с логикой потока в CSS, но совпадение визуальной модели не означает готовую реализацию. В редакторе вы описываете поведение макета; в приложении дополнительно нужны правила для реальных данных, браузера и компонентов кода.
Как выбрать правило для конкретного элемента
| Ситуация | Что использовать | Почему |
|---|---|---|
| Кнопка закрытия поверх карточки | Элемент вне потока и привязки сверху/справа | Он не должен добавлять строку или менять высоту содержимого |
| Кнопка с короткой или длинной надписью | Auto Layout и размер по содержимому | Контейнер должен учитывать длину текста и отступы |
| Карточка тарифа с 3 или 10 пунктами | Вертикальный Auto Layout и высота по содержимому | Дополнительные пункты сдвигают следующие элементы вниз |
| Теги, которым разрешён перенос на следующую строку | Горизонтальный Auto Layout с переносом | Нужны порядок элементов и правила перехода между строками |
| Логотип слева и значок меню справа в обычном фрейме | Привязки к соответствующим краям | При изменении ширины сохраняются крайние позиции |
| Плавающая кнопка действия внизу экрана | Привязки справа/снизу; прокрутка — отдельная настройка | Положение при изменении фрейма и положение при прокрутке — разные требования |
Не выбирайте механизм только по сложности экрана. Простая кнопка может требовать Auto Layout из-за длинной подписи, а сложная карточка — обычной привязки для одного значка. В навигации с динамическими пунктами удобнее управлять расстояниями через поток; привязки к краям подходят для двух независимых объектов, но не распределяют автоматически место между всеми ссылками.
Общая схема обычно состоит из нескольких уровней. Обычный фрейм задаёт область экрана. Вложенный контейнер организует содержимое через Auto Layout. Элемент, который должен лежать поверх содержимого, исключается из потока и получает привязки к нужному родителю.
В Figma такой режим называется Ignore auto layout; раньше он назывался Absolute position. Обычные дочерние элементы Auto Layout используют правила размеров, а привязки применяются к элементам, исключённым из потока. Это различие описано в официальном руководстве Figma на английском. В Pixso также есть исключение элемента из автоматической компоновки; проверяйте правило именно выбранного слоя, а не соседнего контейнера.
Карточка профиля в Pixso: текст растёт, кнопка остаётся на месте
Соберём карточку для имени «Анна Лебедева» и должности «Руководитель исследований пользовательского опыта». Сравним ширину 360 и 280 px. У карточки будут отступы 24 px, интервалы между содержимым 16 px и кнопка закрытия 24 × 24 px на расстоянии 16 px от верхнего и правого края.
1. Задайте контейнер и правила размеров
Создайте фрейм инструментом Frame и назовите его Profile Card. Добавьте вертикальный Auto Layout, задайте интервал 16 px и внутренние отступы по 24 px. Для первой версии установите ширину 360 px, а высоту настройте по содержимому. Так изменение ширины и рост текста будут проверяться раздельно.
2. Добавьте имя и должность
Разместите имя и должность отдельными текстовыми слоями. Для должности выберите заполнение доступной ширины и рост по высоте при переносе строк. При ширине карточки 360 px между боковыми отступами остаётся 312 px; при ширине 280 px — 232 px.
Строку с именем поместите в отдельный вложенный контейнер. Оставьте в нём справа 40 px свободного места для кнопки закрытия, не уменьшая ширину всех остальных строк. Это важно: элемент вне потока не отталкивает текст сам. Без зарезервированного места длинное имя может оказаться под значком.
3. Исключите кнопку закрытия из потока
Добавьте фрейм кнопки 24 × 24 px со значком закрытия. Если оставить его обычным дочерним элементом вертикального Auto Layout, он займёт отдельное место в последовательности. Включите для него режим исключения из Auto Layout — абсолютного позиционирования — и убедитесь, что непосредственным родителем остаётся Profile Card.
Расположите кнопку с отступами 16 px сверху и справа. В рассматриваемом макете это размер самого элемента; достаточную область нажатия нужно определить отдельно для целевого устройства.
4. Настройте привязки и сузьте карточку
Для кнопки выберите привязки Top и Right. Создайте второй вариант карточки шириной 280 px, не меняя размер кнопки и отступы. Текст должности должен переноситься в доступной области, высота карточки — увеличиваться по содержимому, а кнопка — оставаться у верхнего правого края.
Сравните также короткую должность «UX-дизайнер» с длинной. Проверяйте именно изменение ширины фрейма, а не масштабирование всей композиции: масштабирование меняет размеры объектов и не проверяет те же правила поведения.
Если кнопку уводит от края, проверьте её родителя и привязки. Если обрезается должность, проверьте высоту текстового слоя. Если карточка не растёт, проверьте режим её высоты. Если имя заходит под кнопку, исправьте свободное место в верхней строке: привязка кнопки не предотвращает пересечение с текстом.
5. Передайте разработчику правила, а не только два изображения
Рядом с вариантами укажите, что ширина определяется местом карточки в интерфейсе, высота зависит от текста, внутренние отступы равны 24 px, интервалы — 16 px, а кнопка закреплена сверху и справа с отступом 16 px. Отдельно покажите длинное имя, длинную должность и отсутствие необязательной строки.
В режиме передачи разработчику используйте размеры, свойства и доступные фрагменты кода как справочную информацию. Они не заменяют сборку компонента в приложении: разработчику ещё нужно учесть семантику, доступность, реальные данные и поведение на других ширинах. Результат стоит сравнивать с правилами макета, а не только с одной контрольной картинкой.
Собрать карточку с Auto Layout в Pixso →
Если карточка уже нарисована без Auto Layout
В готовом макете можно вручную выделить связанные слои и настроить их контейнеры. Для ускорения начальной разметки в Pixso предусмотрен Smart Layout: выберите подходящий набор слоёв и вызовите команду из контекстного меню или панели справа.
После этого проверьте получившуюся вложенность: имя и должность должны относиться к своей карточке, а кнопка закрытия — оставаться отдельным элементом вне потока. Автоматическое построение структуры не определяет за вас, какие элементы можно переносить и где нужно резервировать место.
Согласно описанию Smart Layout на английском, функция не применяется к одному выбранному слою или Section; существующие слои с Auto Layout не изменяются. Для нашей карточки ручная настройка остаётся понятным способом задать конкретные отступы и привязки.
Сочетайте правила на нужном уровне
Начните не с выбора «более современного» инструмента, а с поведения объекта. Текст и повторяющиеся строки требуют правил потока; плавающий значок — устойчивого положения относительно родителя. В карточке профиля эти задачи разделены: Auto Layout управляет содержимым, а привязки — кнопкой закрытия. Когда структура работает на длинной должности и на узкой карточке, её легче повторно использовать и объяснить команде.
