Componentes
Los componentes son elementos de diseño reutilizables. Edita el componente principal y todas sus instancias se actualizan automáticamente.
Crear un componente
Selecciona un marco o grupo y pulsa ⌥⌘K (Ctrl + Alt + K). La selección se convierte en un componente reutilizable.
Los componentes muestran una etiqueta morada con icono de diamante.
Conjuntos de componentes
Selecciona dos o más componentes y pulsa ⇧⌘K (Shift + Ctrl + K) 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).
Crear instancias
Clic derecho → Crear instancia. La instancia aparece a la derecha del componente original.
Desenlazar una instancia
Selecciona una instancia y pulsa ⌥⌘B (Ctrl + Alt + B). La instancia se convierte en un marco regular sin enlace al componente original.
Sincronización en vivo
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
Overrides
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
Clic selecciona el componente. Doble clic para entrar y seleccionar hijos.
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
| Acción | Mac | Windows / Linux |
|---|---|---|
| Crear componente | ⌥⌘K | Ctrl + Alt + K |
| Crear conjunto | ⇧⌘K | Shift + Ctrl + K |
| Desenlazar instancia | ⌥⌘B | Ctrl + Alt + B |