Хотите задать вопрос или поделиться идеей? Присоединяйтесь к сообществу Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы!
Узнайте, как использовать подборки в Adobe XD для создания динамических макетов, реагирующих на изменение контента.
Подборки в Adobe XD позволяют задавать определенные фиксированные промежутки между объектами в группе. Когда вы изменяете размер, порядок или структуру объектов в подборке, XD автоматически сохраняет заданное пространство между объектами.
Подборки в сочетании с отступами и адаптивными размерами — это мощная комбинация функций, повышающих контроль и скорость проектирования. Использование подборок в компонентах позволяет легко автоматизировать создание макета и редактирование кнопок, меню, раскрывающихся меню, карточных макетов.
Убедитесь, что вы знакомы с основами создания макетов с учетом содержимого:
Прежде чем приступать к работе с подборками, учтите следующие ограничения:
XD автоматически определяет ориентацию подборки на основе структуры вашей группы или компонента. Однако если нужно изменить ориентацию подборки, выберите По вертикали или По горизонтали внутри области Подборка в инспекторе свойств.
При работе с компонентами управление ориентацией подборки доступно только в главном компоненте.
При включении подборки XD выполняет следующие действия.
Создав элементы подборки, используйте любой из следующих вариантов для их редактирования:
Переместите элементы или воспользуйтесь функцией «Выравнивание» Измените размер объектов и текста в подборке
Перемещайте элементы свободно или используйте инструменты Выравнивания для элементов подборки по направлению от нее.
Выберите объект, размер которого вы хотите изменить, и другие объекты в подборке будут автоматически перемещены, чтобы сохранить относительное расстояние между ними. Используйте функцию Автовысота текста для динамической регулировки высоты текста в подборке без изменения его ширины.
Редактируйте расстояния между объектами Регулируйте расстояния внутри подборки
Выберите объект внутри группы или компонента, организованных в подборку, и наведите курсор на промежутки. Розовая подсветка показывает пространство между объектами в подборке. Нажмите и перетащите выделенный объект, чтобы отредактировать пространство между объектами.
Выберите всю подборку и удерживайте клавишу S на клавиатуре, чтобы настроить промежутки внутри подборки. Клавишу S можно также использовать для изменения отступов.
Выравнивание расстояний в подборке Дублирование элементов в подборке
Перетащите и нажмите Shift или Shift + S (если выделение находится за пределами подборки).
С помощью клавиш Cmd + D создайте дубликат элемента внутри подборки и расположите его под выбранным элементом.
Создав и изменив элементы подборки, используйте любой из следующих вариантов, чтобы изменить их порядок:
При создании подборки XD определяет фон автоматически. Однако при включении подборок для группы или компонента фоном становится слой группы, расположенный ниже всех в подборке и перекрывающийся с содержимым группы или компонента.
XD не поддерживает экземпляры компонентов в качестве фона.
Чтобы создать и изменить фон подборки, выполните следующие действия.
Вы узнали, как создавать подборки и работать с ними, и вот еще несколько дополнительных советов по использованию подборок.
Можно добиться четкого и удобного редактирования макетов за счет вложенных подборок, например горизонтальной подборки, вложенной в вертикальную. Глубина вложенности не ограничена. Посмотрите эту анимированную иллюстрацию, чтобы понять принцип работы вложенных подборок.
Можно использовать подборки и отступы в компонентах для определения повторно используемых элементов пользовательского интерфейса в контексте систем дизайна. При работе с компонентами, которым требуется обновление подписи или строки, использование подборок позволяет макету компонента реагировать на изменения и автоматизирует ручную компоновку. Например, если у вас есть несколько экземпляров с переопределением контента, используйте подборки для глобального редактирования промежутков и управления ими. Вам больше не нужно редактировать каждую карту вручную!
Подборки, применяемые к главным компонентам, автоматически применяются ко всем их экземплярам и состояниям. Также можно создавать компонент, связанный с подборками, и изменять эти подборки.
«Подборки в сочетании с отступами и адаптивными размерами — это мощная комбинация функций при работе в системе проектирования. Когда подборки применяются к главному компоненту, любой экземпляр данного компонента будет соответствовать структуре этой подборки», — Дани Бомонт, главный менеджер продукта, XD.
Подробнее о начале работы с подборками в компонентах и группах см. в этом видео.
Время просмотра: 1 минута.
Мы познакомили вас с тем, как использовать подборки для задания определенных пространств между элементами. Теперь рассмотрим, как создавать интерактивные прототипы и открывать к ним доступ дизайнерам и другим участникам проекта, чтобы получать от них отзывы.
Хотите задать вопрос или поделиться идеей? Присоединяйтесь к сообществу Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы!
Вход в учетную запись