SISTEMAS DE DISEÑO EN PIXSO

La herramienta de sistemas de diseño para tu equipo

Comparte una misma base de componentes y estilos con tu equipo. Crea bibliotecas UI flexibles, comparte los cambios entre proyectos y utiliza el sistema de diseño de tu equipo con Pixso AI.

Crear un sistema de diseño Explorar las herramientas

Crea en el navegador. Comparte con tu equipo.

Componentes UI reutilizables y estilos compartidos organizados en Pixso — Una base común para cada pantalla del producto, sin volver a crear los mismos elementos.

Reutiliza lo que ya funciona

Crea pantallas con una colección compartida de componentes y estilos.

Mantén el control de los cambios

Publica actualizaciones de la biblioteca y elige cuándo aplicarlas en cada archivo.

Dale contexto de diseño a la IA

Genera pantallas editables con una biblioteca habilitada para IA.

UNA BASE COMPARTIDA

Encuentra y reutiliza los elementos que necesitas

Ofrece a tu equipo una biblioteca de componentes disponible mientras diseña. Reúne botones, campos y navegación con los colores y la tipografía que dan coherencia al producto.

Convierte los elementos repetidos en componentes

Crea componentes a partir de capas existentes y coloca instancias donde necesites ese patrón. Añade descripciones para explicar a tu equipo cómo utilizar cada componente.

Define los estilos una vez y úsalos en distintas pantallas

Guarda colores, texto, efectos y cuadrículas de diseño como estilos. Publícalos junto con los componentes para que el equipo utilice las mismas decisiones visuales en otros archivos.

Explorar los estilos compartidos

Estilos de color, texto y efectos en el panel Local styles del editor de Pixso — Los estilos de texto, color y efectos con nombres definidos mantienen las decisiones visuales compartidas junto al diseño.

COHERENCIA Y FLEXIBILIDAD

Haz que cada componente se adapte a tu diseño

Un componente útil sirve para más de un caso. Organiza tamaños y estados como variantes y ofrece a tu equipo las opciones que necesita sin tener que reconstruir el diseño original.

Agrupa los estados relacionados

Reúne los tamaños y estados de un botón en un conjunto de componentes. Selecciona propiedades con nombre, como tamaño o estado, para cambiar de variante mientras creas una pantalla.

Ofrece las opciones que deben poder cambiar

Utiliza propiedades de componentes para editar texto, mostrar u ocultar capas e intercambiar instancias anidadas. Tu equipo podrá ajustar esos detalles a partir del mismo componente.

Explorar variantes y propiedades de componentes

Componentes de interfaz reutilizables con controles de estado, tamaño y propiedades de instancia en Pixso — Agrupa los estados relacionados y muestra con claridad las opciones disponibles para quienes los utilizan.

BIBLIOTECAS COMPARTIDAS

Mantén la coherencia entre proyectos y controla los cambios

Mejora un componente en su archivo de origen y publica el cambio en la biblioteca. Los archivos que la utilizan reciben una notificación de actualización para que cada equipo incorpore los cambios cuando esté preparado.

Comparte los cambios y su contexto

Publica los componentes y estilos nuevos o modificados con una descripción. Tu equipo verá los recursos actualizados juntos, sin tener que comparar copias por separado para saber qué ha cambiado.

Aplica un cambio o toda la actualización

Revisa la lista de actualizaciones de la biblioteca y aplica elementos individuales o todas las actualizaciones disponibles. Los cambios en un componente principal actualizan directamente sus instancias locales vinculadas dentro del mismo archivo.

Cómo funcionan las actualizaciones de bibliotecas

Componentes de navegación y avatares organizados junto a pantallas de una aplicación móvil en Pixso — Organiza la navegación, los avatares y los estilos reutilizables para compartirlos con tu equipo.

TU SISTEMA EN PIXSO AI

Crea nuevas pantallas con tu propio lenguaje visual

Tu biblioteca puede guiar tanto a la IA como a tus diseñadores. Habilita el acceso de IA para una biblioteca publicada, selecciónala en Pixso AI y describe la pantalla que quieres crear.

Dale a la IA un punto de partida adecuado

Una biblioteca de paneles de control proporciona a Pixso AI componentes y un estilo visual para ese tipo de diseño. Elige una biblioteca que encaje con la pantalla que necesitas y genera un diseño editable en el lienzo.

Sigue trabajando sobre el resultado

Edita las capas generadas y adapta la pantalla a tu producto. Si la biblioteca no incluye un módulo solicitado, la IA puede generar esa parte en lugar de encajar un componente que no corresponde al diseño.

Explorar Pixso AI

Sistema de diseño personalizado seleccionado en Pixso AI con una biblioteca para una aplicación financiera — Selecciona un sistema de diseño personalizado antes de generar tu próxima pantalla.

TODO EN TORNO A TU BIBLIOTECA

Las herramientas que tu sistema de diseño necesita cada día

Auto Layout

Configura márgenes internos, espaciado y alineación para que la composición se adapte a los cambios de texto y contenido.

Importación de archivos

Importa archivos de Figma, Sketch o Adobe XD en Pixso y aprovecha tus diseños existentes como punto de partida.

Comentarios en contexto

Comenta un componente junto al diseño, menciona a tu equipo y vincula las observaciones al detalle correspondiente.

Acceso de lectura y edición

Invita a colaboradores con el acceso que necesitan para contribuir, revisar o utilizar el archivo de diseño.

Historial de versiones

Guarda versiones con nombre en los hitos importantes para que el equipo pueda consultar un diseño o restaurar trabajo anterior.

Entrega a desarrollo

Comparte la vista de entrega para que los desarrolladores consulten dimensiones y referencias de estilos y descarguen los recursos preparados.

Elegir una herramienta de sistemas de diseño

¿En qué se diferencia un sistema de diseño de una biblioteca de componentes?

Una biblioteca de componentes contiene elementos de interfaz reutilizables. Un sistema de diseño también incluye las reglas visuales, las pautas de uso y las decisiones que mantienen la coherencia entre esos elementos. Pixso ofrece componentes, estilos compartidos y bibliotecas para que tu equipo aplique esas decisiones en su trabajo diario.

¿Puedo reutilizar componentes y estilos en distintos archivos?

Sí. Publica los componentes y estilos en una biblioteca de equipo y actívala en los archivos donde la necesites. Los miembros del equipo con el acceso adecuado podrán encontrar los recursos compartidos y utilizarlos mientras diseñan.

¿Un cambio en la biblioteca afecta de inmediato a todos los proyectos?

No. Los cambios en componentes y estilos publicados deben publicarse en la biblioteca antes de que otros archivos puedan recibirlos. Esos archivos muestran una notificación, y los usuarios pueden aplicar cambios individuales o todas las actualizaciones disponibles. Las instancias vinculadas en el mismo archivo de origen se actualizan directamente.

¿Puede Pixso AI utilizar nuestro sistema de diseño?

Sí. Una biblioteca publicada debe tener habilitado el acceso de IA para poder seleccionarla como sistema de diseño personalizado en Pixso AI. Una persona con permisos de edición de la biblioteca puede habilitarlo. Selecciona la biblioteca y escribe una instrucción acorde con su propósito y estilo; el resultado seguirá siendo editable en el lienzo.

Crea una biblioteca que tu equipo quiera utilizar

Empieza por los componentes que más se repiten en tu producto. Dale a tu equipo una base compartida para la próxima pantalla y las que vengan después.

Crear un sistema de diseño

Comparar planes para tu equipo