Работа с компонентами

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

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

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

Компоненты

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

Загрузить XD

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

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

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

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

Попробуйте сами

Загрузить тестовый набор UI

.xd; 80 МБ

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

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

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

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

Инспектор свойств
В инспекторе свойств

Нажмите значок + в разделе Компонент в инспекторе свойств.

Панель ресурсов
На панели ресурсов

Нажмите кнопку + в разделе Компоненты на панели ресурсов.

Контекстное меню
В контекстном меню

Щелкните правой кнопкой мыши по объекту и выберите Создать компонент (CMD/CTRL + K).

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

Создать компоненты
Главный компонент

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

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

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

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

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

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

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

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

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

Основной компонент
Главный компонент

Экземпляр
Экземпляр

Экземпляр с переопределениями
Экземпляр с переопределениями

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

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

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

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

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

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

Контекстное меню
Из контекстного меню на холсте

Щелкните экземпляр правой кнопкой мыши на холсте и выберите Изменить главный компонент.

Панель ресурсов
На панели ресурсов

Щелкните правой кнопкой мыши по компоненту на Панели ресурсов и выберите Редактировать главный компонент.

Инспектор свойств
Из инспектора свойств

Выберите значок карандаша рядом с вариантом Состояние по умолчанию в разделе Компонент.

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

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

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

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

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

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

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

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

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

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

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

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

Переопределения структуры и макета
Типы переопределений: текст, растровое изображение, размер, внешний вид и макет

  • Текст: вы можете редактировать текстовое содержимое в экземпляре компонента, например при изменении метки для кнопки «Компонент». 
  • Растровое изображение: вы можете заменить содержимое растрового изображения в экземпляре компонента, например при замене изображения в компоненте фото профиля.
  • Размер: вы можете изменить размер экземпляра при применении отступов и адаптивного изменения размера, например при изменении размера текстовых полей в форме.
  • Внешний вид: вы можете изменить свойства внешнего вида, такие как цвет заливки, границы и размытие, например при изменении цвета фона для уведомлений.
  • Макет и структура: вы можете добавить, удалить и переместить объекты внутри экземпляра компонента, например при изменении выпадающего списка меню добавлением в него записей.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В режиме Оформление нажмите кнопку + рядом с состоянием по умолчанию главного компонента в инспекторе свойств и выберите Новое состояние.

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

Новое состояние
Новое состояние

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

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

В режиме Оформление нажмите кнопку + рядом с состоянием по умолчанию главного компонента в инспекторе свойств и выберите Состояние наведения.

По умолчанию состояние наведения имеет встроенные интерактивные возможности. 

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

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

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

В режиме Дизайн нажмите кнопку + рядом с состоянием по умолчанию основного компонента в инспекторе свойств и выберите Состояние переключения.

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

Состояние переключения
Состояние переключения

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

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

Переключение состояний

Переключение состояний
Переключение состояний

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

Переименование состояний

Переименование состояний
Переименование состояний

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

Удаление состояний

Удаление состояний
Удаление состояний

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

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

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

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

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

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

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

  1. Откройте вкладку «Прототип».
  2. Выберите состояние компонента, из которого нужно создать взаимодействие. 
  3. Для добавления взаимодействия нажмите значок > на компоненте состояния или + в разделе «Взаимодействие» Инспектора свойств.
  4. В качестве триггера выберите Нажатие (для щелчков), Парение (для действий при наведении курсора мыши), Клавиши и геймпад (варианты использования для навигации и специальных возможностей) или Голос (варианты использования для навигации и специальных возможностей).
  5. Выберите тип действия (например, «Автоматическое анимирование» или «Переход»).
  6. Выберите состояние в качестве назначения.
  7. Перейдите в окно предварительного просмотра и протестируйте интерактивные возможности вашего компонента.
Создание взаимодействия путем касания
Связывание состояний компонента для создания взаимодействия нажатия

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

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

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

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

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

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

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

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

Вид 

Показать компоненты в ресурсах
Показать компоненты на панели ресурсов

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

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

Контекстное меню на панели ресурсов
Контекстное меню на панели ресурсов

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

Сброс до основного состояния

Сбросить до основного состояния
Сбросить до основного состояния

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

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

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

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

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

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

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

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

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

Подробнее

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

Продолжительность: 9 минут

Что дальше?

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

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

Спросите сообщество

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

Логотип Adobe

Вход в учетную запись