Teleport 2.0: el creador colaborativo de interfaces de usuario low-code

Tras meses de iteraciones y comentarios de nuestros usuarios, ¡nos entusiasma muchísimo lanzar la versión más reciente de nuestra plataforma!

Esta nueva versión incluye mejoras considerables, entre ellas un motor de colaboración completamente nuevo que permite a los equipos crear interfaces de usuario con una eficiencia sin precedentes. Además, supone un importante avance hacia la creación de aplicaciones front-end completas.

En esta publicación del blog, describiremos brevemente algunas de las funciones que hemos añadido y destacaremos otras incluidas en nuestra hoja de ruta.

Nuevo motor de colaboración en tiempo real#

El nuevo motor permite sesiones de colaboración entre decenas de usuarios. ¡También permite a nuestro equipo de ingeniería lanzar nuevas funciones más rápido que nunca!

Detrás de este motor hay un año de trabajo interno. En lugar de limitarnos a actualizar el motor existente, decidimos apostar por completo y reescribir toda la plataforma. Fue una decisión estratégica que priorizó la inversión en beneficios a largo plazo.

Analizaremos esta decisión, los desafíos y sus implicaciones con más detalle en una publicación de blog aparte.

¡La función de arrastrar y soltar ahora es mucho más potente!#

Coloca los elementos donde quieras, cambia su posición, agrupa varios automáticamente o ubícalos libremente. La función de arrastrar y soltar de la plataforma es mucho más potente, intuitiva y fácil de usar.

¿Eres diseñador y quieres colocar los elementos en el lugar adecuado? ¡Cuenta con nosotros!

¿Eres desarrollador y quieres trabajar rápido sin tener que pensar qué propiedad de flexibilidad debes definir? ¿Es justify-content o align-items? Solo tienes que colocar los elementos donde quieras. Nosotros nos encargamos de actualizarlos.

Coloca elementos dentro de un contenedor

Cambia la posición y agrupa elementos

Compatibilidad mejorada con las propiedades de los componentes#

Trabajar con componentes y sus propiedades ahora es más sencillo. A partir de ahora, las propiedades de textos, enlaces e imágenes se detectan y crean automáticamente.

En la próxima versión, incorporaremos anulaciones de estilo y variantes para tus componentes.

Vinculación automática de propiedades de componentes

Un inspector visual mucho más intuitivo#

El Inspector visual ya no es solo un conjunto de propiedades CSS en una interfaz gráfica: ahora es fácil de entender.

En la versión inicial, el usuario debía saber qué hacía la propiedad display flex, block, inline, o none y comprender todas sus implicaciones. Era necesario tener conocimientos sólidos de CSS para entender cómo funcionaba.

La nueva versión ofrece una experiencia más intuitiva para diseñadores y usuarios sin conocimientos técnicos, y permite que los desarrolladores sigan trabajando directamente con las propiedades CSS.

Estas mejoras forman parte de nuestra investigación continua para ofrecer a cada miembro del equipo una experiencia de creación personalizada e intuitiva, independientemente de sus conocimientos técnicos.

Inspector visual simplificado

Estados de la interfaz#

Esta nueva versión te permite configurar fácilmente el estado al pasar el cursor, el estado activo, el estado deshabilitado, u otros estados, desde el panel de inspección.

Configura fácilmente los estados de interacción

Tokens de diseño#

También añadimos tokens de diseño. Un token de diseño puede ser un color, un estilo de fuente o una propiedad de dimensión. Puedes definir conjuntos de tokens personalizados para cada proyecto.

Una vez que creas un token, queda disponible como variable en todo el proyecto. En lugar de configurar manualmente y una y otra vez las propiedades de elementos similares, puedes usar uno de tus tokens existentes. Si cambias el valor del token, actualizaremos automáticamente todos los elementos que dependen de él.

Además de las ventajas evidentes de agilizar tu trabajo y ofrecer una vista centralizada de tus estilos atómicos, el código también se optimiza en segundo plano. Por cada token de diseño que crees y uses, los generadores de código producirán un estilo CSS global reutilizable, lo que dará como resultado un paquete de código más ligero.

Define una paleta de colores

¿Qué sigue?#

Para obtener más información sobre nuestros planes futuros, próximos lanzamientos y solicitudes de funciones, consulta nuestra hoja de ruta pública disponible en Trello.

Entre los elementos destacados se incluyen:

• Sesión anónima
• Crea interfaces de usuario sin necesidad de crear una cuenta. Comparte un proyecto con un usuario que no tenga cuenta.
• Complemento de Figma
• Importa diseños de Figma directamente a la plataforma
• Clases CSS
• Una función muy esperada. Comparte estilos entre elementos sin crear componentes ni copiar y pegar estilos manualmente de un elemento a otro. Esta es la base para admitir hojas de estilo externas como Tailwind CSS, Bootstrap, Chakra UI, Material UI y otras bibliotecas.
• Interactividad, gestión de eventos y renderizado condicional
• Añade controladores de eventos para las acciones de clic, activa la visibilidad de los elementos según condiciones o acciones del usuario, y mucho más.
• Obtención y mapeo de datos
• ¡Allá vamos, JAMstack! Integra tu CMS headless preferido y conecta los datos a tu interfaz de usuario: ya está.
• Elementos repetibles
• Usa tablas, listas u otros elementos iterables.
• Integración del flujo de trabajo para desarrolladores
• Integra tu proyecto con GitHub o CodeSandbox. Añadiremos una CLI para integrar tu diseño con una base de código existente.

Queremos agradecer a todos nuestros usuarios sus valiosos comentarios y el tiempo que han compartido con nosotros durante las entrevistas. Esta versión no habría sido posible sin su valiosa contribución.