Antes de empezar
Quién puede utilizar esta función
Figma Make está disponible para puestos Full en planes de pago.
Puedes probar Figma Make en otros puestos y planes.
Cuando quieras editar el código de tu prototipo funcional o aplicación web directamente, Figma Make proporciona un editor ligero en el contexto de tu archivo.
Para acceder al editor de código, en la parte superior de tu archivo Figma Make, haz clic en Código.
Figma Make proporciona varias funciones para trabajar con código:
- Un editor de código, donde puedes realizar cambios en el código generado por Figma Make, o programar o importar tu propio código. También puedes dar formato a los cambios que realices o pegues en el editor con .
- Una forma de descargar tu código, incluidos todos los archivos en el explorador de archivos para tu prototipo funcional o aplicación web.
- Un explorador de archivos que usas para desplazarte por los archivos creados por Figma Make. No puedes crear tus propios archivos en el explorador de archivos, pero puedes indicarle a Figma Make que cree archivos por ti.
- Un lugar para añadir las directrices que Figma Make seguirá al generar código para tu prototipo funcional o aplicación web. Para obtener más información, consulta Añadir directrices a Figma Make.
Editar código
En el editor de código, puedes realizar cambios directamente en los archivos que existen en el explorador de archivos. App.tsx, el archivo principal de tu prototipo funcional o aplicación web, está seleccionado en el explorador de archivos de forma predeterminada.
Puedes editar el código existente, programar tu propio código o pegar código directamente en el editor.
Revertir cambios en el código
A medida que realizas cambios en el código, Figma Make crea puntos de control para esos cambios. Puedes revertir los cambios de tu código para volver a la versión del archivo desde el último paso de la conversación.
Para revertir los cambios en un archivo, en el chat de IA, haz clic junto al archivo que deseas revertir.
Dar formato a tu código
Para dar formato al código, presiona CMD + S (Mac) o CTRL + S (Windows), o haz clic en Dar formato al código en la esquina superior derecha del editor de código. Cuando das formato, Figma Make embellece el código, por ejemplo, corrigiendo el lineado y la sangría.
Descargar tu código
Para descargar un archivo .zip que contiene todos los archivos de tu archivo Figma Make, en la esquina superior derecha del editor de código, haz clic en Descargar código.
Explorar archivos
En el explorador de archivos a la izquierda del editor de código, puedes hacer clic para expandir carpetas y seleccionar archivos. Cuando seleccionas un archivo, el contenido del archivo aparece en el editor de código.
No puedes crear ni eliminar archivos en el explorador de archivos. Si quieres agregar nuevos archivos al explorador de archivos, indícaselo a Figma Make en el chat de IA. Por ejemplo, «Añade un archivo Toolbar.tsx con algún código de plantilla».