Cómo crear tab bar iOS en Sketch e InVision

Aprende a crear una tab bar estilo iOS en Sketch, mantener íconos consistentes con Noun Project, convertir elementos en símbolos, y prototipar en InVision con barras fijas y fuentes correctas. Además, verás cómo previsualizar en un iPhone con Sketch Mirror y compartir el prototipo por URL o SMS.

¿Cómo diseñar una tab bar de iOS en Sketch con iconos consistentes?

Diseña una barra inferior oscura sin borde, divide el espacio en tres y coloca íconos de home, camera y profile con el mismo estilo y tamaño. Usa reglas y guías para precisión, aplica opacidades y realiza ajustes ópticos cuando sea necesario.

¿Cómo usar reglas y guías en Sketch?

• Activa las reglas con Control R, no Command R.
• Selecciona una forma para que la regla se “pegue” al espacio ocupado.
• Crea guías para dividir el área en tercios con exactitud.
• Recorta el artboard al tamaño final para encajar la barra.

¿Cómo optimizar íconos de Noun Project en la interfaz?

• Busca íconos en inglés: home, camera, profile.
• Arrastra y suelta desde la app: llegan como vectores.
• Agrupa y renombra: Home, Camera, Profile.
• Unifica tamaño desde el inspector. Por ejemplo, altura de 33 px.
• Realiza operaciones matemáticas en tamaños: 136/2, *3, etc.
• Aplica color blanco con 50 % de opacidad para estado inactivo.
• Ajusta ópticamente si un ícono “se ve” más grande.
• Resalta la acción principal: pinta la camera de verde.
• Copia y pega estilos para uniformidad de color y opacidad.

¿Cómo sincronizar, ajustar fuentes y simular barras fijas en InVision?

Sincroniza el archivo con InVision, soluciona fuentes faltantes y configura barras fijas superior e inferior. Esto permite probar el flujo con scroll independiente del contenido y las barras.

¿Cómo resolver fonts faltantes y renderizado?

• InVision puede avisar de fuentes faltantes.
• Ve a la carpeta del proyecto: assets/fonts.
• Arrastra las fuentes utilizadas, por ejemplo San Francisco (Display y demás variantes).
• InVision Sync sube las fuentes y la nube renderiza con la tipografía correcta.
• En ajustes del proyecto, marca la barra superior como transparente para evitar artefactos.

¿Cómo fijar header y tab bar en el prototipo?

• En modo build, activa “fixed header”.
• Previsualiza el scroll en preview mode para validar el comportamiento.
• Repite el proceso con la barra inferior.
• Ajusta píxeles o el alto de la barra si notas desbordes.

¿Cómo previsualizar en móvil, crear símbolos y compartir el prototipo?

Con Sketch Mirror en iPhone, ves cambios en tiempo real mientras diseñas. Convierte la tab bar en símbolo para reutilizarla en varios artboards. En InVision, comparte por URL o envía un SMS con el link e instálalo en el home screen como acceso directo.

¿Cómo usar Sketch Mirror para pruebas en tiempo real?

• Instala Sketch Mirror desde la App Store.
• En Sketch, pulsa el botón Mirror cuando veas el punto rojo de conexión.
• Conecta al iPhone y observa el artboard cargado.
• Edita elementos y mira los cambios al instante en el teléfono.
• Ten en cuenta la velocidad de la red para el refresco.

¿Cómo convertir la tab bar en símbolo reutilizable?

• Agrupa la barra inferior y nómbrala: tab bar.
• Presiona Create Symbol para convertirla.
• El símbolo se marca en púrpura y queda ligado entre artboards.
• Modifica el símbolo (p. ej., color de un ícono) y se actualiza en todas las pantallas.
• La sincronización con InVision refleja los cambios en tiempo real.

¿Cómo compartir el prototipo por URL o SMS?

• Copia la URL pública desde InVision para compartir.
• Envía un SMS desde InVision ingresando el número del destinatario.
• Abre el mensaje, toca el link y agrega al home screen.
• Cambia el nombre si lo deseas y crea el acceso directo.
• Interactúa: haz scroll y navega si hay más pantallas activas.

¿Tienes dudas sobre la creación de símbolos, las guías o el envío por SMS? Comparte tu pregunta y cuéntame qué parte del flujo de Sketch + InVision te gustaría profundizar.