Añade un backend a un prototipo funcional o una aplicación web

Antes de empezar

Quién puede utilizar esta función

Figma Make está en versión beta abierta.

Disponible en cualquier puesto.

Al crear un prototipo o una aplicación web con Figma Make, hay veces que necesitarás almacenar y gestionar los datos de forma segura añadiendo un backend. Por ejemplo, necesitarás un backend cuando quieras:

• 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 aplicación
• Recoger las aportaciones de los usuarios y las respuestas a los formularios
• Guardar y carga contenido, como texto e imágenes
• Almacenar secretos, claves de API y tokens para formular solicitudes a los servidores

Figma Make se integra con Supabase para ofrecer un entorno de backend que proporciona almacenamiento secreto, capacidad de cómputo y una base de datos 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 proporcionado por Supabase.

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

Una vez que tu cuenta esté lista, Figma Make te guiará paso a paso sobre cómo conectar un proyecto de Supabase a tu aplicación.

Figma Make recuerda los proyectos de Supabase a los que te has conectado previamente, para que puedas reutilizarlos más fácilmente en todos tus archivos de Figma Make.

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

Para más información, echa un vistazo a nuestras mejores prácticas y ejemplos de mensajes.

Backends

Trabajar con backends en tus archivos de Figma Make te permite:

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

Añadir un backend

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

• Figma Make recomendará automáticamente añadir un backend según la intención de tus mensajes en el chat de IA. También puedes solicitar explícitamente añadir un backend, usando un mensaje como «Añadir 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 de Figma Make. No usarás ambos métodos en el mismo archivo, ya que solo necesitas configurar un backend una vez por archivo.

Pide añadir un backend

Para añadir un backend usando el chat de IA:

1. En el chat de IA, dile al modelo que agregue un backend a tu prototipo funcional o aplicación 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 dirigirá al sitio web de Supabase.

   Cuando se te pida que inicies registro en Supabase, utiliza tu cuenta actual o crea una gratuita.

   Si tu cuenta de Supabase aún no está asociada a una organización, Supabase también te pedirá 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, la pestaña de Supabase se cierra y se te dirige de nuevo a Figma Make.

4. Si ya tienes un proyecto existente de Supabase, haz clic en Elegir un proyecto, luego haz clic en Conectar al lado del 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, introduce 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 la misma que 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. Probablemente no necesitarás usar esta contraseña mientras trabajas en tu archivo de Figma Make, pero Supabase exige 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 Figma Make, ¡ya está 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.

Añade un backend en los ajustes del archivo.

Para añadir un backend en la configuración de tu archivo de Figma Make:

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

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

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

   Cuando se te pida que inicies registro en Supabase, utiliza tu cuenta actual o crea una gratuita.

   Si tu cuenta de Supabase aún no está asociada a una organización, Supabase también te pedirá 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, la pestaña de Supabase se cierra y se te dirige de nuevo a Figma Make.

5. Si ya tienes un proyecto existente de Supabase, 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 nuevo proyecto. Luego, en el modal Nuevo proyecto de Supabase, introduce 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 la misma que 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. Probablemente no necesitarás usar esta contraseña mientras trabajas en tu archivo de Figma Make, pero Supabase exige 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 volver al chat de IA y comenzar a trabajar con el modelo para aprovechar tu backend.

Añadir un secreto o una clave de API

Cuando estés creando un prototipo funcional o una aplicación web, puede que quieras obtener datos de servidores externos. Por ejemplo, si tienes una aplicación que muestra información meteorológica a tus usuarios, puedes usar una API meteorológica que exija una clave de API o un token de acceso.

Cuando estés usando el chat de IA para crear tu prototipo funcional o aplicación web, Figma Make te pedirá que configures un backend (si aún no lo has hecho), y luego te proporcionará una interfaz para que introduzcas tu secreto o clave de API.

Para añadir un secreto o una clave de API:

1. En el chat de IA, dile al modelo que quieres añadir 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 de API».
2. En el cuadro Crear un secreto, bajo Añadir detalles del secreto, introduce tu secreto o clave de API.
3. Haz clic en Crear secreto.

Cuando hagas clic en Crear secreto, Figma Make utilizará Supabase para guardar de manera segura el secreto o la clave de API. A continuación, puedes seguir pidiendo a Figma Make que añada más funciones a tu prototipo funcional o aplicación web que aprovechen la clave de API o la clave secreta añadida.

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 te ofrece 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 de Figma Make, haz clic en Configuración de Make.
2. En la barra lateral izquierda, bajo Integraciones, haz clic en Supabase.
3. En la fila del proyecto conectado a tu archivo de Figma Make, haz clic en el icono de puntos suspensivos. Entonces:
   • Haz clic en Administrar proyecto para ir al panel de Supabase de ese proyecto.
   • Haz clic en Administrar organización para ir a la página de configuración de tu organización Supabase.
   • Haz clic en Administrar secretos para acceder a la base de datos de funciones Edge de tu proyecto de Supabase.

Prácticas recomendadas para trabajar con backends

Aquí tienes algunas de las mejores prácticas que deberías tener en cuenta al trabajar con backends en Figma Make:

• Asegúrate de que estás utilizando las interfaces de Supabase que Figma Make proporciona. No incluyas datos confidenciales, como secretos o claves de API, en el texto real y sin formato de tus mensajes.
• En 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 mensajes

Aquí tienes algunos ejemplos de mensajes que puedes usar para probar a trabajar con un backend en Figma Make.

Ejemplos de almacenamiento de datos y estado

• «Crea una aplicación de seguimiento de tareas donde pueda guardar mis tareas. Debería incluir la funcionalidad de seguimiento del tiempo para que pueda introducir cuánto tiempo he dedicado 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 estamos añadiendo. Muestra cómo se almacenarán los datos históricos de la campaña y cómo los usuarios pueden seleccionar rangos de fechas para comparar».
• «Soy gerente de producto en una plataforma de e-learning. Haz un prototipo de la herramienta de creación de cuestionarios para nuestro sistema de creación de cursos. Muestra cómo los profesores pueden crear una amplia gama de preguntas, desde texto libre hasta opciones múltiples y controles deslizantes. Haz que los cuestionarios se puedan compartir, de modo que las personas que jueguen con el prototipo puedan crear su propio cuestionario y compartirlo para recibir comentarios».

Ejemplos de uso de secretos y claves de API

• «Haz un creador de listas de reproducción de música que extraiga mi historial de escucha de la API de Spotify».
• «Necesito una app de listas de lectura que se conecte a la API de Goodreads para obtener información de libros y permita a los usuarios seguir su progreso».
• «Crea un rastreador de solicitudes de empleo que use la API de LinkedIn para importar ofertas de trabajo y permita a los usuarios seguir el estado de sus solicitudes».

Ejemplos de cómo añadir autenticación

• «Crea un rastreador de hábitos que exija que el usuario inicie sesión y que almacene la información sobre rachas en un almacén clave-valor».
• «Soy desarrollador desarrollando un producto SaaS. Crea un sistema de inicio de sesión para usuarios. Debe ser compatible con la autenticación de correo electrónico/contraseña, así como con los inicios de sesión mediante redes sociales a través de Google y GitHub, e incluir la funcionalidad de restablecimiento de contraseña».
• «Crea un gestor de fragmentos de código que exija iniciar sesión en GitHub y almacene los fragmentos en una base de datos».