openpencil/packages/docs/ru/user-guide/components.md
Danila Poyarkov c3412a44fc
docs: polish localized documentation
* docs: polish localized documentation

- Rewrite Russian documentation for natural terminology and current source parity\n- Continue the Polish editorial pass across guides and SDK references\n- Refresh shared localized SDK API data imports

* docs(pl): complete editorial pass

- Rewrite the remaining advanced Vue SDK references\n- Refresh the Figma compatibility matrix against the canonical source\n- Align terminology and behavior across every Polish documentation page

* docs(de): complete editorial pass

- Rewrite German guides, automation docs, and Vue SDK references\n- Restore current AI, export, component, and variable behavior\n- Refresh the Penpot comparison and Figma compatibility matrix

* docs(es): complete editorial pass

- Rewrite Spanish guides, automation docs, and Vue SDK references\n- Restore current AI, export, component, and variable behavior\n- Refresh the Penpot comparison and Figma compatibility matrix

* docs(fr): complete editorial pass

- Rewrite French guides, automation docs, and Vue SDK references\n- Restore current AI, export, component, and variable behavior\n- Refresh the Penpot comparison and Figma compatibility matrix

* docs: correct localized terminology

- Replace unnecessary English prose with natural localized terminology\n- Derive documentation aliases from named directory roots\n- Preserve English only for identifiers, APIs, and exact product terms

* docs(it): continue editorial pass

- Rewrite Italian user guides and automation documentation\n- Update Vue SDK composables and component references\n- Restore current AI, export, component, and variable behavior

* docs(it): complete editorial pass

- Finish Italian advanced SDK and reference documentation\n- Refresh the Penpot comparison and Figma compatibility matrix\n- Replace literal machine translations with natural technical prose

* docs(pl): refine property panel terminology

* docs: refine remaining localized prose

- Replace overfitted English prose in Polish feature documentation\n- Rewrite the Russian property-list reference in natural terminology

* docs(ru): rewrite Penpot comparison naturally

- Replace remaining English prose with natural Russian\n- Preserve code identifiers and library names only where required

* docs: rewrite localized feature overviews naturally

- Replace avoidable English prose in German, Spanish, and French\n- Keep identifiers and product names unchanged

* docs(de): refine property panel terminology

* docs: refine Spanish and French SDK terminology

* docs(ru): continue full prose audit

- Rewrite homepage, setup, navigation, and guide index naturally\n- Restore missing zoom shortcuts

* docs(ru): audit user and automation guides

- Rewrite selection, collaboration, and automation prose naturally\n- Preserve API identifiers while localizing ordinary terminology

* docs(ru): audit CLI inspection and analysis

* docs(ru): audit Vue SDK overview and guides

* docs(ru): audit Vue SDK API prose

- Localize ordinary component and composable terminology\n- Preserve API symbols and code identifiers

* docs(ru): audit advanced and gradient API references

* docs(ru): finish advanced API prose audit

* docs(ru): audit JSX renderer guide

* docs(ru): audit CLI export and scripting guides

* docs(pl): audit Penpot comparison prose

* docs(pl): audit selection and automation guides

* docs(pl): audit homepage and variable guides

* docs(pl): audit vector, layers, and Pen guides

* docs(pl): audit Auto layout and shape guides

* docs(pl): audit context menu and export guides

* docs(pl): audit JSX and analysis guides

* docs(pl): audit AI Chat guide

* docs(pl): audit components and CLI inspection

* docs(pl): audit scripting and SDK overview prose

* docs(pl): audit SDK API indexes

* docs(pl): audit SDK component references

* docs(pl): audit SDK composable references

* docs(ru): refine usePosition terminology

* docs(pl): audit advanced SDK references

* docs(pl): audit Figma compatibility matrix

* docs(pl): finish residual SDK terminology audit

* docs(pl): finish component terminology audit

* docs(pl): finish SDK guide terminology audit

* docs(de): begin full user guide prose audit

* docs(de): audit navigation, Pen, and layers guides

* docs(de): audit Auto Layout, shapes, menu, and export

* docs(de): audit components, text, and vector guides

* docs(de): audit variables and automation overview

* docs(de): audit AI Chat and collaboration guides

* docs(de): audit CLI inspection, analysis, and export

* docs(de): audit scripting and JSX guides

* docs(de): audit Vue SDK overview and guides

* docs(de): audit SDK API indexes

* docs(de): audit SDK component references

* docs(de): audit SDK composable references

* docs(de): audit advanced SDK references

* docs(de): audit Penpot comparison prose

* docs(de): audit Figma compatibility reference

* docs(es): begin full user guide prose audit

* docs(es): audit document organization guides

* docs(es): audit editing workflow guides

* docs(es): audit automation and collaboration prose

* docs(es): audit CLI inspection and export guides

* docs(es): audit CLI scripting guide

* docs(es): audit JSX and feature overview prose

* docs(es): audit Penpot comparison prose

* docs(es): audit SDK overview and guides

* docs(es): begin SDK component reference audit

* docs(es): audit SDK navigation component references

* docs(es): audit SDK color and layout components

* docs(es): begin SDK composable reference audit

* docs(es): audit SDK property composable references

* docs(es): audit SDK editor composable references

* docs(es): begin advanced SDK reference audit

* docs(es): audit advanced SDK state references

* docs(es): complete advanced SDK reference audit

* docs(es): audit Figma compatibility reference

* docs(es): complete residual terminology sweep

* docs(fr): begin full prose second audit

* docs(fr): audit AI and variables prose

* docs(fr): audit core user guide prose

* docs(fr): audit editing workflow guides

* docs(fr): audit CLI and JSX prose

* docs(fr): audit Penpot comparison prose

* docs(fr): audit SDK overview and guides

* docs(fr): begin SDK API reference audit

* docs(fr): audit SDK navigation component references

* docs(fr): audit SDK color and layout components

* docs(fr): begin SDK composable reference audit

* docs(fr): audit SDK property composable references

* docs(fr): audit editor composables and advanced APIs

* docs(fr): audit advanced SDK state references

* docs(fr): complete advanced SDK reference audit

* docs(fr): audit Figma compatibility reference

* docs(fr): complete residual terminology sweep

* docs(it): begin full prose second audit

* docs(it): audit document workflow guides

* docs(it): audit editing and automation prose

* docs(it): audit CLI and JSX prose

* docs(it): audit Penpot comparison and SDK guides

* docs(it): begin SDK API reference audit

* docs(it): audit SDK component and state references

* docs(it): audit residual SDK references

* docs(it): audit Figma compatibility reference

* docs(it): complete residual terminology sweep

* docs(i18n): verify residual locale terminology
2026-08-20 18:36:50 +03:00

14 KiB
Raw Blame History

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

Советы

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