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

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

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

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

• Системы дизайна в XD
• Компоненты
• Адаптивное изменение размера и ограничения
• Часто задаваемые вопросы

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

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

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

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

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

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

Пример

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавление вложенных компонентов из Creative Cloud Libraries

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

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

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

Подробнее

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

Что дальше?

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

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