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

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

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

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

• Компоненты
• Адаптивное изменение размера и ограничения
• Отступ для компонентов и групп

Ограничения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подробнее

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

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

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

Что дальше?

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

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