Создание динамичных проектов с подборками

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

Подборки в Adobe XD позволяют задавать определенные фиксированные промежутки между объектами в группе. Когда вы изменяете размер, порядок или структуру объектов в подборке, XD автоматически сохраняет заданное пространство между объектами. 

Чего можно добиться, используя подборки

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

Еще не знакомы с XD?

Установить XD

Научитесь основам работы с приложением

Уже пользуетесь XD?

Обновить приложение

Ознакомьтесь с новыми возможностями

Прежде чем продолжить

Убедитесь, что вы знакомы с основами создания макетов с учетом содержимого:

Ограничения

Прежде чем приступать к работе с подборками, учтите следующие ограничения:

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

Включение подборок

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

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

При работе с компонентами управление ориентацией подборки доступно только в главном компоненте.

Что происходит при включении подборок?

При включении подборки XD выполняет следующие действия.

  • Автоматически определяет фон (группу или фигуру, расположенную внизу панели «Слои») и выполняет наложение на холст со всеми объектами в группе.
  • Включает и вычисляет значения отступов.
  • Определяет ориентацию подборки: по вертикали или по горизонтали.
  • Группирует перекрывающиеся для сохранения макета.
  • Определяет и исправляет значения интервалов между элементами.
применение подборок

Изменение элементов подборки

Создав элементы подборки, используйте любой из следующих вариантов для их редактирования:

Переместите элементы или воспользуйтесь функцией «Выравнивание»                                                      Измените размер объектов и текста в подборке

выравнивание подборок

Перемещайте элементы свободно или используйте инструменты Выравнивания для элементов подборки по направлению от нее.

изменить размер

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

Редактируйте расстояния между объектами                                                                   Регулируйте расстояния внутри подборки

Редактирование расстояния между объектами

Выберите объект внутри группы или компонента, организованных в подборку, и наведите курсор на промежутки. Розовая подсветка показывает пространство между объектами в подборке. Нажмите и перетащите выделенный объект, чтобы отредактировать пространство между объектами.

Регулировка расстояния внутри подборки.

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

Выравнивание расстояний в подборке                                                                        Дублирование элементов в подборке

Перетащите и нажмите Shift или Shift + S (если выделение находится за пределами подборки).

С помощью клавиш Cmd + D создайте дубликат элемента внутри подборки и расположите его под выбранным элементом.

Переупорядочить элементы подборки

Создав и изменив элементы подборки, используйте любой из следующих вариантов, чтобы изменить их порядок:

  • Выберите элементы подборки и перетащите их вдоль направления подборки на холсте.
  • Используйте клавиши Cmd +] и Cmd + [ для перемещения вверх и вниз в подборке и Cmd + Shift +] и Cmd + Shift + [, чтобы сделать выделенный элемент первым или последним в подборке. Эти команды также доступны в контекстном меню (по щелчку правой кнопкой мыши).
  • Новое положение элемента подборки выделяется розовыми прямоугольниками. Чтобы сохранить выравнивание при изменении порядка элементов, нажмите Shift, чтобы заблокировать элементы подборки в направлении перетаскивания и сохранить исходное выравнивание.
Переупорядочить элементы подборки

Создать или изменить фон подборки

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

XD не поддерживает экземпляры компонентов в качестве фона.

Чтобы создать и изменить фон подборки, выполните следующие действия.

create_modify_stack_baground

  1. Создайте фигуру или группу внутри подборки, которые будут действовать как ее фон. Можно также создать фон вне подборки и скопировать его в соответствующую группу.
  2. В нужной подборке выберите элемент, который хотите использовать в качестве фона.
  3. Щелкните правой кнопкой мыши и выберите Создать фон или Заменить фон. Выбранный элемент перемещается в конец подборки и масштабируется в соответствии со значениями размера подборки и отступов.

Больше действий с элементами подборки

Вы узнали, как создавать подборки и работать с ними, и вот еще несколько дополнительных советов по использованию подборок.

Вложения и перестановка подборок

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

подборки и повторяющиеся сетки

Подборки в компонентах и состояниях

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

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

Как переопределение ведет себя с подборками?

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

Подробнее

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

Подробнее о начале работы с подборками в компонентах и группах см. в этом видео.

Время просмотра: 1 минута.

Что дальше?

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

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

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

Хотите задать вопрос или поделиться идеей? Присоединяйтесь к сообществу Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы!

Логотип Adobe

Вход в учетную запись