--- title: "Presentamos v5: la nueva interfaz de ThriveDesk — Changelog de ThriveDesk" canonical: "https://www.thrivedesk.com/es/changelog/ui-v5/" author: "ThriveDesk" description: "Reconstruimos la interfaz de la app de ThriveDesk sobre nuestro propio sistema de diseño. Organiza la navegación y la bandeja de entrada a tu manera, cambia de bandeja desde la barra superior, escribe en un nuevo editor de respuestas y activa el modo oscuro." categories: [page] --- [Todas las actualizaciones](https://www.thrivedesk.com/es/changelog/) 1 de octubre de 2026 Nuevo # Presentamos v5: la nueva interfaz de ThriveDesk Reconstruimos la interfaz de la app de ThriveDesk sobre nuestro propio sistema de diseño. Organiza la navegación y la bandeja de entrada a tu manera, cambia de bandeja desde la barra superior, escribe en un nuevo editor de respuestas y activa el modo oscuro. ![Presentamos v5: la nueva interfaz de ThriveDesk](https://www.thrivedesk.com/_astro/featured.DetnvO3-_Zin2CC.webp) La nueva interfaz de la app forma parte de nuestra [renovación de marca](https://www.thrivedesk.com/es/blog/meet-the-new-thrivedesk/). Nuestro objetivo es que ThriveDesk sea la mejor plataforma de atención al cliente para equipos de ecommerce y SaaS, así que reconstruimos la interfaz desde cero. Antes de empezar, hablamos con clientes sobre lo que les hacía perder tiempo. El resultado es una app que puedes personalizar desde la base. Además, es más rápida y más fácil de aprender. v5 ya está disponible para todas las cuentas, en todos los planes. No tienes que configurar nada. ### Por qué la reconstruimos Desde nuestro primer lanzamiento, el backend tuvo reglas estrictas de pruebas unitarias. El frontend no, y con el tiempo eso dejó mucha deuda técnica. El frontend cambió muchas veces. La versión 1 usaba Bootstrap. Después pasamos a Material Design y mantuvimos parte de Bootstrap. En v3, añadimos Tailwind CSS encima de ambos. Eso reemplazó muchas partes, pero quedaron algunos componentes grandes. Luego usamos Ant Design para algunos componentes, y v4 pasó por completo a PrimeNG. PrimeNG funcionó bien hasta que cerró su código y añadió una licencia comercial. Teníamos dos opciones: mantener una copia de la última versión de código abierto de PrimeNG o crear nuestro propio sistema de diseño. Creamos el nuestro. La programación agéntica lo hizo posible en poco tiempo. ![La bandeja de entrada de ThriveDesk v5, con el selector de bandejas en la barra superior y los tickets agrupados por prioridad](https://www.thrivedesk.com/_astro/new-ui.BfA3Y0Pl_ZFvKh8.webp) ![La bandeja de entrada anterior de ThriveDesk, con el menú de bandejas en la barra lateral y filtros sobre la lista de tickets](https://www.thrivedesk.com/_astro/old-ui.BmP5LDA3_Z2ce3dv.webp) Interfaz anterior v5 ### Cómo la construimos Antes de escribir una sola línea de código, recogimos los comentarios de nuestros clientes. Escribir código es fácil. Una buena interfaz necesita entender bien los problemas de tus clientes. Creamos nuestro propio sistema de diseño basado en tokens, inspirado en [shadcn](https://ui.shadcn.com/), y migramos los componentes uno por uno. Empezamos por los primitivos y después seguimos con los componentes híbridos y de un solo uso. Cada componente y cada cambio pasó por pruebas end-to-end y unitarias. Con la programación agéntica, la migración completa llevó dos semanas. Los frameworks de interfaz anteriores ya no están. Ahora todo el código de la interfaz es nuestro. Esta es la diferencia de velocidad: ![Métricas de carga de la interfaz anterior y de v5: formulario de inicio de sesión listo un 18 % antes, mayor renderizado un 15 % antes, un 41 % menos de ejecución de JavaScript, un 42 % menos de bloqueo del hilo principal, un 12 % menos de memoria y un 31 % menos de datos transferidos](https://www.thrivedesk.com/_astro/speed.BoKTlc1b_Z1ynRgT.webp) ### Personaliza la navegación principal Diseñamos v5 para que puedas personalizar cada parte. No hay dos equipos de soporte que trabajen igual, y una pantalla llena de herramientas que nunca abres te frena. En v5, tú decides qué muestran la navegación principal y la barra lateral de la bandeja de entrada, y en qué orden. También eliges cómo se ve la lista de tickets y qué ancho tiene cada barra lateral. Mantén a la vista las herramientas que usas cada día y aparta el resto. ![El menú contextual de la navegación principal con las opciones Icon only, Icon with name y Customize](https://www.thrivedesk.com/_astro/nav-menu.Byru9mxk_Z1exD0M.webp) Haz clic derecho en la navegación principal y elige **Icon only** o **Icon with name**. Icon with name es la opción predeterminada. Para ver más opciones, selecciona **Customize**. Activa o desactiva cada sección y arrástralas al orden que quieras. Si no abres Workflow o [Report](https://www.thrivedesk.com/es/features/analytics/) cada día, desactívalos. Puedes volver a activarlos cuando quieras. ![El diálogo Customize navigation con casillas y controles de arrastre para Inbox, Chat, Neo, Workflow, Report, Contacts y Docs](https://www.thrivedesk.com/_astro/customize-nav.CKsel6Yj_20o0yB.webp) ### Personaliza la barra lateral de la bandeja de entrada ![El diálogo Customize navigation de la barra lateral, con carpetas y secciones que puedes activar, desactivar y reordenar](https://www.thrivedesk.com/_astro/customize-sidebar.YBg5et6T_1PiiHQ.webp) Muchos nos pidieron controlar la barra lateral de la bandeja de entrada. Ahora la controlas por completo. Si no necesitas una carpeta o una sección, desactívala. Arrastra el resto al orden que quieras. Los elementos que selecciones se quedan en la barra lateral y los demás pasan a **More**. ### Elige cómo se muestran los tickets ![El menú de visualización de la lista de tickets con los ajustes Group by, Ordering, Density y Display properties](https://www.thrivedesk.com/_astro/ticket-view.BU8sVle3_2jYJIH.webp) También puedes ajustar cómo se ve la lista de tickets. Agrupa los tickets por prioridad, estado o [etiqueta](https://www.thrivedesk.com/es/features/tags/). Elige el orden y qué propiedades se muestran en cada ticket. ### Configura la navegación de tickets ![El menú de visualización de la lista de tickets junto a un ticket abierto, con los ajustes Ordering, Density y Display properties](https://www.thrivedesk.com/_astro/ticket-navigation.Cl-aU_b7_Z6OKL5.webp) Cuando abres un ticket, la lista de tickets que aparece al lado tiene su propio orden y sus propios ajustes de visualización. Elige filas compactas o expandidas y las propiedades que quieres ver, como el estado, la prioridad, las etiquetas o la última respuesta. Para pasar al siguiente ticket, selecciónalo en la lista. Para concentrarte en una sola conversación, oculta la lista. ![Arrastrar los bordes de la navegación principal y de la barra lateral de la bandeja de entrada para cambiar su ancho](https://www.thrivedesk.com/_astro/resize-sidebars.CVDSeHB7_7aLNE.webp) También puedes arrastrar el borde de cada barra lateral para ajustar su ancho al tamaño de tu pantalla. En una laptop, estrecha las barras laterales para que la conversación tenga más espacio. ### Cambia de bandeja de entrada desde la barra superior ![El selector de bandejas abierto en la barra superior, con el número de tickets de cada bandeja](https://www.thrivedesk.com/_astro/inbox-switcher.LNQjU5hB_ZnqkFG.webp) Todo en ThriveDesk pertenece a una [bandeja de entrada](https://www.thrivedesk.com/es/shared-inbox/). El menú de bandejas estaba antes en la barra lateral y, si tienes muchas bandejas, era fácil olvidar en cuál estabas. El selector de bandejas ahora está en la parte superior de la app. Siempre ves en qué bandeja estás y puedes cambiar de bandeja más rápido. El selector también muestra el número de tickets de cada bandeja, así sabes cuál necesita tu atención. ### Resuelve tus tickets más rápido El botón **Mine**, junto al selector de bandejas, muestra los tickets que tienes asignados en todas las bandejas. Selecciona un ticket para abrirlo. Para que la lista sea corta, muestra un máximo de 5 tickets. ![El menú Mine en la barra superior, con cinco tickets asignados a ti y el nombre de la bandeja de cada uno](https://www.thrivedesk.com/_astro/mine-shortcut.BLW3pjfS_1pV2nK.webp) ### Nuevo editor de respuestas ![El menú de comandos con / del editor de respuestas, con las opciones Text, Heading 1 a 3, Bullet List, Numbered List y Blockquote](https://www.thrivedesk.com/_astro/reply-editor.BNhW5YQX_ZCvHFI.webp) Reconstruimos el editor de respuestas desde cero. Ahora funciona con bloques, como Notion. Escribe `/` para abrir el menú de bloques y elige texto, un encabezado, una lista con viñetas o numerada, o una cita. No tienes que dejar el teclado para dar formato a una respuesta, así que las respuestas largas con pasos o secciones se escriben rápido y tu cliente las lee con facilidad. ![Arrastrar la barra superior del editor de respuestas para hacerlo más alto](https://www.thrivedesk.com/_astro/editor-height.85vtY8Ee_2oAjLE.webp) Para cambiar la altura del editor, arrastra la barra de su parte superior. Un editor más alto muestra más de tu respuesta. Hazlo bajo para tener la conversación a la vista mientras escribes, o alto cuando escribas una respuesta larga. ### Vuelven las notificaciones en la app ![El panel de notificaciones con las pestañas All y Mentioned y una lista de respuestas, asignaciones y notas de tickets](https://www.thrivedesk.com/_astro/notifications.CKBwaDxv_ZjdDcC.webp) Si un compañero de equipo te menciona o te asigna un ticket y no ves el correo, ahora la app también te avisa. Selecciona el icono de notificaciones arriba a la derecha para verlas. Abre la pestaña **Mentioned** para ver solo las conversaciones donde alguien te necesita, o selecciona **Mark all as read** para vaciar la lista. ### Plantillas de automatización ![Plantillas de workflow agrupadas en Routing, Auto-assign y E-commerce, cada una con una vista previa de su disparador, condición y acción](https://www.thrivedesk.com/_astro/automation-templates.CMp7mDeG_Z2kb5CC.webp) También rediseñamos cómo creas [automatizaciones](https://www.thrivedesk.com/es/features/automation/). Cuando creas un nuevo workflow, empieza desde cero o desde una plantilla. Cada plantilla muestra una vista previa de cómo funciona. Si necesitas una plantilla que no está, avísanos. ### Ajustes organizados ![La página de ajustes Workspace, con los ajustes en tarjetas y el menú de ajustes en grupos](https://www.thrivedesk.com/_astro/settings.CPpxkgP4_Z1uKvIJ.webp) Revisamos cada pantalla de ajustes y organizamos los ajustes en tarjetas, grupos y pestañas. Ahora son más fáciles de encontrar y siguen un orden más lógico que antes. Conectar una dirección de correo a una bandeja de entrada también es más sencillo. ### Modo oscuro ![La bandeja de entrada de ThriveDesk en modo oscuro](https://www.thrivedesk.com/_astro/dark-mode.BnmJ-8Sg_YiASb.webp) Dicen que no eres una startup de verdad hasta que tu app tiene modo oscuro. Nosotros también lo queríamos, pero los frameworks de componentes anteriores nos lo impedían. Ahora que todo el código de la interfaz es nuestro, podemos construir lo que queramos. Para cambiar el tema, selecciona tu icono de perfil arriba a la derecha. Después elige **System**, **Claro** o **Oscuro**. * * * Creamos cada píxel de esta interfaz desde cero, pero mantuvimos los flujos de trabajo que ya conoces. Puedes seguir trabajando como antes. Esta interfaz también es la base de nuestro siguiente paso: una plataforma de atención al cliente totalmente agéntica para ecommerce. [Abrir ThriveDesk](https://app.thrivedesk.com/)