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

Работа с вложенными компонентами в Adobe XD

Узнайте, как работать с вложенными компонентами в различных системах дизайна в Adobe XD.

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

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

Компоненты
Работа с вложенными компонентами в XD

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

Загрузить XD

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

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

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

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

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

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

Термины, связанные с компонентами

Для начала давайте узнаем, что означают некоторые важные термины, имеющие отношение к вложенным компонентам:

  • Основной компонент: компонент, определяющий и контролирующий все свойства компонента.
  • Экземпляр компонента — копия основного компонента, наследующая внесенные в него изменения.
  • Вложенный компонент — компонент, который находится внутри другого компонента.
  • Внешний компонент — компонент, внутри которого есть другой компонент.

Создание вложенного компонента

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

Для создания вложенных компонентов можно использовать любой из подходов, описанных ниже.

Подход А: скопировать/вставить экземпляр компонента в группу и преобразовать его в компонент.

  1. Создайте главный компонент «Кнопка».
  2. Скопируйте и вставьте экземпляр компонента «Кнопка» в группу.
  3. Выберите группу и преобразуйте ее в компонент. 

Подход Б: скопировать/вставить экземпляр компонента в существующий компонент.

Вставьте экземпляр компонента «Кнопка» внутри группы

  1. Создайте главный компонент «Кнопка».
  2. Скопируйте и вставьте экземпляр компонента «Кнопка» в другой компонент.

Подход В: выберите часть компонента и преобразуйте ее в компонент.

  1. Создайте главный компонент диалогового окна.
  2. Выберите кнопку внутри компонента.
  3. Преобразуйте кнопку в компонент.

Пример

Давайте используем Подход А для создания компонента диалогового окна.

Вставка экземпляра кнопки

Вставить экземпляр

Вставьте экземпляр компонента «Кнопка» внутри группы.

Преобразование в компонент

Создать компонент

Выберите группу и сделайте из нее компонент.

Создание компонента «Кнопка»

Создайте компонент «Кнопка»

Создайте компонент «Кнопка» для диалогового окна.

Создание диалогового контейнера

Диалоговый контейнер

Создайте диалоговый контейнер с текстом и другими объектами внутри в качестве группы.

Рекомендации

Вот несколько рекомендаций по созданию вложенных компонентов:

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

Синхронизация вложенных компонентов

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

Рассмотрим, как это работает. 

Пример 1. Кнопка внутри контейнера, которая получает изменения от основной кнопки.

  1. Создайте кнопку, выступающую в качестве первого главного компонента.
  2. Вложите экземпляр кнопки в меню переключения.
  3. Вложите экземпляр меню переключения в контейнер.

Любые изменения, внесенные в компонент основной кнопки, распространяются на все кнопки, вложенные в раскрывающееся меню и контейнер.

Вставьте экземпляр компонента «Кнопка» внутри группы

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

Рассмотрим несколько сценариев.

Сценарий 1

Сценарий 1

Измените цвет кнопки, вложенной в главное раскрывающееся меню, на синий. 

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

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

Сценарий 2

Сценарий 2

Измените цвет кнопки, вложенной в главный контейнер, на розовый. Кнопка внутри экземпляра контейнера также станет розовой.

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

Сценарий 3

Сценарий 3

Измените цвет кнопки, вложенной в экземпляр контейнера, на зеленый.

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

Сценарий 4

Сценарий 4

Продолжая работу со сценария 3, измените цвет кнопки, вложенной в главный контейнер, на фиолетовый. 

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

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

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

Рекомендации

Вот несколько рекомендаций по работе с переопределениями в экземплярах вложенных компонентов.

  • Чтобы создать вариант компонента для повторного использования, создайте состояние в главном компоненте, а не экземпляр с переопределениями.
  • При переопределении экземпляров убедитесь, что вы переопределяете свойство, которое не требует обновлений от главного компонента. Например, в компоненте «Кнопка» переопределение текста обеспечивает возможность иметь другое название кнопки, однако размер и цвет по-прежнему синхронизируются с главным компонентом.

Библиотеки Creative Cloud Libraries помогают распространять стили и компоненты системы дизайна для их последующего использования в других документах. Чтобы создать систему дизайна и делиться ею через библиотеки Creative Cloud Libraries, выполните упорядочивание ресурсов системы дизайна путем добавления цветов, стилей символов и компонентов на панель «Ресурсы документа» и опубликуйте их в виде библиотеки; это позволит использовать их во всех окнах XD и других приложениях Creative Cloud. Дополнительные сведения об использовании Creative Cloud Libraries см. в разделе Работа с Creative Cloud Libraries в XD.

Часто задаваемые вопросы

В предыдущих версиях XD изменения, внесенные во вложенный компонент, не обновлялись в экземплярах внешнего компонента. Для удобства работы откройте свои документы в последней версии приложения XD.

Подробнее

Чтобы узнать больше о вложенных компонентах в XD, посмотрите это видео.
Время просмотра: 10 минут

Что дальше?

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

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

обратитесь за помощью в сообщество

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

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

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