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

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

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

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

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

Чтобы создать компонент, выберите Объект > Создать компонент. Вы также можете выбрать объект или группу объектов и использовать любой из следующих вариантов:

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

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

• XD не имеет специального окна для редактирования главных компонентов. Когда вы редактируете главный компонент, вы редактируете его на холсте.
• Если вы удалите главный компонент с холста, вы все равно сможете выбрать экземпляр и получить доступ к опции Редактировать главный компонент в контекстном меню. XD сгенерирует главный компонент на холсте.
• Если вы хотите отменить связь с одним экземпляром компонента, используйте опцию Разгруппировать компонент в контекстном меню. Однако если вы хотите отменить связь со всеми экземплярами на холсте, используйте опцию удаления на панели «Ресурсы».
• Чтобы убедиться, что вы редактируете главный компонент, обращайте внимание на зеленый закрашенный ромб в верхнем левом углу ограничительной рамки.

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

Вот несколько рекомендаций по работе с компонентами.

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

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

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

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

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

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

• Хотите поэкспериментировать с вариацией компонента? Выберите в контекстном меню Разгруппировать компонент, чтобы отсоединить экземпляр от главного компонента.
• Вы пытаетесь найти:
  • Все экземпляры компонента на холсте? Щелкните правой кнопкой мыши по компоненту на Панели ресурсов и выберите Выделить на холсте.
  • Главный компонент при работе с экземпляром? Щелкните по экземпляру правой кнопкой мыши и выберите Редактировать главный компонент.

Редактирование главного компонента

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

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

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

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

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

Вот рекомендации по редактированию главных компонентов.

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

Переопределение экземпляра компонента

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

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

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

Типы переопределений

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

Переопределение размера

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

Как изменение размера отражается на главном компоненте или его экземплярах?

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

Подобно адаптивному изменению размера, XD воссоздает размещение элементов на большем или меньшем холсте при изменении их размера.

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

Переопределения внешнего вида

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

Переопределения макета и структуры

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

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

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

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

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

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

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

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

Добавление состояний в компоненты

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

Например, вы можете создать компонент «Кнопка» с разными вариантами, такими как основной и дополнительный. Используя состояния, вы можете создавать варианты, используя переопределения в главном компоненте. 

При работе с состояниями и компонентами помните о следующих указателях.

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

Добавление состояний

После создания компонента в инспекторе свойств появится компонент с параметром Состояние по умолчанию. Теперь можно добавить три типа состояния для компонентов: Новое, Наведение и Переключение.

Создайте новое состояние

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

Создать состояние наведения

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

Создание состояния ПЕРЕКЛЮЧЕНИЯ

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

Просмотр и управление состояниями

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

Переопределения в состояниях

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

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

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

Добавление интерактивности

Можно использовать триггеры Нажатие, Наведение, Клавиши и геймпад и Голос для связывания взаимодействий между состояниями компонентов в режиме прототипа. Связывание взаимодействий между состояниями компонентов аналогично добавлению взаимодействий между монтажными областями. Основное различие заключается в том, что при создании взаимодействий между состояниями компонентов вы выбираете в качестве назначения состояние, а не монтажную область.

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

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

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

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

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

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

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

Управление компонентами

Добавление интерактивности компонентам

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

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

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

• Невозможно предотвратить распространение взаимодействий от главного компонента к экземплярам.
• Невозможно провести различие между взаимодействием, добавленным к экземпляру (как переопределение), и взаимодействием, которое тот унаследовал от главного компонента.
• Для состояний поддерживается ограниченный набор действий и триггеров. 

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

Вот рекомендации по добавлению интерактивности к компоненту:

• При копировании, вставке или совместном использовании компонентов между документами XD не сохраняет взаимодействия компонента с монтажной областью, поскольку мы не можем гарантировать, что монтажные области места назначения всегда будут доступны. Тем не менее XD сохраняет взаимодействия между состояниями для каждого компонента. Это означает, что для компонента, который имеет состояние наведения и триггер нажатия для монтажной области, при его вставке в другой документ XD сохраняет взаимодействие состояния наведения и отменяет триггер нажатия для монтажной области. 
• Выберите, когда вы добавляете взаимодействие с главным компонентом, а не с экземпляром.
• Если все экземпляры имеют одно и то же место назначения, то подключить главный компонент более эффективно, ведь он автоматически распространяется на все из них. Например, кнопка «Домой», которая ведет на главный экран.
• Если все экземпляры или некоторые из них имеют разные места назначения, проще подключать отдельные экземпляры, а не главный компонент. Например, основная кнопка, которая используется в проекте и имеет разные места назначения в зависимости от ее использования и контекста.

Подробнее

Чтобы узнать больше о работе с компонентами, посмотрите это видео.

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

Что дальше?

Итак, вы узнали о том, как работать с компонентами в XD. Сделайте следующий шаг — узнайте, как использовать вложенные компоненты в XD.

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