Создайте базовый элемент, который вы хотите повторить (например, сочетание эскизов и текста).
- Руководство пользователя Adobe XD
- Введение
- Новые возможности Adobe XD
- Распространенные вопросы
- Создание дизайна, прототипов и совместная работа в Adobe XD
- Управление цветом
- Системные требования
- Основные сведения о рабочей среде
- Изменение языка приложения в Adobe XD
- Доступ к наборам для дизайна пользовательского интерфейса
- Доступность в Adobe XD
- Сочетания клавиш
- Советы и рекомендации
- Дизайн
- Монтажные области, направляющие и слои
- Фигуры, объекты и путь
- Выделение, изменение размера и поворот объектов
- Перемещение, выравнивание, распределение и упорядочивание объектов
- Группирование, блокирование, дублирование, копирование и зеркальное отражение объектов
- Задание обводки, заливки и теней для объектов
- Создание повторяющихся элементов
- Создание перспективных проектов с помощью 3D-преобразований
- Редактирование объектов с помощью логических операций
- Текст и шрифты
- Компоненты и состояния
- Маскировка и эффекты
- Макет
- Видео и анимации Lottie
- Создание прототипа
- Создание интерактивных прототипов
- Анимирование прототипов
- Свойства объекта, которые поддерживаются при автоматическом анимировании
- Создание прототипов с клавиатуры и геймпада
- Создание прототипов с помощью голосовых команд и воспроизведения
- Создание синхронизированных переходов
- Добавление наложений
- Создание голосовых прототипов
- Создание якорных ссылок
- Создание гиперссылок
- Предварительный просмотр проектов и прототипов
- Публикация, экспорт и проверка
- Публикация выбранных монтажных областей
- Предоставление совместного доступа к проектам и прототипам
- Настройка разрешений на доступ к ссылкам
- Работа с прототипами
- Просмотр прототипов
- Работа со спецификациями дизайна
- Предоставление общего доступа к спецификациям дизайна
- Проверка спецификаций дизайна
- Навигация в спецификациях дизайна
- Проверка и комментирование спецификаций дизайна
- Экспорт ресурсов дизайна
- Экспорт и загрузка ресурсов из спецификаций дизайна
- Корпоративный групповой совместный доступ
- Резервное копирование или перенос ресурсов XD
- Системы дизайна
- Системы дизайна с библиотеками Creative Cloud Libraries
- Работа с ресурсами документа в Adobe XD
- Работа с библиотеками Creative Cloud Libraries в Adobe XD
- Переход от связанных ресурсов к библиотекам Creative Cloud Libraries
- Работа с проектными токенами
- Использование ресурсов из библиотек Creative Cloud Libraries
- Облачные документы
- Интеграция и плагины
- Работа с внешними ресурсами
- Работа с ресурсами проекта из Photoshop
- Копирование ресурсов из Photoshop
- Как импортировать или открыть проекты Photoshop
- Работа с ресурсами Illustrator в Adobe XD
- Импортирование и открытие проектов Illustrator
- Копирование векторных объектов из Illustrator в XD
- Плагины для Adobe XD
- Создание плагинов и управление ими
- Интеграция Jira с XD
- Подключаемый модуль Slack для XD
- Подключаемый модуль Zoom для XD
- Публикация работы из XD на Behance
- XD для iOS и Android
- Устранение неполадок
- Выявленные неполадки и исправленные ошибки
- Установка и обновления
- Запуск и сбой
- Облачные документы и библиотеки Creative Cloud Libraries
- Прототип, публикация и обзор
- Импорт, экспорт и работа с другими приложениями
Узнайте, как создавать повторяющиеся элементы в Adobe XD с использованием повторяющейся сетки.
Занимаясь дизайном для веб-сайтов или мобильных приложений, часто необходимо определить повторяющиеся элементы или списки контента. Однако процесс создания этих элементов или их обновления в случае изменения дизайна может отнимать довольно много времени.
Функция повторяющейся сетки изменяет группу элементов на повторяющийся элемент. Вы можете просто потянуть элемент в любом направлении, и сетка повторится. Когда вы изменяете какой-либо стиль элемента, это изменение реплицируется во всех элементах сетки. Например, если вы измените размер изображения в одном из элементов, все изображения в сетке автоматически изменятся.
Если у вас есть текстовый элемент в сетке, реплицируется только стиль текстового элемента, а не его содержимое. Так вы можете быстро оформлять текстовые элементы, не изменяя их содержимое в сеточных элементах.
Вы можете заменить замещающий текст в повторяющейся сетке, перетащив текстовый файл на сетку.
Создание повторяющейся сетки
По сути, повторяющаяся сетка — это особый тип группы. Вы можете создать повторяющуюся сетку, выбрав объект или группу объектов, и преобразовав их в повторяющуюся сетку.
-
-
Выберите элементы, которые необходимо повторить.
-
Преобразуйте выделение в повторяющуюся сетку, нажав соответствующую кнопку в инспекторе свойств или используя сочетание клавиш Cmd + R (Mac) или Ctrl + R (Windows).
На границе элемента появятся крупные маркеры.
-
Чтобы повторить элемент в вертикальной сетке, перетащите маркер в нижнее части элемента. Чтобы повторить элемент в горизонтальной сетке, перетащите маркер в правой части элемента.
-
Чтобы выбрать элементы в сетке для их редактирования, дважды щелкните сетку.
Чтобы разгруппировать элементы сетки и работать с ними отдельно, выделите сетку и в инспекторе свойств выберите «Разгруппировать сетку».
Доступ к элементам компонента повторяющейся сети можно получить, дважды щелкнув внутри группы.
После внесения изменений закройте контекст редактирования, нажав клавишу Esc.
Вы также можете получить доступ к элементам компонента, перейдя к элементу через панель Слой или непосредственно выбрав его.
Настройка отступа между двумя элементами в повторяющейся сетке
Чтобы настроить отступ между двумя элементами в сетке, наведите курсор на промежуток между этими элементами. Когда курсор изменится на двустороннюю стрелку, перетащите его, чтобы увеличить или уменьшить отступ.
Работа с текстом в повторяющейся сетке
Вы можете использовать текст в повторяющейся сетке несколькими способами. Вы можете либо обновить каждый отдельный экземпляр текстового объекта в повторяющейся сетке, либо перетащить предварительно заполненный документ формата TXT на повторяющуюся сетку, чтобы содержимое этого текстового файла автоматически заполнило текстовые объекты в повторяющейся сетке.
Обновление отдельных текстовых элементов в повторяющейся сетке
-
Щелкните текстовый объект в вашей повторяющейся сетке, удерживая нажатой клавишу Cmd (Mac) или Ctrl (Windows), чтобы выбрать его.
-
Чтобы отредактировать текстовый элемент, дважды щелкните его и измените текст.
Изменения, внесенные в содержимое одного текстового объекта не применяются к другим объектам в повторяющейся сетке. Однако любой стиль, примененный к одному текстовому объекту, применяется ко всем остальным текстовым объектам.
Перетаскивание текстового файла с выделением абзацев клавишей возврата каретки в текстовый объект на повторяющейся сетке
Вы можете заменить замещающий текст в повторяющейся сетке, перетащив текстовый файл на сетку.
-
Создайте текстовый файл формата TXT. Вы можете создать его, используя TextEdit (Mac), Notepad (Windows) или любой другой текстовый редактор, сохранив документ в файл с расширением «.txt». Установите в качестве кодировки формат UTF-8. Разделите каждую строку данных, используя клавишу возврата каретки (Enter).
-
Перетащите этот текстовый файл на повторяющуюся сетку.
Повторяющаяся сетка заполняется текстом в той же последовательности, что и в текстовом файле. Если количество сеток превышает количество строк текста, последовательность повторяется.
Работа с изображениями в повторяющейся сетке
Изображения позволяют выстраивать повторяющиеся объекты по шаблону, где заливка объекта изображением повторяется согласно заданному вами шаблону.
Вы можете создать шаблон заливки изображением, перетащив изображения одно за другим на объект или выбрав несколько изображений, а затем перетащив их на объект в повторяющейся сетке.
Замена изображений в повторяющейся сетке
Чтобы заменить изображения в сетке, откройте Finder или Проводник и перейдите в место, где вы сохранили изображения для своего проекта. Выберите все изображения, которые хотите отобразить в сетке, и перетащите их на целевой объект в повторяющейся сетке.
Старые изображения заменятся новыми изображениями, размер которых изменится автоматически.
Создание взаимодействий из повторяющейся сетки
Привязать повторяющуюся сетку к другим монтажным областям в режиме прототипа можно следующими способами:
Привязка всей повторяющейся сетки к одному взаимодействию
-
В режиме «Дизайн» создайте вторую монтажную область в своем файле, используя инструмент «Монтажная область» (A).
-
Переключитесь в режим прототипа, щелкнув соответствующую вкладку или используя сочетание клавиш Ctrl + Tab.
-
Выберите необходимую повторяющуюся сетку на первой монтажной области. На правой стороне объекта в его средней точке появится соединитель со стрелкой.
-
Перетащите этот соединитель к следующей монтажной области. Во всплывающем окне выберите параметры перехода, а затем нажмите клавишу Esc или щелкните за пределами всплывающего окна, чтобы закрыть его.
-
Для предварительного просмотра нажмите кнопку воспроизведения в верхнем правом углу фрейма приложения или используйте сочетание клавиш Cmd + Enter (Mac) или Ctrl + Enter (Windows). Щелкните в любом месте повторяющейся сетки, чтобы воспроизвести взаимодействие.
Привязка одного элемента повторяющейся сетки к взаимодействию
-
Выберите объект в повторяющейся сетке.
-
Перетащите соединитель справа от прямоугольника на монтажную область, которую вы хотите связать. Во всплывающем окне выберите параметры перехода, а затем нажмите клавишу Esc или щелкните за пределами всплывающего окна, чтобы закрыть его.
-
Для предварительного просмотра нажмите кнопку воспроизведения в верхнем правом углу фрейма приложения или используйте сочетание клавиш Cmd + Enter (Mac) или Ctrl + Enter (Windows). Щелкните объект, чтобы проверить его взаимодействие.
Создание группы элементов в повторяющейся сетке и создание взаимодействия из этой группы
Вы также можете создать группу объектов в повторяющейся сетке, а затем создать взаимодействия из этой группы.
-
Выделите объект в повторяющейся сетке, а затем нажмите клавишу Shift и щелкните другие объекты, чтобы добавить его в свою выборку.
-
После выбора объектов нажмите правую кнопку мыши и выберите в контекстном меню пункт Группировать. Вы также можете использовать сочетание клавиш Cmd + G (Mac) или Ctrl + G (Windows) для группировки объектов.
-
Переключитесь в режим прототипа. Перетащите соединитель из группы на монтажную область, которую вы хотите связать.
-
Для предварительного просмотра нажмите кнопку воспроизведения в верхнем правом углу фрейма приложения или используйте сочетание клавиш Cmd + Enter (Mac) или Ctrl + Enter (Windows). Щелкните группу, чтобы проверить ее взаимодействие.
Импорт контента с повторяющей сеткой
Вот видео с примером, как начать работу с повторяющимися сетками.