Blog

Item: el elemento que da forma a cada pestaña de tu app

Cada pestaña de la navegación de tu app se apoya en un mismo elemento: el Item, que puede reunir un icono, una etiqueta y un indicador. Lo diseñamos para dar forma a nuestras TabBar de hoy y de mañana. Ya está documentado en el Design System de GoodBarber.

  3 min de lectura

Tus contenidos están cuidados, tus colores elegidos. Queda la barra de navegación, la que usan tus usuarios para pasar de una sección a otra y que pesa mucho en la impresión que deja tu app. Cada una de sus pestañas se apoya en un elemento concebido como una pieza de construcción: el Item. En la nueva generación de TabBar, es él quien da a cada navegación su carácter.

Un icono, una etiqueta, un indicador

En un Item, cada elemento tiene su función. El icono representa la sección, la etiqueta muestra su nombre y el indicador, opcional, señala la pestaña activa. Cada uno se muestra u oculta por separado, lo que da tres composiciones: icono y etiqueta, solo icono, solo etiqueta.

Es lo que separa la Minimal TabBar, toda en iconos, de la Clean TabBar, toda en texto: el mismo elemento, compuesto de otra manera.

17 propiedades para las TabBar de hoy y de mañana

Para diseñar una TabBar, nuestros diseñadores disponen de 17 propiedades: 8 para el Item, 6 para su icono y 3 para su etiqueta. La superficie del Item admite un color sólido, un degradado o un efecto de desenfoque, un borde, una sombra, esquinas rectas o redondeadas. Su maquetación define su tamaño, su orientación, su margen interior, que delimita la zona táctil, y el espaciado que deja respirar a sus elementos.

Toda esta riqueza no te obliga a ajustarlo todo. Nos sirve para componer layouts de TabBar completos, alineados con los códigos actuales del diseño de apps: Bold, Minimal y Clean TabBar son los tres primeros. Cuando esos códigos evolucionen, nacerán nuevos layouts del mismo elemento, sin partir de cero. Así podemos ofrecerte TabBar siempre al día.

En tu back office, eliges tu TabBar y luego la adaptas a tu identidad: tamaño de las pestañas, redondeo de las esquinas, colores, tipografía de las etiquetas, forma de señalar la pestaña activa. Tus propios iconos pueden incluso convivir con los del sistema.

Estados claros, animaciones cuidadas

Un Item tiene dos estados: por defecto y seleccionado. Para distinguir la pestaña activa, dispone de cuatro recursos, solos o combinados: el color, el fondo, el borde y el indicador. Este último solo aparece en la pestaña seleccionada, en tres formas: un punto (Dot), un trazo corto (Tiny) o una línea (Line).

Cada forma tiene su propio movimiento. El punto y la línea se encogen en la pestaña anterior y crecen en la nueva; el trazo corto se desliza de una a otra. Cuando la selección se marca con el fondo, como en la Bold TabBar, es el fondo de color el que se desplaza. Transiciones breves, que hacen legible cada cambio sin excederse.

El mismo Item, del móvil al escritorio

El Item adapta su orientación, su margen interior y su espaciado a cada pantalla: móvil, tableta y escritorio. En la parte inferior de un teléfono, el icono se coloca encima de la etiqueta. En escritorio, la TabBar se convierte en una barra lateral y el Item puede pasar a horizontal para encajar en ella. Configuras tu navegación una sola vez: cada pantalla recibe la versión que le conviene.

El Item entra en el Design System

Después de la TabBar, el Item tiene su página en el Design System de GoodBarber, y llega en familia. Con el Item Icon, el Item Label y el Item Indicator, abre una nueva categoría: los UI Elements, las piezas básicas de nuestros componentes, cada una dedicada a una sola función.

Para descubrir el Item en detalle, visita su página del Design System. Y para verlo en acción, elige tu TabBar en la sección Menú de tu back office.

Sigue leyendo

  14 min de lectura

¿Cuánto cuesta una app de fitness en 2026? Precios reales

Cinco caminos llevan a una app de fitness, cada uno con su precio: tarifa plana, opción de un software de gimnasio, por cliente, por suscriptor o a presupuesto. La tabla de abajo compara lo que cuesta cada uno y el trabajo para el que está hecho.

  3 min de lectura

El AI Extension Builder ya funciona con GPT-6 Luna

OpenAI publicó GPT-6 Sol y GPT-6 Luna el 22 de septiembre de 2026, después de GPT-6 Astra, el modelo insignia de la familia, lanzado a principios del mismo mes. Luna es el más pequeño de los tres. OpenAI lo describe como su modelo más eficiente para tareas concretas y de gran volumen, y lo vende a la mitad de precio que GPT-5.6 Luna, el modelo al que sustituye en su propio catálogo.A la mañana siguiente, pasamos el AI Extension Builder a GPT-6 Luna, para todas las apps, en los cuatro momentos en los que trabaja un modelo: entender tu petición, escribir el código de la sección, reescribirlo cuando pides un cambio y responder a las preguntas que haces sobre lo que ha construido.