Agrega un backend a un prototipo funcional o una app web

Antes de empezar

Quién puede usar esta función

Figma Make está disponible en la versión beta abierta.

Disponible en cualquier puesto.

Al crear un prototipo o una app web con Figma Make, a veces deberás guardar y gestionar datos de forma segura al agregar un backend. Por ejemplo, necesitarás un backend cuando quieras hacer lo siguiente:

• Mantener el estado de una app en diferentes navegadores.
• Proporcionar flujos de autenticación funcionales, como una pantalla de inicio de sesión para tu app.
• Recopilar datos y respuestas de formularios de usuarios.
• Guardar y cargar contenido, como texto e imágenes.
• Guardar secretos, claves API y tokens para hacer solicitudes a servidores.

Figma Make se integra con Supabase para ofrecer un entorno de backend que proporciona almacenamiento de secretos, capacidad de cómputo y una base de datos de Postgres. Figma Make configurará almacenes básicos de clave-valor dentro de esta base de datos de Postgres; por el momento, Figma Make no configurará una base de datos SQL completa en el Postgres que proporcione Supabase.

Puedes traer tu cuenta existente de Supabase a Figma Make. Si no tienes una cuenta, Figma Make te guiará sobre cómo comenzar.

Una vez que tu cuenta esté lista, Figma Make te guiará a través de los pasos para conectar un proyecto de Supabase a tu app.

Figma Make recuerda los proyectos de Supabase a los que te hayas conectado anteriormente, para que puedas volverlos a usar con mayor facilidad en todos tus archivos de Figma Make.

Una vez que tengas un backend, también puedes agregar secretos y claves API que se pueden usar para consultar servidores externos.

Para obtener más información, consulta nuestras mejores prácticas y ejemplos de indicaciones.

Backends

Cuando trabajas con backends en tus archivos de Figma Make, puedes hacer lo siguiente:

• Agregar un backend
• Agregar un secreto o una clave API
• Gestionar secretos, proyectos y organizaciones de Supabase

Agregar un backend

Existen dos maneras de activar la integración de Supabase que agrega un backend a tu prototipo funcional o app web:

• Figma Make recomendará automáticamente agregar un backend según la intención de tus indicaciones en el chat de IA. También puedes solicitar explícitamente que se agregue un backend con un mensaje como “Agregar autenticación a mi app”.
• En la configuración de tu archivo de Figma Make, conecta Supabase.

Puedes usar cualquiera de los dos métodos en tus archivos Figma Make. No usarás ambos métodos en el mismo archivo, ya que solo necesitas configurar un backend una vez por archivo.

Haz una indicación para agregar un backend

Para agregar un backend con el chat de IA:

1. En el chat de IA, indícale al modelo que agregue un backend a tu prototipo funcional o app web. Esto puede ser tan simple como “Agregar un backend”, “Agregar inicio de sesión de usuario” o “Llamar [a una API segura, como OpenAI]”.

2. Cuando Figma Make te pida que configures tu cuenta de Supabase, haz clic en Conectar. Este paso solo ocurre la primera vez que configuras la integración de Supabase.

   En una nueva pestaña del navegador, se te dirige al sitio web de Supabase.

   Cuando se te indique iniciar sesión en Supabase, usa tu cuenta existente o crea una cuenta gratuita.

   Si tu cuenta de Supabase aún no está asociada con una organización, Supabase también te solicitará que crees una organización.

3. En la página Autorizar acceso a la API para Figma, selecciona una organización y haz clic en Autorizar Figma.

   En tu navegador, se cierra la pestaña de Supabase y regresas a Figma Make.

4. Si ya tienes un proyecto de Supabase existente, haz clic en Elegir un proyecto, luego haz clic en Conectar junto al proyecto que deseas usar para el archivo de Figma Make.

   Si no tienes ningún proyecto de Supabase, haz clic en Crear proyecto. Luego, en el modal Nuevo proyecto de Supabase, ingresa un nombre para el proyecto, selecciona la región donde deseas que se aloje el proyecto de Supabase y crea una contraseña para tu base de datos.

   Nota: La contraseña de la base de datos no es igual a la contraseña de tu cuenta de Supabase. La contraseña de la base de datos se utiliza para acceder a la base de datos de Postgres en tu proyecto de Supabase. Es posible que no necesites usar esta contraseña mientras trabajas en tu archivo de Figma Make, pero Supabase requiere que tu base de datos tenga una contraseña.

5. Haz clic en Crear proyecto.

Una vez que tu proyecto de Supabase esté conectado al archivo de Figma Make, ¡listo! En el chat de IA, puedes indicarle al modelo la funcionalidad que quieres desarrollar, como un formulario para recopilar datos del usuario, y el modelo se encargará de implementar la funcionalidad por ti.

Agrega un backend en la configuración del archivo

Para agregar un backend en la configuración de tu archivo de Figma Make:

1. En la esquina superior derecha de tu archivo Figma Make, haz clic en Configuración de Make.
2. En la barra lateral izquierda, en Integraciones, haz clic en Supabase.

3. Haz clic en Conectar Supabase. Este paso solo es necesario la primera vez que configuras la integración de Supabase.

   En una nueva pestaña del navegador, se te dirige al sitio web de Supabase.

   Cuando se te indique iniciar sesión en Supabase, usa tu cuenta existente o crea una cuenta gratuita.

   Si tu cuenta de Supabase aún no está asociada con una organización, Supabase también te solicitará que crees una organización.

4. En la página Autorizar acceso a la API para Figma, selecciona una organización y haz clic en Autorizar Figma.

   En tu navegador, se cierra la pestaña de Supabase y regresas a Figma Make.

5. Si ya tienes un proyecto de Supabase existente, haz clic en Conectar al lado del proyecto que quieres usar para el archivo de Figma Make.

   Si no tienes ningún proyecto de Supabase, haz clic en Crear nuevo proyecto. Luego, en el modal Nuevo proyecto de Supabase, ingresa un nombre para el proyecto, selecciona la región donde deseas que se aloje el proyecto de Supabase y crea una contraseña para tu base de datos.

   Nota: La contraseña de la base de datos no es igual a la contraseña de tu cuenta de Supabase. La contraseña de la base de datos se utiliza para acceder a la base de datos de Postgres en tu proyecto de Supabase. Es posible que no necesites usar esta contraseña mientras trabajas en tu archivo de Figma Make, pero Supabase requiere que tu base de datos tenga una contraseña.

   Haz clic en Crear proyecto.

Una vez que tu proyecto de Supabase esté conectado al archivo de Figma Make, puedes regresar al chat de IA y comenzar a trabajar con el modelo para aprovechar tu backend.

Agregar un secreto o una clave API

Cuando estés creando un prototipo funcional o una app web, es posible que quieras obtener datos de servidores externos. Por ejemplo, si tienes una app que muestra información del clima a tus usuarios, podrías usar una API de clima que requiera una clave API o un token de acceso.

Cuando solicitas en el chat de IA crear tu prototipo funcional o app web, Figma Make te pedirá que configures un backend (si aún no lo has hecho), y luego te proporcionará una interfaz para que ingreses tu secreto o clave API.

Para agregar un secreto o una clave API:

1. En el chat de IA, indícale al modelo que quieres agregar un secreto para tu prototipo funcional o app web. Por ejemplo: “Quiero una app que me permita ver los precios de las acciones. Crea un secreto para guardar mi clave API”.
2. En el recuadro Crear un secreto, en Agregar detalles del secreto, ingresa tu secreto o clave API.
3. Haz clic en Crear secreto.

Cuando hagas clic en Crear secreto, Figma Make usará Supabase para guardar de manera segura el secreto o la clave API. Luego, puedes seguir solicitando a Figma Make que agregue más funciones a tu prototipo funcional o app web que aprovechen la clave API o el secreto agregados.

Gestionar secretos, proyectos y organizaciones de Supabase

Los secretos en tu backend, así como tus proyectos y organizaciones de Supabase, se gestionan a través del sitio web de Supabase. Figma Make proporciona algunos enlaces rápidos para dirigirte a las páginas correctas del sitio web de Supabase.

Para gestionar secretos, proyectos y organizaciones en Supabase:

1. En la esquina superior derecha de tu archivo Figma Make, haz clic en Configuración de Make.
2. En la barra lateral izquierda, en Integraciones, haz clic en Supabase.
3. En la fila del proyecto conectado a tu archivo de Figma Make, haz clic en el ícono de puntos suspensivos. Luego:
   • Haz clic en Gestionar proyecto para ir al panel de Supabase de ese proyecto.
   • Haz clic en Gestionar organización para ir a la página de configuración de tu organización de Supabase.
   • Haz clic en Gestionar secretos para ir a la base de datos de funciones de Edge de tu proyecto de Supabase.

Mejores prácticas para trabajar con backends

Estas son algunas de las mejores prácticas que deberías tener en cuenta mientras trabajas con backends en Figma Make:

• Asegúrate de usar las interfaces de Supabase que Figma Make proporciona. No incluyas datos confidenciales, como secretos o claves API, en el texto sin formato de tus indicaciones.
• Por lo general, para aprovechar al máximo tus proyectos de Supabase, te recomendamos que intentes reutilizar los proyectos de Supabase en tus archivos de Figma Make.

Ejemplos de indicaciones

Estos son algunos ejemplos de indicaciones que puedes usar para probar trabajar con un backend en Figma Make.

Ejemplos de cómo almacenar datos y estados

• “Crea una app para seguimiento de tareas donde pueda guardar mis tareas. Debería incluir la funcionalidad de seguimiento del tiempo para que pueda ingresar cuánto tiempo dediqué a cada tarea”.
• “Crea una galería de fotos donde pueda subir imágenes”.
• “Soy gerente de producto en una plataforma de marketing. Crea una prueba de concepto para la herramienta de comparación de campañas que vamos a agregar. Muestra cómo se guardarán los datos históricos de la campaña y cómo los usuarios pueden seleccionar intervalos de fechas para compararlos”.
• “Soy gerente de producto en una plataforma de aprendizaje en línea. Crea un prototipo de una herramienta para crear cuestionarios para nuestro sistema de creación de cursos. Muestra cómo los instructores pueden diseñar una gran variedad de preguntas: de texto libre, de opción múltiple o con controles deslizantes. Haz que los cuestionarios se puedan compartir para que las personas que interactúan con el prototipo puedan crear su propio cuestionario y compartirlo para recibir feedback.

Ejemplos de cómo usar secretos y claves API

• “Diseña un creador de listas de reproducción de música que obtenga mi historial de escucha de la API de Spotify”.
• “Quiero una app de lista de lectura que, conectándose a la API de Goodreads, obtenga información de libros y permita a los usuarios llevar un seguimiento de su progreso”.
• “Diseña un rastreador de solicitudes de empleo que use la API de LinkedIn para importar ofertas de trabajo y permita a los usuarios hacer un seguimiento del estado de sus aplicaciones”.

Ejemplos de cómo agregar autenticación

• “Crea un rastreador de hábitos que requiera que el usuario inicie sesión y almacene la información de rachas en un almacén de clave-valor”.
• “Soy un desarrollador que está diseñando un producto SaaS. Crea un sistema de inicio de sesión para usuarios. Debería admitir la autenticación por correo electrónico/contraseña, así como los inicios de sesión de redes sociales a través de Google y GitHub, e incluir la funcionalidad de restablecimiento de contraseña”.
• “Diseña un gestor de fragmentos de código que requiera inicio de sesión con GitHub y guarde los fragmentos en una base de datos”.