Руководство пользователя Отмена

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

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

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

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

1
Использование отступов для создания макета с учетом содержимого

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

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

Работа с отступами

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

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

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

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

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

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

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

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

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

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

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

Примеры

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

  • Хотите изменить текст кнопки? Введите необходимый текст и размер кнопки будет изменен.
  • Хотите добавить больше строк в раскрывающийся список? Используйте повторяющуюся сетку, чтобы создать больше строк в группе, и вы заметите, что размер фона изменяется вместе с повторяющейся сеткой.
Повторяющиеся сетки и отступы
Использование повторяющейся сетки с отступами

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

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

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

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

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

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

Ограничения

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

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

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

1
Образцы файлов

  1. Скачайте и откройте в XD образец файла кнопки.
  2. Выберите объект и его фон.
  3. Для управления фоном и содержимым в пределах кнопки включите отступы в инспекторе свойств.
  4. В зависимости от ваших требований к дизайну выберите и примените необходимые вам параметры отступов.

Подробнее

Что дальше?

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

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

Спросите сообщество

Если вы хотите задать вопрос или поделиться интересной идеей, вступайте в сообщество Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы.

Получайте помощь быстрее и проще

Новый пользователь?