Antes de empezar
Quién puede usar esta función
Figma Make está disponible para los puestos Full en los planes de pago.
Puedes probar Figma Make en otros puestos y planes.
Cuando quieras editar el código de tu prototipo funcional o app 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 de 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 escribir o traer tu propio código. También puedes dar formato a los cambios que realices o pegues en el editor.
- Una forma para descargar tu código, incluidos todos los archivos del explorador de archivos para tu prototipo funcional o app web.
- Un explorador de archivos que usas para desplazarte por los archivos que crea 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 agregar pautas que Figma Make seguirá al generar código para tu prototipo funcional o app web. Para obtener más información, consulta Agregar pautas 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 para tu prototipo funcional o app web, se selecciona en el explorador de archivos de forma predeterminada.
Puedes editar el código existente, escribir 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 tus cambios de código para volver a la versión del archivo desde el último paso de la conversación.
Para revertir tus cambios en un archivo, en el chat de IA, haz clic en junto al archivo que deseas revertir.
Aplicar formato a tu código
Para aplicar formato al código, presiona CMD + S (Mac) o CTRL + S (Windows), o haz clic en Formatear código en la esquina superior derecha del editor de código. Al aplicar formato, Figma Make embellece el código, por ejemplo, al corregir la alineación y la sangría.
Descargar tu código
Para descargar un archivo .zip que contiene todos los archivos de tu archivo de 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 en el lado izquierdo 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, indica Figma Make en el chat de IA. Por ejemplo, “Agregar un archivo Toolbar.tsx con algo de código de plantilla”.