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

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

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

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

Давайте научимся работать с компонентами посредством технологических процессов.

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

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

• Щелкните правой кнопкой мыши на объекте и выберите Создать компонент (CMD+K).
• Нажмите кнопку + в разделе компонентов панели «Ресурсы».
• В приложении XD выберите Объект > Создать компонент.
• Выберите объект и нажмите значок + в разделе Компонент инспектора свойств.

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

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

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

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

• Они являются точной копией главного компонента.
• Они имеют те же свойства, что и оригинал.
• Они неразрывно связаны с главным компонентом. 

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

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

Изменение главного компонента

Для изменения главного компонента можно использовать любую из этих команд:

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

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

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

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

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

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

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

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

Переопределения стиля и оформления

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

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

XD 12.0 предусматривает функцию под названием Адаптивное изменение размера, которая позволяет изменять размеры групп объектов, сохраняя при этом их местоположение и масштабируемость. Вам остается лишь изменить размер группы прямо на холсте, где выполняется дизайн, при этом XD сохранит относительный интервал между объектами. Это неизбежно приводит к ситуации, когда у вас есть подобные элементы многократного использования, отличающиеся размером. Размер компонентов также можно изменять. Они поставляются с предусмотренными встроенными возможностями адаптивного изменения размера. 

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

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

Измененные свойства в экземпляре (например, размер текста на изображении с Джошуа Три) сохраняют все переопределения и не получают обновлений этих свойств от главного компонента.

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

Переопределения соединений

При соединении компонентов следует понимать изложенные далее принципы. 

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

Добавление и удаление элементов в качестве переопределения

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

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

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

Замена вложенного компонента

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

Замена главного компонента на экземпляр заменяет главный компонент во всех экземплярах. 

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

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

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

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

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

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

Ограничения функций

При работе с компонентами ознакомьтесь со следующими ограничениями функций:

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