Установка фиксированного отступа для компонентов и групп

Adobe XD позволяет устанавливать фиксированные отступы для групп или компонентов с состояниями и автоматически масштабировать фон при изменении контента.

Это снижает наложение элементов дизайна и когнитивное переполнение при создании кнопок, раскрывающихся списков, всплывающих подсказок или модальных диалоговых окон.

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

Попрощайтесь с ручным изменением размера и скажите «привет» гибкости и более быстрым технологическим процессам!

Отступы — это расстояние от визуального фона до края контента с каждой стороны, которое определяется растянутым фоном. 

XD автоматически определяет фон, когда:

• Любая фигура, группа или группа типа Boolean располагается в самом нижнем слое группы или компонента и 
• Другие элементы перекрывают этот самый нижний слой. 

Для точного управления размером фона объекта за счет отступов выполните следующие действия. 

1. В инспекторе свойств нажмите переключатель, чтобы включить отступы.
2. В зависимости от ваших требований к дизайну установите значения для типа установки отступов Одинаковые отступы для всех направлений или Различные отступы для разных направлений.

Вы можете видеть параметр отступа, только если элемент фона структуры слоя расположен последним в группе и перекрывает другие объекты.

Когда вы перемещаете контент или изменяете его размер в группе или компоненте, XD определяет фон, вычисляет значения отступов и обновляет их в инспектор свойств.

Обновленные значения сохраняются в группе или компоненте, а размер фон автоматически изменяется. Когда у группы или компонента нет визуального фона, для отступа устанавливается значение «0».

Хотите изменить значения отступов?

выполните одно из следующих действий.

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

Примеры

Отступы в компонентах по состояниям

Компоненты наследуют поведение с отступами от своего главного компонента. Это означает, что значения отступов, установленные в главном компоненте, синхронизируются между экземплярами или состояниями.

Переопределение отступов происходит в следующих случаях.

• Изменение значения отступов в экземпляре компонента и в главном компоненте или
• Значения отступов экземпляра не обновляются.

Что необходимо учитывать

• Когда вы включаете отступы:
  • Все экземпляры компонентов и состояний автоматически наследуют свойства, установленные в главном компоненте или состоянии по умолчанию, без возможности их локального переопределения.
  • Параметр На задний план на холсте помещает любой элемент группы или компонент прямо над фоном группы.
• Если фон является группой типа Boolean, маской или компонентом, то для изменения размера объекта применяются правила адаптивного изменения размера.
  

• Если вы удалите фон, XD оценит группу и автоматически задействует в качестве фона следующий потенциальный слой, обновив значения отступов. Если фоновый слов отсутствует, значение отступа сбрасывается до «0».

Ограничения

• Компоненты и точечный текст не могут выступать в роли фона для группы или компонента.
  

• Отступы не анимируются в режиме прототипа при использовании состояния наведения или касания в пределах содержимого проекта.

Примеры и образцы файлов

Хотите изменить текст кнопки, чтобы он не выходил за пределы кнопки?

Подробнее

Что дальше?

Теперь вы знаете все необходимое для начала работы с отступами. Сделайте шаг вперед и узнайте, как создавать интерактивные дизайны и прототипы и как предоставить к ним общий доступ участникам проекта, таким как разработчики и коллеги-дизайнеры.

Есть вопрос или идея?