Workshop: FIGMA - Firebase Studio - Deploy

De Figma Make a una app funcional con Firestore en minutos

Contenido del Workshop

Objetivo del Workshop

Aprender el flujo completo de desarrollo moderno:

Figma Make -> GitHub -> Firebase Studio -> Firestore -> Deploy

Elige UNO de los 5 proyectos y sigue los pasos.

Guia: Configurar Firebase Console

Esta guia aplica para TODOS los proyectos. Consultala cuando llegues al paso 3 de cualquier proyecto.
Paso a paso detallado
  1. Navega a la Consola de Firebase: Abre la Consola de Firebase y selecciona tu proyecto (o crea uno nuevo).
  2. Configuracion del Proyecto: En la esquina superior izquierda, haz clic en el icono de "Configuracion" (el engranaje) y luego selecciona "Configuracion del proyecto".
  3. Tus Aplicaciones: En la pestana "General", desplazate hacia abajo hasta la seccion "Tus aplicaciones". Aqui veras una lista de las aplicaciones registradas en tu proyecto.
  4. Selecciona tu Aplicacion Web: Si ya has registrado una aplicacion web, haz clic en ella. Si no, necesitaras registrar una primero haciendo clic en el icono de la web ( </> ) y siguiendo los pasos.
  5. Obten el Snippet de Configuracion: Una vez que hayas seleccionado tu aplicacion web, busca la opcion "Config" en el panel de snippet del SDK de Firebase.
  6. Copia el Objeto de Configuracion: Copia todo el snippet de configuracion que se muestra. Este sera el objeto firebaseConfig que necesitas.
  7. Crear Base de Datos: Ve a "Firestore Database" en el menu lateral y haz clic en "Crear base de datos". Selecciona modo test para desarrollo.
Ejemplo de firebaseConfig
const firebaseConfig = {
  apiKey: "AIzaSy...",
  authDomain: "tu-proyecto.firebaseapp.com",
  projectId: "tu-proyecto",
  storageBucket: "tu-proyecto.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:abc123"
};

Este objeto lo pegas en el chat de Gemini en Firebase Studio.

Proyecto 1: "Confesiones Anonimas del Bootcamp"

Concepto

Landing donde las alumnas pueden dejar mensajes anonimos sobre su experiencia en el bootcamp (miedos, logros, consejos).

1. FIGMA (5-7 min)

Prompt para Figma Make:
Crea una landing page minimalista para "Confesiones del Bootcamp".
- Header con titulo "Confiesa tu Verdad" en tipografia bold
- Formulario simple con:
  * Campo de texto multilinea para la confesion (placeholder: "Escribe tu confesion anonima...")
  * Boton "Enviar Confesion" en color morado (#8B5CF6)
- Seccion de cards mostrando 3 confesiones de ejemplo
- Paleta: fondo crema (#FFF8E7), texto oscuro (#1F2937)
- Estilo: bordes redondeados, sombras suaves
PERSONALIZA TU PROYECTO:
  • Quieres cambiar colores? Modifica la paleta en el prompt
  • Prefieres otro tema? Cambialo (ej: "Miedos del primer dia", "Logros de la semana")
  • Quieres mas campos? Anadelos al formulario
  • Sientete libre de experimentar con el prompt!
Exportar codigo:

Descargar como HTML/CSS/JS -> Subir a GitHub repo (nombre: confesiones-bootcamp)

2. FIREBASE STUDIO (3-5 min)

Import from GitHub
  1. Click en "Import repository"
  2. Seleccionar confesiones-bootcamp
  3. Autorizar acceso (codigo de 6 digitos)
Prompt a Gemini en Firebase Studio:
Necesito que este formulario guarde las confesiones en Firestore.
Coleccion: "confesiones"
Campos: { texto: string, timestamp: serverTimestamp }
Muestra las ultimas 5 confesiones en las cards automaticamente.

3. FIREBASE CONSOLE (2-3 min)

Nombre del proyecto: confesiones-bootcamp-project

-> Ver guia detallada de configuracion

Prompt para Gemini con tu config:

Aqui esta mi configuracion de Firebase:
[PEGAR firebaseConfig]
Configura la conexion a Firestore con esta config.

4. VERIFICAR (1-2 min)

Prompt a Gemini:
Verifica que el formulario este guardando correctamente en Firestore.
Anade console.log para debug.

Probar: Rellenar formulario en Preview -> Ir a Console Firestore -> Ver documento creado

5. DEPLOY (1 min)

Prompt a Gemini:
Despliega esta app en Firebase Hosting.

O manualmente: Click en "Publish" en Firebase Studio

Proyecto 2: "Micro-CV Generacional"

Concepto

Generador de CVs ultra-cortos estilo Instagram bio. El usuario rellena 5 preguntas, se guarda en Firestore y puede ver CVs de otras personas.

1. FIGMA (5-7 min)

Prompt para Figma Make:
Landing "Mi Micro-CV" estilo tarjeta personal.
- Header con titulo "Presentate en 5 lineas"
- Formulario centrado con 5 campos:
  * Nombre (input corto)
  * Rol tech que aspiras (ej: "Frontend Developer") (input corto)
  * Superpoder tech (ej: "React magica") (input corto)
  * Tecnologia favorita (input corto)
  * Emoji que te representa (selector de 5 emojis: laptop, rocket, palette, coffee, fire)
  * Boton "Crear Mi Card"
- Grid de 6 micro-CVs de ejemplo como tarjetas pequenas
- Paleta: azul electrico (#3B82F6), blanco, gris claro
- Estilo: cards con bordes gruesos, tipografia sans-serif
PERSONALIZA TU PROYECTO:
  • Quieres otras preguntas? Cambialas (ej: "Pelicula tech favorita", "Lenguaje que quieres aprender")
  • Prefieres otro estilo visual? Modifica la paleta y tipografia
  • Quieres anadir fotos de perfil? Anade un campo de imagen
  • Experimenta con diferentes combinaciones!
Exportar codigo:

Descargar como HTML/CSS/JS -> Subir a GitHub repo (nombre: micro-cv)

2. FIREBASE STUDIO (3-5 min)

Import from GitHub
  1. Click en "Import repository"
  2. Seleccionar micro-cv
  3. Autorizar acceso (codigo de 6 digitos)
Prompt a Gemini en Firebase Studio:
El formulario debe guardar en Firestore:
Coleccion: "micro_cvs"
Campos: {
  nombre: string,
  rol: string,
  superpoder: string,
  tecnologia: string,
  emoji: string,
  fecha: serverTimestamp
}
Muestra los ultimos 12 micro-CVs en el grid automaticamente.

3. FIREBASE CONSOLE (2-3 min)

Nombre del proyecto: micro-cv-project

-> Ver guia detallada de configuracion

Prompt para Gemini con tu config:

Aqui esta mi configuracion de Firebase:
[PEGAR firebaseConfig]
Configura la conexion a Firestore con esta config.

4. VERIFICAR (1-2 min)

Prompt a Gemini:
Verifica que el formulario este guardando correctamente en Firestore.
Anade console.log para debug.

Probar: Rellenar formulario en Preview -> Ir a Console Firestore -> Ver documento creado

5. DEPLOY (1 min)

Prompt a Gemini:
Despliega esta app en Firebase Hosting.

O manualmente: Click en "Publish" en Firebase Studio

Proyecto 3: "Playlist Emocional Colaborativa"

Concepto

Landing donde la gente recomienda canciones segun su estado de animo.

1. FIGMA (5-7 min)

Prompt para Figma Make:
Landing "Soundtrack del Dia" para recomendar canciones.
- Header con gradiente de rosa a naranja
- Formulario centrado:
  * Dropdown "Mi mood hoy": [Motivada, Cansada, Euforica, Nostalgica, En Zona]
  * Input "Cancion + Artista" (placeholder: "Levitating - Dua Lipa")
  * Boton "Anadir a la Playlist"
- Cards horizontales mostrando 4 recomendaciones por mood
- Paleta: gradientes vibrantes, texto blanco
- Estilo: neumorfico, bordes redondeados extremos
PERSONALIZA TU PROYECTO:
  • Quieres otros moods? Anade mas opciones (ej: "Concentrada", "Feliz", "Melancolica")
  • Prefieres recomendar peliculas o libros? Cambia el concepto
  • Quieres anadir genero musical? Anade un campo extra
  • Dale tu toque personal!
Exportar codigo:

Descargar como HTML/CSS/JS -> Subir a GitHub repo (nombre: playlist-emocional)

2. FIREBASE STUDIO (3-5 min)

Import from GitHub
  1. Click en "Import repository"
  2. Seleccionar playlist-emocional
  3. Autorizar acceso (codigo de 6 digitos)
Prompt a Gemini en Firebase Studio:
Guarda en Firestore:
Coleccion: "playlist"
Campos: { mood: string, cancion: string, timestamp: serverTimestamp }
Filtra las cards por mood seleccionado en un dropdown.

3. FIREBASE CONSOLE (2-3 min)

Nombre del proyecto: playlist-emocional-project

-> Ver guia detallada de configuracion

Prompt para Gemini con tu config:

Aqui esta mi configuracion de Firebase:
[PEGAR firebaseConfig]
Configura la conexion a Firestore con esta config.

4. VERIFICAR (1-2 min)

Prompt a Gemini:
Verifica que el formulario este guardando correctamente en Firestore.
Anade console.log para debug.

Probar: Rellenar formulario en Preview -> Ir a Console Firestore -> Ver documento creado

5. DEPLOY (1 min)

Prompt a Gemini:
Despliega esta app en Firebase Hosting.

O manualmente: Click en "Publish" en Firebase Studio

Proyecto 4: "Banco de Errores Epicos"

Concepto

Repositorio de errores de codigo divertidos que las alumnas han encontrado, para aprender juntas.

1. FIGMA (5-7 min)

Prompt para Figma Make:
Landing "Mis Bugs Legendarios" estilo GitHub issues pero divertido.
- Header con icono de bug y titulo "Errores que me hicieron llorar"
- Formulario:
  * Input "Mensaje de error" (corto)
  * Textarea "Que intentabas hacer" (3 lineas)
  * Boton "Compartir mi Drama"
- Lista de 5 errores como cards verticales con borde rojo
- Paleta: rojo suave (#EF4444), gris oscuro (#374151), blanco
- Estilo: monoespaciado para el codigo de error
PERSONALIZA TU PROYECTO:
  • Quieres anadir soluciones? Anade un campo "Como lo solucionaste"
  • Prefieres un tono mas serio? Cambia el copy a "Repositorio de Debugging"
  • Quieres categorias de errores? Anade un dropdown (Frontend, Backend, Database, etc.)
  • Hazlo tuyo!
Exportar codigo:

Descargar como HTML/CSS/JS -> Subir a GitHub repo (nombre: bugs-epicos)

2. FIREBASE STUDIO (3-5 min)

Import from GitHub
  1. Click en "Import repository"
  2. Seleccionar bugs-epicos
  3. Autorizar acceso (codigo de 6 digitos)
Prompt a Gemini en Firebase Studio:
Firestore:
Coleccion: "bugs_epicos"
Campos: { error: string, contexto: string, fecha: serverTimestamp }
Muestra los ultimos 10 bugs ordenados por fecha.

3. FIREBASE CONSOLE (2-3 min)

Nombre del proyecto: bugs-epicos-project

-> Ver guia detallada de configuracion

Prompt para Gemini con tu config:

Aqui esta mi configuracion de Firebase:
[PEGAR firebaseConfig]
Configura la conexion a Firestore con esta config.

4. VERIFICAR (1-2 min)

Prompt a Gemini:
Verifica que el formulario este guardando correctamente en Firestore.
Anade console.log para debug.

Probar: Rellenar formulario en Preview -> Ir a Console Firestore -> Ver documento creado

5. DEPLOY (1 min)

Prompt a Gemini:
Despliega esta app en Firebase Hosting.

O manualmente: Click en "Publish" en Firebase Studio

Proyecto 5: "Metas de Codigo 2025"

Concepto

Tablero publico de objetivos tech de las alumnas para motivarse mutuamente.

1. FIGMA (5-7 min)

Prompt para Figma Make:
Landing "Mis Metas Tech 2025" estilo vision board.
- Header con titulo inspirador "Este ano aprendo..."
- Formulario simple:
  * Input "Tu nombre"
  * Input "Meta tech" (ej: "Dominar TypeScript")
  * Selector de categoria: [Frontend, Backend, DevOps, IA, Movil]
  * Boton "Publicar Meta"
- Grid de 9 cards con metas de ejemplo, color segun categoria
- Paleta: verde menta (#10B981), amarillo suave, blanco
- Estilo: cards con sombra, iconos de categoria
PERSONALIZA TU PROYECTO:
  • Quieres anadir deadline? Anade un campo de fecha
  • Prefieres metas trimestrales? Cambia el titulo a "Q1 2025"
  • Quieres votacion de metas? Anade un boton de "Me inspira"
  • Se creativa!
Exportar codigo:

Descargar como HTML/CSS/JS -> Subir a GitHub repo (nombre: metas-tech-2025)

2. FIREBASE STUDIO (3-5 min)

Import from GitHub
  1. Click en "Import repository"
  2. Seleccionar metas-tech-2025
  3. Autorizar acceso (codigo de 6 digitos)
Prompt a Gemini en Firebase Studio:
Firestore:
Coleccion: "metas_2025"
Campos: { nombre: string, meta: string, categoria: string, fecha: serverTimestamp }
Agrupa las cards por categoria visualmente.

3. FIREBASE CONSOLE (2-3 min)

Nombre del proyecto: metas-tech-2025-project

-> Ver guia detallada de configuracion

Prompt para Gemini con tu config:

Aqui esta mi configuracion de Firebase:
[PEGAR firebaseConfig]
Configura la conexion a Firestore con esta config.

4. VERIFICAR (1-2 min)

Prompt a Gemini:
Verifica que el formulario este guardando correctamente en Firestore.
Anade console.log para debug.

Probar: Rellenar formulario en Preview -> Ir a Console Firestore -> Ver documento creado

5. DEPLOY (1 min)

Prompt a Gemini:
Despliega esta app en Firebase Hosting.

O manualmente: Click en "Publish" en Firebase Studio

Checklist General del Workshop

FIGMA
  • Abrir Figma Make
  • Pegar prompt del proyecto (personalizalo si quieres)
  • Descargar codigo
  • Subir a GitHub (repo publico)
FIREBASE STUDIO
  • Import repository
  • Autorizar GitHub (codigo de 6 digitos)
  • Prompt a Gemini para configurar Firestore
FIREBASE CONSOLE
  • Crear proyecto Firebase
  • Ir a Configuracion -> Web app
  • Copiar firebaseConfig
  • Crear Firestore Database (modo test)
  • Pegar config en Gemini (Firebase Studio)
VERIFICAR Y DEPLOY
  • Rellenar formulario en Preview
  • Ver dato en Firestore Console
  • Click "Publish" o prompt a Gemini
  • Copiar URL publica

Recuerda

Este workshop es para EXPERIMENTAR!

El objetivo es que entiendas el flujo completo:

Figma -> GitHub -> Firebase Studio -> Firestore -> Deploy

Creado con amor por Irina Ichim

Workshop de Firebase Studio y Desarrollo Moderno

Mucha suerte y a disfrutar del workshop!

^