Has creado tu primera indicación y ya estás a punto para lo siguiente. A continuación, se indican algunos casos de uso y necesidades comunes que surgen tras la generación inicial de tu aplicación o prototipo funcional.
- Admite múltiples usuarios
- Pasa a Figma Design
- Comparte tu trabajo
- Obtén tu código
- Explica el código
- Planifica antes de hacer cambios
Admite múltiples usuarios
Muchas aplicaciones tendrán que admitir múltiples usuarios. Por ejemplo:
- Una aplicación que permite a los usuarios rellenar y compartir cuadros de torneos
- Una aplicación de redes sociales donde los usuarios inician sesión, tienen perfiles y publican contenido
- Un juego que tiene un marcador global o alguna funcionalidad multiusuario
En todos estos casos, usarás Supabase como backend para tu aplicación, que permite a los usuarios iniciar sesión y almacena datos como cuentas, publicaciones, puntuaciones u otros contenidos.
Indicación de ejemplo
Quiero que mi aplicación admita múltiples usuarios. Utiliza Supabase para que los usuarios puedan crear cuentas e iniciar sesión en ellas. Implementa la funcionalidad de backend adecuada para cada usuario.Pruébalo en este archivo de la comunidad
Para probar la indicación de ejemplo, remezcla este archivo de la comunidad y pega la indicación en el chat de IA. Puedes modificar la indicación para probar funciones adicionales.
Aplicación de ejemplo: notas de Markdown
Por qué funciona
La indicación de ejemplo explica claramente a Figma Make que deseas añadir un backend para admitir múltiples usuarios. La indicación desencadena el flujo del backend de Supabase. Debido a su formulación, Figma Make tiene en cuenta el contexto de tu conversación actual y crea el soporte de backend adecuado para la aplicación en la que estás trabajando.
Pasa a Figma Design
Tu aplicación está en un estado que deseas llevar a Figma Design. En este caso, utilizarás la función Copiar diseño. En la vista previa de tu aplicación, ve a la vista que deseas copiar y 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 de Figma Make en Figma Design, y los cambios que realices en las capas de Figma Design no se aplicarán a tu archivo de Figma Make.
Pruébalo en este archivo de la comunidad
Para probar la función Copiar diseño, remezcla este archivo de la comunidad. Puedes añadir elementos al lienzo, mover capas y ampliar el lienzo para que ocupe toda la vista. Prueba la función Copiar diseño con diferentes estados del lienzo y pega las capas en Figma Design para ver el resultado.
Aplicación de ejemplo: editor de lienzos
Por qué funciona
Cuando usas la función Copiar diseño, se copia el estado actual de la vista previa en tu archivo Figma Make. Esto significa que puedes ir a diferentes partes de tu aplicación, como expandir un menú o abrir una superposición, y después copiar ese estado de la vista previa a Figma Design como capas que puedes editar.
Comparte tu trabajo
Ya puedes compartir el trabajo que has realizado en Figma Make. Existen varios métodos para compartir, según tus necesidades:
- Comparte todo el archivo de Figma Make: si deseas invitar a tus compañeros de equipo a ver tu historial de chat y colaborar contigo, puedes compartir el archivo de Figma Make en sí.
- Deja que otros iteren usando tu trabajo: si deseas permitir que tus compañeros de equipo iteren sin afectar tu archivo original, puedes publicar el archivo de Figma Make como una plantilla.
- Muestra una versión funcional internamente: si deseas ocultar el historial de chat y ofrecer la experiencia funcional de tu aplicación o prototipo funcional a un número limitado de personas, puedes publicar una versión protegida con contraseña de tu aplicación, o publicarla solo para tu organización.
- Comparte tu trabajo en internet: si estás a punto para compartir el resultado de tu trabajo con todo el mundo, puedes publicar tu aplicación en la web en tiempo real.
Obtén tu código
En algunos casos, es posible que desees introducir tu código en editores o sistemas externos a Figma, como por ejemplo, trasladar el código a un repositorio GitHub o modificarlo en VS Code u otro IDE.
Hay dos formas de obtener tu código:
- En el editor de código para tu archivo de Figma Make, descarga el código: cuando descargas código de Figma Make, el producto crea un archivo .zip que contiene el código de tu aplicación. Puedes descargar el archivo .zip y extraer el contenido en el IDE que prefieras. Los cambios que realices al código no se pueden enviar automáticamente de nuevo a Figma Make, aunque puedes copiar y pegar manualmente tus cambios en la interfaz o compartirlos en el chat de IA.
- Envia el código a GitHub: todos los usuarios de Figma Make pueden enviar código a GitHub. Cuando usas esta función, Figma Make crea un repositorio de GitHub en tu cuenta u organización GitHub que corresponde al archivo de Figma Make en el que te encuentras. A continuación, puedes enviar los cambios desde Figma Make a ese repositorio mientras sigues trabajando.
Explica el código
En ocasiones, deseas comprender mejor qué hace el código de tu aplicación. Puedes indicar a Figma Make que te explique el código sin realizar cambios reales en tu aplicación.
Indicación de ejemplo
Explícame el código de esta aplicación. Comienza por un nivel alto.Pruébalo en este archivo de la comunidad
Remezcla este archivo de la comunidad y prueba la indicación de ejemplo para obtener una explicación del código en el archivo de Figma Make.
Aplicación de ejemplo: juego de Tetromino
Resultado de ejemplo
Juego de Tetromino: explicación del código
Arquitectura de alto nivel
Este es un juego clásico estilo Tetris creado con React y TypeScript. La aplicación sigue una arquitectura basada en componentes con tres partes principales:
1. Estructura de componentes
`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 próximo tetromino
`types.ts` : interfaces de TypeScript para la seguridad de tipos
2. Conceptos centrales del juego
El juego gestiona varios elementos clave del estado:
Estado del tablero: una cuadrícula de 20x10 de celdas, cada una de ellas vacía o rellenada con un bloque de color
Pieza actual: el tetromino 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 completadas
Estado del juego: en juego, en pausa o juego terminado
3. Flujo del bucle del juego
```
Iniciar juego
↓
Generar una pieza nueva
↓
Mover hacia abajo (cada X ms según el nivel)
↓
Comprobar colisión
↓
Si hay colisión → Fusionar pieza al tablero → Borrar líneas completadas → Generar una pieza nueva
Si no hay colisión → Continuar moviendo
↓
Repetir
```
---
Desglose detallado
App.tsx: el motor del juego
Constantes y datos
Matriz TETROMINOES: define las 7 formas clásicas (I, O, T, S, Z, J, L) con sus matrices de rotación y colores
TABLERO_ANCHURA/ALTURA: 10 columnas × 20 filas
Variables clave del estado
```TypeScript
tablero // Matriz 2D de celdas
piezaActual // Forma de tetromino activa
posiciónActual // {x, y} coordenadas
próximaPieza // Vista previa de la pieza
puntuación, nivel, líneas completadas
enJuego, juegoTerminado
```
Funciones principales
1. Detección de colisiones (`checkCollision`)
Comprueba si una pieza en una posición determinada se solaparía con:
los límites del tablero (izquierda, derecha, abajo)
bloques ya colocados
2. Movimiento de piezas (`moveLeft`, `moveRight`, `moveDown`)
Intenta mover la pieza en una dirección
Solo actualiza la posición si no se detecta una colisión
3. Rotación (`rotate`)
Transpone la matriz de forma e invierte las filas (90° en el sentido de las agujas del reloj)
Solo gira si la nueva orientación no colisiona
4. Fusionar y eliminar (`mergePieceToBoard`, `clearLines`)
Cuando una pieza aterriza, se añade permanentemente al tablero
`clearLines` comprueba si hay filas completas (las 10 celdas rellenadas)
Elimina las líneas completadas y añade filas vacías en la parte superior
Puntuación: 1 línea = 100 pts, 2 = 300 pts, 3 = 500 pts, 4 = 800 pts (multiplicado por nivel)
5. Caída brusca (`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(), speed)
// La velocidad disminuye a medida que aumenta el nivel
// Elimina el intervalo cuando se detiene o se acaba el juego
```
Controles del teclado (useEffect)
Teclas de flecha para moverse
Barra espaciadora/flecha arriba para girar
Intro para caída brusca
---
GameBoard.tsx: la pantalla
Este componente es puramente visual:
Toma los accesorios: estado actual del tablero + pieza activa
Los combina: crea un tablero de visualización temporal superponiendo la pieza activa sobre el tablero estático
Renderizado de la cuadrícula: usa CSS Grid con celdas de 30 px
Estilo: cada celda muestra su color si está llena, gris oscuro si está vacía
```TypeScript
// Pseudocódigo
displayBoard = [...tablero]
Superponer la pieza actual sobre el tablero de visualización en su posición
Renderizado de 200 celdas (10×20) con colores apropiados
```
---
NextPiece.tsx: la vista previa
Cuadrícula simple de 4×4 que muestra el próximo tetromino:
Celdas más pequeñas (20 px vs 30 px)
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 crean nuevas matrices/objetos en lugar de mutar
Ganchos de devolución de llamada: usan `useCallback` para evitar repeticiones innecesarias de renderizado
Separación de problemas: los componentes de visualización no contienen lógica
Bucle del juego mediante setInterval: caída de piezas simple en función del tiempo
Progresión de niveles: cada 10 líneas aumenta el nivel y se acelera el juego
La arquitectura es clara y fácil de mantener: la lógica del juego reside en App.tsx mientras que el renderizado se delega a componentes especializados.Por qué funciona
Figma Make es capaz de leer los archivos de código que crea o edita. Cuando se le indica que explique el código de una aplicación, Figma Make es capaz de resumir el contenido de los archivos de código, además de dar explicaciones detalladas sobre cómo funciona el código.
Planifica antes de hacer cambios
Cuando tengas que resolver problemas en tu aplicación, como por ejemplo cuando Figma Make añade funciones de depuración al código o intenta ejecutar cambios importantes y complejos, es posible que quieras indicarle a Figma Make que planifique primero los cambios.
Indicación de ejemplo
Primera indicación:
No realices ningún cambio en el código de la aplicación. Crea un archivo llamado plan.md. En plan.md, escribe un plan para implementar los cambios que deseas realizar.Segunda indicación:
Usa la última versión del plan en plan.md para realizar cambios en la aplicación.Pruébalo en este archivo de la comunidad
Remezcla este archivo de la comunidad y envía la primera indicación al chat de IA con algunos cambios específicos para que Figma Make los implemente. Por ejemplo, dile a Figma Make que deseas añadir la capacidad de guardar e importar cuadros de torneos.
A continuación, en el editor de código, experimenta realizando cambios en el archivo plan.md que Figma Make crea.
Por último, envía la segunda indicación en el chat de IA para que Figma Make implemente los cambios detallados en el archivo plan.md.
Aplicación de ejemplo: cuadros de torneo
Por qué funciona
Figma Make puede crear archivos específicos cuando tú se lo indiques. El archivo plan.md contendrá un plan que Figma Make puede ejecutar para realizar cambios complejos en tu aplicación. 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 realizar tus propios cambios o adiciones al plan.
La indicación posterior le indica a Figma Make que utilice el plan, incluidos los cambios que hayas realizado.