Has hecho tu primer prompt y ahora estás listo para lo que sigue. Aquí hay algunos casos de uso comunes y necesidades que siguen a la generación inicial de tu app o prototipo funcional.
- Soporte para múltiples usuarios
- Cambia a Figma Design
- Comparte tu trabajo
- Obtén tu código
- Explica el código
- Planifica antes de hacer cambios
Soporte para múltiples usuarios
Muchas apps necesitarán admitir múltiples usuarios. Por ejemplo:
- Una app que permita a los usuarios completar y compartir tablas de torneos
- Una app de redes sociales donde los usuarios inician sesión, tienen perfiles y publican
- Un juego que tiene una tabla de clasificación global o alguna funcionalidad multiusuario
En todos estos casos, usarás Supabase para proporcionar un backend para tu app que permita a los usuarios iniciar sesión y almacenar datos como cuentas, publicaciones, puntajes u otros contenidos.
Prompt de ejemplo
Quiero que mi app soporte múltiples usuarios. Usa Supabase para proporcionar una forma para que los usuarios creen y accedan a sus cuentas. Implementa la funcionalidad de backend adecuada por usuario.Prueba en este archivo de la Comunidad
Para probar el ejemplo del prompt, remix este archivo de la Comunidad y pega el prompt en el chat de IA. Puedes modificar el prompt para experimentar con funcionalidades adicionales.
App de ejemplo: Markdown Notes
¿Por qué funciona esto?
El ejemplo de prompt explica claramente a Figma Make que deseas agregar un backend para soportar múltiples usuarios. El prompt dispara el flujo de backend de Supabase. Debido a la redacción, Figma Make considera el contexto de tu conversación existente y construye el soporte de backend adecuado para la app en la que estás trabajando.
Cambia a Figma Design
Tu app está en un estado que quieres llevar a Figma Design. En este caso, usarás la función de Copiar diseño. En la vista previa de tu app, llega a la vista que deseas copiar, luego sigue las instrucciones en Copiar una vista previa de Figma Make como capas de diseño.
Actualmente, no puedes obtener una versión funcional de tu archivo Figma Make en Figma Design, y los cambios que realizas en las capas de Figma Design no se aplican de vuelta a tu archivo Figma Make.
Prueba en este archivo de la Comunidad
Para probar la función de Copiar diseño, remix este archivo de la Comunidad. Puedes añadir elementos al lienzo, mover capas y expandir el lienzo para llenar la vista. Prueba la función de Copiar diseño con diferentes estados del lienzo y pega las capas en Figma Design para ver el resultado.
App de ejemplo: Canvas Editor
¿Por qué funciona esto?
Cuando usas la función Copiar diseño, se copia el estado actual de la vista previa en tu archivo de Figma Make. Eso significa que vas a diferentes partes de tu app, como expandir un menú o abrir una superposición, y luego copias ese estado de la vista previa a Figma Design como capas que puedes editar.
Comparte tu trabajo
Estás listo para compartir el trabajo que has hecho en Figma Make. Hay varios enfoques diferentes para compartir según tu necesidad:
- Compartir el archivo completo de Figma Make: Si deseas invitar a tus compañeros de equipo a ver tu historial de chats y colaborar contigo, puedes compartir el archivo de Figma Make en sí.
- Permitir que otros iteren usando tu trabajo: Si deseas permitir que tus compañeros de equipo iteren de una manera que no impacte tu archivo original, puedes publicar el archivo Figma Make como una plantilla.
- Mostrar una versión funcional internamente: Si deseas ocultar el historial del chat y proporcionar la experiencia funcional de tu app o prototipo funcional a un número limitado de personas, puedes publicar una versión protegida por contraseña de tu app, o publicarla solo para tu organización.
- Compartir tu trabajo en internet: Si estás listo para compartir el resultado de tu trabajo con todos, puedes publicar tu app en la web en vivo.
Obtén tu código
En algunos casos, es posible que desees llevar tu código a editores o sistemas fuera de Figma. Por ejemplo, puedes desear mover el código a un repositorio de GitHub, o modificar el código en VS Code u otro IDE.
Hay dos enfoques para obtener tu código:
- En el editor de código para tu archivo de Figma Make, descarga el código: Cuando descargas el código de Figma Make, el producto crea un .zip archivo que contiene el código de tu app. Puedes descargar el .zip archivo y extraer el contenido en el IDE de tu preferencia. Los cambios que realices en el código no se pueden volver a cargar automáticamente en Figma Make, aunque puedes copiar y pegar manualmente tus cambios en la interfaz o compartir los cambios en el chat de IA.
- Envia el código a GitHub: Todos los usuarios de Figma Make pueden enviar el código a GitHub. Cuando usas esta función, Figma Make crea un repositorio de GitHub en tu cuenta u organización de GitHub que corresponde al archivo de Figma Make en el que estás. Luego puedes enviar los cambios de Figma Make a ese repositorio mientras continúas trabajando.
Explica el código
A veces quieres entender mejor lo que hace el código de tu app. Puedes pedirle a Figma Make que explique el código sin hacer ningún cambio real a tu app.
Prompt de ejemplo
Explícame el código de esta app. Comienza a un nivel alto.Prueba en este archivo de la Comunidad
Remix este archivo de la Comunidad y prueba el prompt de ejemplo para obtener una explicación del código en el archivo de Figma Make.
App de ejemplo: Tetromino Game
Resultado de ejemplo
Tetromino Game - Explicación del código
Arquitectura de alto nivel
Este es un juego clásico al estilo Tetris construido con React y TypeScript. La app sigue una arquitectura basada en componentes con tres partes principales:
1. Estructura del componente
"App.tsx" - El controlador principal del juego que contiene toda la lógica y el estado del juego
"GameBoard.tsx" - Componente visual que representa el campo de juego de 10x20
"NextPiece.tsx" - Componente de vista previa que muestra el siguiente tetrominó
"types.ts" - Interfaces de TypeScript para la seguridad de tipos
2. Conceptos centrales del juego
El juego gestiona varias piezas clave de estado:
Estado del tablero: una cuadrícula de 20x10 celdas, cada una vacía o llena con un bloque de color
Pieza actual: el tetrominó activo que cae, con su forma, color y posición
Próxima pieza: vista previa de lo que viene a continuación
Estadísticas del juego: puntuación, nivel, líneas despejadas
Estado del juego: jugando, pausado o juego terminado
3. Flujo del bucle del juego
```
Iniciar partida
↓
Nueva pieza aparece
↓
Mover abajo (cada X ms basado en el nivel)
↓
Revisión de colisiones
↓
Si hay colisión → Fusionar pieza con el tablero → Limpiar líneas completadas → Aparece nueva pieza
Si no hay colisión → Continuar moviendo
↓
Repetir
```
---
Desglose detallado
App.tsx - El motor del juego
Constantes y datos
Despliegue de TETROMINÓS: define las 7 formas clásicas (I, O, T, S, Z, J, L) con sus matrices de rotación y colores
ANCHO/ALTO DEL TABLERO: 10 columnas × 20 filas
Variables clave del estado
```typescript
tablero // Array 2D de celdas
currentPiece // Forma del tetromin óactivo
currentPosition // Coordenadas {x, y}
nextPiece // Vista previa de la pieza
puntuación, nivel, líneas despejadas
juego en curso, juego terminado
```
Funciones centrales
1. Detección de colisión ("checkCollision")
Prueba si una pieza en una posición dada se solaparía con:
Límites del tablero (izquierda, derecha, parte inferior)
Bloques ya colocados
2. Movimiento de la pieza ("moveLeft", "moveRight", "moveDown")
Intenta mover la pieza en la dirección
Solo actualiza la posición si no se detecta colisión
3. Rotación ("rotate")
Transpone la matriz de forma e invierte las filas (90° en sentido horario)
Solo rota si la nueva orientación no colisiona
4. Fusión y limpieza ("mergePieceToBoard", "clearLines")
Cuando una pieza aterriza, se agrega permanentemente al tablero
"clearLines" verifica filas completas (todas las 10 celdas llenas)
Elimina líneas completas y agrega filas vacías en la parte superior
Puntuación: 1 línea = 100 puntos, 2 = 300 puntos, 3 = 500 puntos, 4 = 800 puntos (multiplicado por nivel)
5. Caída rápida ("hardDrop")
Deja caer instantáneamente la pieza a la posición válida más baja
Útil para un juego rápido
Bucle del juego (useEffect)
```typescript
setInterval(() => moveDown(), velocidad)
// La velocidad disminuye a medida que el nivel aumenta
// Limpia el intervalo cuando está pausado/juego terminado
```
Controles de teclado (useEffect)
Teclas de flecha para movimiento
Barra espaciadora/flecha arriba para rotación
Enter para caída rápida
---
GameBoard.tsx - La pantalla
Este componente es puramente visual:
Toma props: estado actual del tablero + pieza activa
Los combina: crea un tablero de visualización temporal superponiendo la pieza activa sobre el tablero estático
Rinde la cuadrícula: usa CSS Grid con celdas de 30px
Estilización: cada celda muestra su color si está llena, gris oscuro si está vacía
```typescript
// Pseudocódigo
displayBoard = [...tablero]
Superpone currentPiece en displayBoard en su posición
Renderiza 200 celdas (10×20) con colores apropiados
```
---
NextPiece.tsx - La vista previa
Cuadrícula simple de 4×4 mostrando el próximo tetrominó:
Celdas más pequeñas (20px vs. 30px)
Centra la forma de la pieza dentro de la cuadrícula
Mismo código de colores que el tablero principal
---
types.ts - Definiciones de tipos
```typescript
Bloque: { filled: boolean, color: string } // Celda única
Tetromino: { shape: number[][], color: string } // Definición de pieza
Posición: { x: number, y: number } // Coordenadas
```
---
Decisiones clave de diseño
Actualizaciones de estado inmutables: siempre crea nuevos arrays/objetos en lugar de mutar
Hooks de devolución de llamada: usa "useCallback" para prevenir renderizaciones innecesarias
Separación de responsabilidades: los componentes de visualización no contienen lógica
Bucle del juego vía setInterval: caída de pieza basada en tiempo simple
Progresión de nivel: cada 10 líneas aumenta el nivel y acelera el juego
¡La arquitectura es limpia y mantenible: la lógica del juego vive en App.tsx mientras que el renderizado se delega a componentes especializados!¿Por qué funciona esto?
Figma Make es capaz de leer los archivos de código que crea o edita. Cuando se le solicita explicar el código de una app, Figma Make es capaz de resumir el contenido de los archivos de código, así como de proporcionar explicaciones detalladas sobre cómo funciona el código.
Planifica antes de hacer cambios
Cuando te enfrentas a problemas en tu app, como que Figma Make agregue funcionalidad de depuración en el código o intente ejecutar cambios grandes y complejos, es posible que desees instruir a Figma Make para planificar los cambios primero.
Prompt de ejemplo
Primer prompt:
No hagas ningún cambio en el código de la app. Crea un archivo llamado plan.md. En plan.md, escribe un plan para implementar los cambios que quieres hacer.Segundo prompt:
Usa la última versión del plan en plan.md para hacer cambios en la app.Prueba en este archivo de la Comunidad
Remix este archivo de la Comunidad y envía el primer prompt en el chat de IA con algunos cambios específicos para que Figma Make los implemente. Por ejemplo, dile a Figma Make que quieres añadir la capacidad de guardar e importar tablas de torneos.
Luego, en el editor de código, experimenta haciendo cambios en el archivo plan.md que Figma Make crea.
Finalmente, envía el segundo prompt en el chat de IA para que Figma Make implemente los cambios detallados en el archivo plan.md.
App de ejemplo: tablas de torneos
¿Por qué funciona esto?
Figma Make es capaz de crear archivos específicos cuando se le instruye hacerlo. El archivo plan.md contendrá un plan que Figma Make puede ejecutar para realizar cambios complejos en tu app. La ventaja de crear el archivo plan.md antes de que Figma Make ejecute los cambios es que puedes validar el plan en el editor de código, y hacer tus propias modificaciones o adiciones al plan.
El prompt subsiguiente entonces instruye a Figma Make para que use el plan, incluyendo cualquier cambio que hayas hecho.