Un componente es una pieza de layout que diseñas una vez y colocas muchas veces: una barra de navegación, una tarjeta, un plan de precios, un footer. Cada colocación es una instancia. Edita el componente y se actualizan todas las instancias en todas las páginas.
Crear un componente
Selecciona lo que quieres volver reutilizable
Selecciona un frame y su contenido en el lienzo o en Layers.
Crea el componente
Presiona ⌥⌘K o elige Create component en el menú contextual. La selección se mueve a un componente nuevo y se reemplaza por una instancia.
Edítalo en su mesa de trabajo
El componente recibe su propia mesa de trabajo en el lienzo. Las ediciones que hagas ahí llegan en vivo a cada instancia.
Colocar instancias
Arrastra un componente desde la pestaña Components a una mesa de trabajo, o usa Insert instance. La sección de instancia del inspector elige su variante, lista sus sobrescrituras y te lleva al componente principal.
Variantes
Las variantes son versiones con nombre de un componente, como light y dark o small y large. Los estilos se pueden definir por variante, y cada instancia elige una. La mesa de trabajo del componente muestra todas las variantes lado a lado.
Sobrescrituras
Haz doble clic dentro de una instancia para editar su texto en su lugar. Ese cambio se guarda como una sobrescritura solo en esa instancia; el componente conserva su valor por defecto. Una sobrescritura puede cambiar las props de un hijo (texto, enlace, imagen), sus estilos u ocultarlo. Las instancias nunca copian el árbol del componente, así que los cambios en todo lo que no sobrescribiste siempre les llegan.
"n_nav": {
"type": "instance",
"props": {
"componentId": "c_navbar",
"variant": "dark",
"overrides": {
"cn_cta": { "props": { "text": "Sign up free" } },
"cn_promo": { "hidden": true }
}
}
}
¿Clases o componentes?
Usa una clase cuando muchos elementos comparten un aspecto. Usa un componente cuando comparten una estructura: los mismos hijos en el mismo orden, con algunos textos o imágenes que cambian.