Componentes

Los componentes son elementos de interfaz reutilizables. Ayudan a mantener la coherencia y evitan repetir trabajo al diseñar.

1. Nombrar y gestionar componentes

1.1 Panel Componentes

La forma más directa de acceder a los componentes del archivo es el panel Componentes. Para abrirlo:

• Haz clic en Componentes en el lateral izquierdo.
• También puedes utilizar el atajo Alt + 2

1.2 Organización del panel

El panel contiene:

• Componentes locales: creados en el archivo actual.
• Componentes utilizados: proceden de otras bibliotecas y se usan en el archivo actual.
• Bibliotecas activadas: disponibles para el equipo o la organización.

Cada sección del panel Componentes tiene un título. Las bibliotecas activadas se identifican por el nombre de su archivo. Contrae una sección para ahorrar espacio o despliégala para ver su contenido.

Consultar una biblioteca de recursos

Los componentes se organizan como Archivo > Página > Marco. Utiliza las flechas para desplegar cada nivel. Se ordenan alfabéticamente, no según su posición en el archivo original.

1.3 Componentes relacionados

Pixso relaciona los componentes mediante:

• El nombre: por ejemplo, agrupa Design/Component/Activation, Design/Component/Hover y Design/Component/Forbidden.
• La estructura del archivo original: los componentes de un mismo marco se consideran relacionados.

1.4 Organizar componentes en el lienzo

Nota: un conjunto de componentes solo contiene componentes. No puedes añadirle texto independiente, descripciones o marcos, ni agrupar sus variantes como objetos normales.

Al combinar componentes como variantes, se conservan su distribución y separación actuales. Organízalos antes para evitar repetir el trabajo.

Los conjuntos de variantes utilizan por defecto un contorno discontinuo morado y ningún relleno. Puedes adaptar su apariencia a tu sistema de diseño.

2. Crear componentes reutilizables

Puedes crear un componente a partir de cualquier capa u objeto, desde una forma, botón o texto hasta una tarjeta o menú completos.

Nota: si tienes componentes parecidos con pequeñas diferencias, conviértelos en variantes. Así reduces la dispersión de la biblioteca y facilitas encontrar cada opción.

2.1 Crear un componente

Dispones de varias formas:

1. Selecciona las capas que quieras convertir.

2. Elige uno de estos métodos:

• Pulsa Crear componente en la barra de herramientas.
• Abre el menú contextual y selecciona Crear componente.
• Utiliza Ctrl + Alt + K.

3. Pixso coloca la selección en un marco de componente, identificado con un icono morado en el panel de capas.

4. Añade una descripción en el panel derecho para que colaboradores y desarrolladores puedan consultarla al inspeccionar el diseño.

2.2 Crear varios componentes

De forma predeterminada, Crear componente convierte la selección en un único componente. Para crear varios, puedes seleccionar:

• Objetos y capas dentro de un marco
• Objetos y capas dentro de un grupo
• Capas individuales, como trazados o redes vectoriales
• Capas de una operación booleana

Nota: si seleccionas varias capas independientes, Pixso puede crear un componente por cada una.

Para hacerlo:

1. Selecciona las capas.
2. Abre la flecha junto a Componente.
3. Selecciona Crear varios componentes.
4. Pixso crea un componente por cada marco, grupo, operación booleana o trazado seleccionado.

3. Crear instancias

El componente principal define las propiedades del elemento; una instancia es una copia vinculada que utilizas en el diseño. Puedes crear instancias de componentes locales o publicados en bibliotecas.

3.1 Desde el panel Componentes

Busca componentes en el panel Componentes del lateral izquierdo. Desde allí también puedes abrir otras bibliotecas.

1. Haz clic en Componentes.

2. Localiza el componente que necesites:

• Consulta los componentes locales del archivo.
• Elige un componente de una biblioteca activada; activa antes la biblioteca del equipo si es necesario.
• Consulta los componentes locales personales y los utilizados en el archivo actual.
• Busca en las bibliotecas a las que tengas acceso, incluidas las del equipo o la empresa y archivos con permiso de visualización.

3. Arrastra el componente al lienzo para crear una instancia.

3.2 Copiar un componente

Dentro del mismo archivo puedes copiar un componente para crear una instancia:

1. Utiliza estos atajos:

macOS: ⌘ Command + D

Windows: Ctrl + D

2. Arrastra mientras mantienes pulsada ⌥ Option (Mac) o Alt (Windows). Suelta primero el ratón y después la tecla; de lo contrario, moverás el componente en lugar de copiarlo.

3. Copia y pega el componente con los atajos habituales para crear una instancia.

macOS: ⌘ Command + C y ⌘ Command + V

Windows: Ctrl + C y Ctrl + V

3.3 Sustituir una instancia

Puedes intercambiar instancias de iconos, botones, tarjetas y otros componentes sin reconstruir el elemento.

Busca un componente del archivo actual o de una biblioteca de equipo activada.

Selecciona la instancia y abre el menú Instancia del panel derecho. Elige el componente con el que quieras sustituirla.

3.4 Modificar una instancia

Puedes cambiar el tamaño, el color, la fuente, el texto y otros valores de una instancia. Las propiedades sobrescritas conservan su modificación en lugar de adoptar el valor del componente principal.

Nota: la guía no permite cambiar la posición de las subcapas dentro de una instancia.

4. Desvincular una instancia

Puedes separar cualquier instancia de su componente principal.

1. Desde el menú Instancia

• Selecciona la instancia.
• Abre Instancia en el panel derecho.
• Pulsa Desvincular del componente principal.

2. Desde el menú contextual

• Haz clic con el botón derecho sobre la instancia en el lienzo o en Capas.
• Selecciona Desvincular componente.

3. Mediante atajos

También puedes utilizar:

macOS: ⌥ Option + ⌘ Command + B

Windows: Ctrl + B

5. Editar el componente principal

Las instancias están vinculadas al componente principal. Los cambios en él se propagan a las propiedades vinculadas de sus instancias.

Dentro del mismo archivo, los cambios se aplican de inmediato. Si el componente está publicado en una biblioteca, utiliza el panel Componentes para publicar la actualización y permitir que los otros archivos la revisen y apliquen.

5.1 Actualizar un componente

Edita el componente principal en su archivo de origen.

• Componente no publicado: los cambios se aplican automáticamente a las instancias locales.
• Componente publicado: los cambios se aplican de inmediato dentro del mismo archivo. Para llevarlos a otros archivos, publica la actualización de la biblioteca.

5.2 Localizar el componente principal

1. Selecciona una instancia.
2. Abre Diseño en el panel derecho.
3. Pulsa Ir al componente principal en la sección Instancia.
4. Selecciona el componente principal y realiza los cambios.

Nota: Pixso ofrece una opción para regresar a la instancia.

6. Crear y utilizar variantes

Las variantes reúnen componentes parecidos con diferencias de estado, tamaño o aspecto. Por ejemplo, varios botones pueden formar un conjunto que permite elegir rápidamente la versión necesaria.

Nota: evita reunir iconos distintos como si fueran variantes del mismo componente. Sí puedes agrupar un mismo icono con tamaños o estados diferentes.

Cada versión es una variante; el contenedor que las reúne es un conjunto de componentes.

6.1 Crear una variante

Nota: Pixso organiza las variantes en un marco especial llamado conjunto de componentes, que solo admite componentes. Para crear primero un componente, pulsa Crear componente o utiliza estos atajos:

• macOS: ⌥ Option + ⌘ Command + K
• Windows: Ctrl + Alt + K

Para añadir una variante:

1. Selecciona un componente.

2. Pulsa + junto a Variantes en el panel derecho.

3. Pixso realiza estas acciones:

• Crea otro componente con las mismas propiedades.
• Reúne ambos como variantes dentro de un conjunto.

4. Modifica cada variante según lo que necesite el diseño.

Nota: el conjunto tiene por defecto un contorno discontinuo morado y ningún relleno; puedes personalizarlo.

6.2 Combinar componentes como variantes

Nota: al insertar una instancia de un conjunto, Pixso importa todas sus variantes al archivo. Tenlo en cuenta al organizar bibliotecas grandes.

Para convertir componentes existentes en variantes:

• Nómbralos utilizando / para separar niveles.
• Colócalos en el lienzo.
• Combínalos como variantes.
• Define los nombres de sus propiedades.

6.3 Añadir variantes a un conjunto

Puedes utilizar cualquiera de estas opciones:

• Selecciona el conjunto y pulsa +. El botón aparece cuando el conjunto contiene al menos una variante.

• En Variantes, pulsa Nueva variante.
• Arrastra otros componentes al conjunto para incorporarlos como variantes.

Nota: las variantes existentes no se reorganizan automáticamente al arrastrar otros componentes.

Las instancias importan todas las variantes de su conjunto. Un conjunto muy grande puede afectar al rendimiento de Pixso.

6.4 Configurar una variante

1. Selecciona la instancia.
2. Debajo del nombre del conjunto en el panel derecho, elige los valores de sus propiedades.

6.5 Intercambiar instancias

Las instancias de variantes se pueden sustituir como las de otros componentes.

Utiliza el menú Instancia para buscar en el archivo actual o en bibliotecas activadas.

1. Selecciona la instancia que quieras sustituir.
2. Haz clic en el nombre del componente en el panel derecho.
3. Elige otro componente desde Instancia.

6.6 Organizar variantes

Al añadir variantes, Pixso utiliza una separación uniforme. Si los componentes ya tenían una distribución al agruparlos, conserva esa organización.

• Puedes arrastrar una variante a cualquier posición dentro del conjunto, incluso superponerla a otra.
• Cambia el tamaño del conjunto desde el panel derecho o arrastrando sus bordes en el lienzo, como con un marco normal.
• También puedes ajustar la separación horizontal entre variantes en el panel derecho.

6.7 Propiedades y valores

Define propiedades y valores que representen las opciones del componente. Pueden corresponderse con las propiedades utilizadas en los componentes de código del sistema de diseño.

Propiedad: una característica de la variante, como tipo, tamaño o estado de un botón.

Valor: una opción de esa propiedad; por ejemplo, predeterminado, hover, pulsado o deshabilitado para el estado.

Las variantes de un conjunto comparten las mismas propiedades, pero cada una debe tener una combinación de valores única.

6.8 Nombrar propiedades

1. Selecciona el conjunto.
2. Consulta los nombres de las propiedades en el panel derecho.
3. Haz clic en un nombre para editarlo.
4. Haz clic fuera del campo para confirmar.
5. Repite el proceso con las demás propiedades.

6.9 Nombres de las capas

Los nombres de las variantes siguen una sintaxis que identifica sus propiedades y valores. Haz doble clic en una variante en el panel Capas para consultar o editar esa información.

Utiliza la forma Propiedad 1 = Valor, Propiedad 2 = Valor, Propiedad 3 = Valor. Por ejemplo: Color = Blanco, Forma = Cuadrado, Sombra = Sí.

6.10 Publicar cambios en la biblioteca del equipo

Los cambios en componentes y estilos publicados se aplican primero dentro del archivo actual. Publícalos de nuevo para que otros miembros puedan actualizar sus archivos.

Un punto azul en el panel Componentes indica que hay cambios pendientes de publicación.

1. Abre Componentes en el lateral izquierdo y accede a la biblioteca del equipo.
2. Revisa los estilos y componentes añadidos, modificados o eliminados.
3. Añade una descripción de los cambios.
4. Pulsa Publicar y comprueba el aviso de confirmación.

Configurar propiedades de componente

Las propiedades exponen las partes del componente que los colaboradores necesitan cambiar. Configúralas en un componente principal o conjunto de componentes y utiliza después los controles del panel derecho de una instancia.

Propiedad	Qué controla	Dónde se crea
Variante	Una elección como tamaño, tipo o estado	En el componente padre o conjunto de componentes
Capa	La visibilidad de una capa anidada	En la capa hija correspondiente
Instancia	El componente utilizado por una instancia anidada	En una instancia de componente anidada
Texto	El contenido de una capa de texto	En la capa de texto correspondiente

Puedes crear una propiedad en el elemento hijo que la necesita o definirla primero y asociarla después a la capa. Los colaboradores con permiso de edición pueden configurar estas propiedades y cambiar sus valores.

Propiedades de variante

Selecciona el componente o conjunto y crea una propiedad de variante en la sección de propiedades. Asigna un nombre que represente la elección, como size o state, y define sus valores. Cada variante debe tener una combinación única; por ejemplo, size=small, state=hover.

Propiedades de visibilidad

1. Selecciona una capa hija del componente principal, como el icono de un botón.
2. En la sección Capa del panel derecho, selecciona el control de propiedad.
3. Asigna un nombre y elige si será visible de forma predeterminada.
4. Crea una instancia y utiliza su control para mostrar u ocultar la capa.

Esto reduce las variantes necesarias para contenido opcional sencillo. La propiedad sigue representando un único componente: no crea dos objetos independientes que puedan conectarse como estados del prototipo. Utiliza objetos separados o variantes cuando la interacción necesite destinos distintos.

Propiedades de instancia y sustitución rápida

1. Selecciona una instancia anidada en el componente principal.
2. Crea una propiedad con el control de la sección Instancia del panel derecho.
3. Elige la instancia predeterminada entre los componentes locales o los de una biblioteca habilitada.
4. Define componentes adecuados como opciones de sustitución rápida al crear la propiedad.

La instancia padre muestra un control para sustituir ese componente anidado. La capa debe ser una instancia de componente para tener una propiedad de este tipo.

Propiedades de texto

1. Selecciona una capa de texto del componente principal.
2. Utiliza el control de creación de propiedades de la sección Contenido del panel derecho.
3. Asigna un nombre y establece el texto predeterminado.
4. Selecciona una instancia y edita el valor de texto expuesto entre sus propiedades.

Puedes asociar varias capas de texto a la misma propiedad. Al cambiarla, sus textos se mantienen iguales.

Las propiedades de texto no exponen formatos avanzados como listas numeradas, listas con viñetas o superíndices. Editar un texto con esos formatos mediante la propiedad puede eliminarlos. Edita la capa directamente cuando necesites conservarlos.