--- title: Компоненты description: Переиспользуемые компоненты, экземпляры, наборы вариантов, переопределения, синхронизация и библиотеки в OpenPencil. --- # Компоненты Компонент — это переиспользуемый элемент дизайна. После изменения основного компонента все связанные экземпляры обновляются автоматически. ## Ресурсы Откройте вкладку **Assets** на левой панели, чтобы увидеть локальные компоненты и подключённые библиотеки. Доступны представление сеткой, представление списком и поиск по имени. Добавить ресурс на холст можно щелчком, клавишей Enter или перетаскиванием. Локальные ресурсы сгруппированы по исходным страницам. Ресурсы библиотеки остаются доступны без сети, если соответствующая редакция уже была загружена. ## Создание компонента Выделите фрейм или группу и нажмите ⌥⌘K. В Windows и Linux используйте Ctrl + Alt + K. Если выделено несколько объектов, OpenPencil помещает их в новый компонент с границами по общей ограничивающей рамке. Над компонентом отображается фиолетовая подпись со значком ромба. ## Наборы компонентов и варианты Выделите не менее двух компонентов и нажмите ⇧⌘K или Shift + Ctrl + K. OpenPencil объединит их в набор компонентов с пунктирной фиолетовой рамкой и внутренним отступом 40 пикселей. Каждый компонент в наборе может задавать значения нескольких параметров варианта, например `Size=Small`, `State=Hover` и `Theme=Dark`. Создавать все возможные сочетания необязательно. Верхний левый вариант используется по умолчанию и служит заменой, если после обновления точное сочетание отсутствует. На панели свойств можно добавлять, переименовывать, переставлять и удалять параметры вариантов и их значения. Одинаковые сочетания значений создать нельзя. ## Свойства компонентов Компоненты и наборы компонентов поддерживают переиспользуемые свойства трёх типов: - текст; - логическая видимость; - замена экземпляра. Свяжите свойство с полем дочернего объекта. После этого значение можно менять в экземпляре без отсоединения. Определения свойств и назначенные значения сохраняются в `.fig`. ## Библиотеки компонентов Библиотека публикует компоненты как неизменяемые редакции. У каждого опубликованного ресурса есть постоянные идентификаторы библиотеки, ресурса и редакции. Поэтому разные экземпляры могут оставаться на разных редакциях до явного обновления. ### Публикация 1. Создайте компоненты и наборы компонентов, которыми хотите поделиться. 2. Откройте **Assets → Manage libraries**. 3. Выберите **Publish library**. 4. Укажите постоянный идентификатор библиотеки и отображаемое имя. После первой публикации идентификатор изменить нельзя. 5. При необходимости найдите нужные изменения и добавьте описание редакции. 6. Отметьте добавленные, изменённые, переименованные или удалённые ресурсы, которые нужно включить. 7. Проверьте место публикации и нажмите **Publish library**. При следующих публикациях неотмеченные изменения останутся в ожидании. Неизменённые ресурсы сохранят прежние определения. Удалённые определения останутся доступны, пока документы ссылаются на их исторические редакции. ### Подключение и вставка ресурсов Откройте **Assets → Manage libraries** и включите библиотеку. Её компоненты появятся рядом с локальными. Добавьте ресурс щелчком, с клавиатуры или перетаскиванием. Опубликованные определения доступны в использующем документе только для чтения. Чтобы изменить определение, отредактируйте исходный документ и опубликуйте новую редакцию. Связанные экземпляры по-прежнему можно настраивать через свойства компонентов и переопределения. ### Проверка и принятие обновлений Откройте **Manage libraries → Updates**, чтобы найти новые редакции. Сам поиск ничего в документе не меняет. Можно сравнить текущий и обновлённый экземпляры, перейти между затронутыми экземплярами, а затем обновить: - выбранный экземпляр; - все экземпляры одного ресурса; - экземпляры на текущей странице; - экземпляры на всех страницах. OpenPencil сохраняет совместимые назначения текста, видимости и замены экземпляра. Если точного варианта больше нет, до подтверждения обновления будет показана верхняя левая замена. Применённое обновление можно отменить. ### Локальная работа, хранилище и режим без сети Библиотека может храниться в локальном каталоге браузера или у настроенного поставщика хранилища. При удалённой публикации используются неизменяемые объекты редакций и условно обновляемый указатель на последнюю версию, поэтому два автора не могут незаметно перезаписать изменения друг друга. Загруженные редакции сохраняются локально. Без сети документ продолжает отображать их определения и позволяет вставлять соответствующие ресурсы. Ошибки проверки целостности показываются пользователю, а не скрываются данными из кеша. ### Сохранение использующего документа Подключения к библиотекам и материализованные определения сохраняются внутри `.fig`. После повторного открытия документа связанные экземпляры и идентификаторы редакций остаются на месте, даже если удалённая библиотека недоступна. ## Создание экземпляра Щёлкните компонент правой кнопкой и выберите **Create instance**. Новый экземпляр появится на 40 пикселей правее исходного компонента и будет выглядеть так же. Эта команда находится только в контекстном меню; отдельной кнопки на панели инструментов нет. ## Отсоединение экземпляра Выделите экземпляр и нажмите ⌥⌘B или Ctrl + Alt + B. Экземпляр превратится в обычный фрейм и потеряет связь с основным компонентом. Все переопределения сохранятся как обычные значения. ## Переход к основному компоненту Щёлкните экземпляр правой кнопкой и выберите **Go to main component**. OpenPencil перейдёт к исходному компоненту, при необходимости переключит страницу и выделит его. ## Синхронизация После изменения компонента связанные экземпляры обновляются автоматически. Синхронизируются: - ширина и высота; - заливки, обводки и эффекты; - прозрачность и радиусы углов; - параметры компоновки; - обрезка содержимого. Синхронизация выполняется после изменения, перемещения или изменения размера дочерних объектов компонента. ## Переопределения Экземпляр может переопределять отдельные свойства, не разрывая связь с компонентом. При следующей синхронизации переопределённое свойство сохраняется, а остальные продолжают обновляться из основного компонента. Для дочерних объектов можно переопределить имя, текст, размер, начертание и семейство шрифта, а также визуальные свойства и параметры компоновки: заливки, обводки, эффекты, прозрачность, радиусы углов и размеры. Если добавить дочерний объект в компонент, его копия автоматически появится во всех существующих экземплярах. Порядок дочерних объектов соответствует основному компоненту. ## Выбор дочерних объектов Компоненты и экземпляры ведут себя как единые контейнеры: первый щелчок по дочернему объекту выделяет контейнер. Дважды щёлкните компонент или экземпляр, чтобы войти внутрь и выбрать его содержимое. ## Обозначения на холсте | Элемент | Вид | |---------|-----| | Компонент | Постоянная фиолетовая подпись со значком ромба | | Экземпляр | Постоянная фиолетовая подпись со значком ромба | | Набор компонентов | Пунктирная фиолетовая рамка | ## Сочетания клавиш | Действие | macOS | Windows / Linux | |----------|-------|-----------------| | Создать компонент | ⌥⌘K | Ctrl + Alt + K | | Создать набор компонентов | ⇧⌘K | Shift + Ctrl + K | | Отсоединить экземпляр | ⌥⌘B | Ctrl + Alt + B | ## Советы - Изменение текста внутри экземпляра создаёт переопределение, поэтому последующее изменение компонента не перезапишет этот текст. - Наборы компонентов подходят для вариантов с несколькими параметрами, например размером, состоянием и темой. - Публикуйте ресурсы из исходного документа: опубликованные определения намеренно доступны использующим документам только для чтения. - Перед принятием редакции проверьте обновление, особенно если в новой версии удалено точное сочетание вариантов.