openpencil/packages/docs/ru/user-guide/components.md

---
title: Компоненты
description: Переиспользуемые компоненты, экземпляры, наборы вариантов, переопределения, синхронизация и библиотеки в OpenPencil.
---

# Компоненты

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

## Ресурсы

Откройте вкладку **Assets** на левой панели, чтобы увидеть локальные компоненты и подключённые библиотеки. Доступны представление сеткой, представление списком и поиск по имени.

Добавить ресурс на холст можно щелчком, клавишей <kbd>Enter</kbd> или перетаскиванием. Локальные ресурсы сгруппированы по исходным страницам. Ресурсы библиотеки остаются доступны без сети, если соответствующая редакция уже была загружена.

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

Выделите фрейм или группу и нажмите <kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd>. В Windows и Linux используйте <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd>.

Если выделено несколько объектов, OpenPencil помещает их в новый компонент с границами по общей ограничивающей рамке.

Над компонентом отображается фиолетовая подпись со значком ромба.

## Наборы компонентов и варианты

Выделите не менее двух компонентов и нажмите <kbd>⇧</kbd><kbd>⌘</kbd><kbd>K</kbd> или <kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>K</kbd>. 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 пикселей правее исходного компонента и будет выглядеть так же.

Эта команда находится только в контекстном меню; отдельной кнопки на панели инструментов нет.

## Отсоединение экземпляра

Выделите экземпляр и нажмите <kbd>⌥</kbd><kbd>⌘</kbd><kbd>B</kbd> или <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>B</kbd>. Экземпляр превратится в обычный фрейм и потеряет связь с основным компонентом. Все переопределения сохранятся как обычные значения.

## Переход к основному компоненту

Щёлкните экземпляр правой кнопкой и выберите **Go to main component**. OpenPencil перейдёт к исходному компоненту, при необходимости переключит страницу и выделит его.

## Синхронизация

После изменения компонента связанные экземпляры обновляются автоматически. Синхронизируются:

- ширина и высота;
- заливки, обводки и эффекты;
- прозрачность и радиусы углов;
- параметры компоновки;
- обрезка содержимого.

Синхронизация выполняется после изменения, перемещения или изменения размера дочерних объектов компонента.

## Переопределения

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

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

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

## Выбор дочерних объектов

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

## Обозначения на холсте

| Элемент | Вид |
|---------|-----|
| Компонент | Постоянная фиолетовая подпись со значком ромба |
| Экземпляр | Постоянная фиолетовая подпись со значком ромба |
| Набор компонентов | Пунктирная фиолетовая рамка |

## Сочетания клавиш

| Действие | macOS | Windows / Linux |
|----------|-------|-----------------|
| Создать компонент | <kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd> | <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd> |
| Создать набор компонентов | <kbd>⇧</kbd><kbd>⌘</kbd><kbd>K</kbd> | <kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>K</kbd> |
| Отсоединить экземпляр | <kbd>⌥</kbd><kbd>⌘</kbd><kbd>B</kbd> | <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>B</kbd> |

## Советы

- Изменение текста внутри экземпляра создаёт переопределение, поэтому последующее изменение компонента не перезапишет этот текст.
- Наборы компонентов подходят для вариантов с несколькими параметрами, например размером, состоянием и темой.
- Публикуйте ресурсы из исходного документа: опубликованные определения намеренно доступны использующим документам только для чтения.
- Перед принятием редакции проверьте обновление, особенно если в новой версии удалено точное сочетание вариантов.