2026-03-03 09:15:39 +00:00
---
title: Componentes
description: Componentes reutilizables, instancias, overrides y sincronización en OpenPencil.
---
# Componentes
Remove implementation details from user guide
Replace internal references (Yoga, CanvasKit, Paragraph API, style runs,
characterStyleIDs, vectorNetworkBlob, Kiwi binary, scene graph, font-kit,
Local Font Access API, COMPONENT type, override key format, hex codes, px
specs) with user-facing language across all 7 locales.
2026-03-08 09:55:25 +00:00
Los componentes son elementos de diseño reutilizables. Edita el componente principal y todas sus instancias se actualizan automáticamente.
2026-03-03 09:15:39 +00:00
## Crear un componente
Remove implementation details from user guide
Replace internal references (Yoga, CanvasKit, Paragraph API, style runs,
characterStyleIDs, vectorNetworkBlob, Kiwi binary, scene graph, font-kit,
Local Font Access API, COMPONENT type, override key format, hex codes, px
specs) with user-facing language across all 7 locales.
2026-03-08 09:55:25 +00:00
Selecciona un marco o grupo y pulsa < kbd > ⌥< / kbd > < kbd > ⌘< / kbd > < kbd > K< / kbd > (< kbd > Ctrl< / kbd > + < kbd > Alt< / kbd > + < kbd > K< / kbd > ). La selección se convierte en un componente reutilizable.
Los componentes muestran una etiqueta morada con icono de diamante.
2026-03-03 09:15:39 +00:00
## Conjuntos de componentes
Remove implementation details from user guide
Replace internal references (Yoga, CanvasKit, Paragraph API, style runs,
characterStyleIDs, vectorNetworkBlob, Kiwi binary, scene graph, font-kit,
Local Font Access API, COMPONENT type, override key format, hex codes, px
specs) with user-facing language across all 7 locales.
2026-03-08 09:55:25 +00:00
Selecciona dos o más componentes y pulsa < kbd > ⇧< / kbd > < kbd > ⌘< / kbd > < kbd > K< / kbd > (< kbd > Shift< / kbd > + < kbd > Ctrl< / kbd > + < kbd > K< / kbd > ) para combinarlos en un conjunto de componentes — un contenedor con borde morado punteado. Los conjuntos son útiles para agrupar variantes (ej. estados de botón).
2026-03-03 09:15:39 +00:00
## Crear instancias
Remove implementation details from user guide
Replace internal references (Yoga, CanvasKit, Paragraph API, style runs,
characterStyleIDs, vectorNetworkBlob, Kiwi binary, scene graph, font-kit,
Local Font Access API, COMPONENT type, override key format, hex codes, px
specs) with user-facing language across all 7 locales.
2026-03-08 09:55:25 +00:00
Clic derecho → **Crear instancia** . La instancia aparece a la derecha del componente original.
2026-03-03 09:15:39 +00:00
## Desenlazar una instancia
Remove implementation details from user guide
Replace internal references (Yoga, CanvasKit, Paragraph API, style runs,
characterStyleIDs, vectorNetworkBlob, Kiwi binary, scene graph, font-kit,
Local Font Access API, COMPONENT type, override key format, hex codes, px
specs) with user-facing language across all 7 locales.
2026-03-08 09:55:25 +00:00
Selecciona una instancia y pulsa < kbd > ⌥< / kbd > < kbd > ⌘< / kbd > < kbd > B< / kbd > (< kbd > Ctrl< / kbd > + < kbd > Alt< / kbd > + < kbd > B< / kbd > ). La instancia se convierte en un marco regular sin enlace al componente original.
2026-03-03 09:15:39 +00:00
## Sincronización en vivo
Remove implementation details from user guide
Replace internal references (Yoga, CanvasKit, Paragraph API, style runs,
characterStyleIDs, vectorNetworkBlob, Kiwi binary, scene graph, font-kit,
Local Font Access API, COMPONENT type, override key format, hex codes, px
specs) with user-facing language across all 7 locales.
2026-03-08 09:55:25 +00:00
Editar un componente actualiza todas sus instancias automáticamente. Propiedades sincronizadas:
- Ancho y alto
- Rellenos, trazos y efectos
- Opacidad y radios de esquinas
- Propiedades de layout
2026-03-03 09:15:39 +00:00
## Overrides
Remove implementation details from user guide
Replace internal references (Yoga, CanvasKit, Paragraph API, style runs,
characterStyleIDs, vectorNetworkBlob, Kiwi binary, scene graph, font-kit,
Local Font Access API, COMPONENT type, override key format, hex codes, px
specs) with user-facing language across all 7 locales.
2026-03-08 09:55:25 +00:00
Las instancias pueden sobreescribir propiedades específicas sin romper el enlace de sincronización. Cuando se sobreescribe una propiedad en una instancia, esa propiedad se omite durante la sincronización — las demás propiedades continúan actualizándose desde el componente principal.
## Selección
2026-03-03 09:15:39 +00:00
Clic selecciona el componente. **Doble clic** para entrar y seleccionar hijos.
Remove implementation details from user guide
Replace internal references (Yoga, CanvasKit, Paragraph API, style runs,
characterStyleIDs, vectorNetworkBlob, Kiwi binary, scene graph, font-kit,
Local Font Access API, COMPONENT type, override key format, hex codes, px
specs) with user-facing language across all 7 locales.
2026-03-08 09:55:25 +00:00
## Tratamiento visual
| Elemento | Apariencia |
|----------|------------|
| Etiqueta de componente | Morada con icono de diamante, siempre visible |
| Etiqueta de instancia | Morada con icono de diamante, siempre visible |
| Borde de conjunto | Contorno morado punteado |
## Atajos de teclado
2026-03-03 09:15:39 +00:00
| Acción | Mac | Windows / Linux |
|--------|-----|-----------------|
Use <kbd> for keyboard shortcuts across all docs
Wrap all keyboard shortcut references in <kbd> tags in user guide,
reference, and development docs across all 7 locales (en, de, es,
fr, it, pl, ru). Tables, inline prose, and parenthetical hints.
2026-03-08 09:48:02 +00:00
| Crear componente | < kbd > ⌥< / kbd > < kbd > ⌘< / kbd > < kbd > K< / kbd > | < kbd > Ctrl< / kbd > + < kbd > Alt< / kbd > + < kbd > K< / kbd > |
| Crear conjunto | < kbd > ⇧< / kbd > < kbd > ⌘< / kbd > < kbd > K< / kbd > | < kbd > Shift< / kbd > + < kbd > Ctrl< / kbd > + < kbd > K< / kbd > |
| Desenlazar instancia | < kbd > ⌥< / kbd > < kbd > ⌘< / kbd > < kbd > B< / kbd > | < kbd > Ctrl< / kbd > + < kbd > Alt< / kbd > + < kbd > B< / kbd > |
