Diseña y construye una app en Figma con Bravo Studio
Hoy quiero hablar directamente a los diseñadores UX-UI que están aquí. Sí, también a los que están en las esquinas. Acercaos porque esto os va a impresionar.
Si no eres diseñador profesional, pero te gusta experimentar con interfaces, lo que veremos aquí también te va a fascinar. No estoy exagerando.
Imagina que ese diseño de app que has dejado aparcado en tu carpeta de proyectos puede convertirse en realidad. Sin una línea de código. Sin plantillas predefinidas ni widgets. Desde cero y completamente personalizado.
El panorama del diseño ha cambiado. Quizás ya estés familiarizado con el movimiento NoCode, pero hoy vamos a profundizar en una herramienta revolucionaria: Bravo Studio. Esta herramienta liberará toda tu creatividad y te permitirá transformar tus ideas en aplicaciones funcionales.
¿Te interesa? Vamos a por ello.
Bravo funciona de manera simple. Diseñas la interfaz en Figma o Adobe XD y preparas el backend utilizando Airtable, Xano, Backendless o incluso Notion.
Luego, integras diseño y backend en Bravo Studio, y como resultado obtienes una app lista para publicarse en las tiendas de Android e iOS.
¿Parece sencillo? Lo es, pero depende de la complejidad que desees implementar.
Vamos a hacer un recorrido completo por la herramienta. Desde la idea inicial, el diseño en Figma, la creación de la base de datos en Airtable, hasta la conexión y configuración en Bravo Studio.
Diseñaremos una app para un restaurante. Aquí está el escenario:
Imagina que tienes una cadena de hamburgueserías artesanales en tu ciudad, con varios locales. Quieres mostrar tu carta, detallar ingredientes y alérgenos, compartir tus datos de contacto y notificar a tus clientes sobre promociones, horarios especiales o novedades en el menú. En resumen, quieres ir más allá de una simple ficha de Google My Business.
Ese será nuestro proyecto. Una app completa, desde el primer icono hasta una solución lista para publicarse en las tiendas de aplicaciones.
En este proceso aprenderemos:
Cómo organizar correctamente los diseños en Figma.
Qué son los containers y cómo estructurar jerarquías en ellos.
El uso de etiquetas en Bravo y su impacto en la funcionalidad de tu app.
La conexión entre Figma y Bravo Studio para probar tu diseño directamente en un móvil.
Cómo configurar bases de datos en Airtable y enlazarlas con Bravo.
Cómo vincular datos dinámicos con los elementos de la interfaz.
La integración de notificaciones push para comunicarte con los usuarios.
Un programa completo, ¿verdad? Todo esto lo haremos paso a paso mientras creamos nuestra app para la cadena de restaurantes.
Si eres dueño de un restaurante, estás de suerte. Al finalizar este tutorial, tendrás todas las herramientas para lanzar tu propia app y ofrecer a tus clientes un servicio premium. Puedes replicar este proyecto y adaptarlo a tus necesidades.
¿Listo para empezar?
Antes de arrancar, asumiremos que tienes nociones básicas de Figma o Adobe XD. Si no es así, no te preocupes. Aunque esto no es un curso de diseño, veremos técnicas suficientes para trabajar cómodamente con Bravo.
Primero, entenderemos cómo estructurar la información en Figma para que sea compatible con Bravo Studio. Todo comienza con los containers.
En el nivel superior, encontramos el top-level container, que representa una pantalla completa. Dentro de este frame, se agrupan diferentes secciones, cada una organizada en containers que contienen los elementos necesarios: textos, imágenes, botones, etc.
Los elementos pueden ser:
⁃ Estáticos: aparecen tal cual fueron diseñados.
⁃ Dinámicos: se conectan con una base de datos para mostrar información específica.
Todo debe estar correctamente nombrado y organizado en el índice de la izquierda para evitar errores de visualización.
Ahora que conocemos la organización básica, vamos a diseñar nuestra primera pantalla: la Home.
Definiremos colores, tipografías y elementos reutilizables para agilizar el proceso. Configuraremos un grid para alinear correctamente los componentes. Yo prefiero grids de 6 columnas con márgenes de 16 px y separación entre columnas de 8 px.
Una vez diseñados los componentes principales, comenzaremos con las pantallas y los containers. Primero, crearemos el frame principal para la Home utilizando el tamaño estándar de un iPhone 11 Pro/X.
En el Hero incluiremos el logo y el icono del menú de hamburguesa. Este container llevará la etiqueta [container:top-bar] para que permanezca fijo al hacer scroll.
Continuaremos diseñando botones estáticos para navegar entre las cartas de alimentos, utilizando AutoLayout para mantener todo alineado.
Seguiremos con secciones dinámicas como un slider para las hamburguesas destacadas del mes. Solo diseñaremos la primera card del slider, ya que el resto se generará automáticamente desde la base de datos.
Finalmente, añadiremos un listado de los restaurantes con sus imágenes, nombres, ubicaciones y un botón de reserva. Este botón, con la etiqueta [action:phone], permitirá llamar directamente al restaurante.
Con la Home diseñada, pasaremos al siguiente paso: Bravorizar nuestra app. Esto implica importar el diseño a Bravo Studio, probarlo en el móvil y realizar ajustes en tiempo real. Pero eso lo veremos más adelante.
¿Estás listo para dar vida a tu app? Vamos allá.
Post relacionados
