Tutoriales de Bubble.io

¿Cómo importar de Figma a Bubble.io?

Índice del artículo

Introducción

Aprende a importar o integrar tus diseños de Figma a Bubble.io de forma fácil, en menos de 5 minutos y explicado con imágenes. Los pasos para importar son sencillos, aunque como te comentaré más abajo, deberás ver si realmente te merece la pena.

 

Vídeo sobre importar de Figma a Bubble.io en español

Pasos parar importar de Figma a Bubble.io

Paso 1: copia la ID de tu proyecto en Figma

Ve a Figma y abre el proyecto que quieras exportar a Bubble. En la url selecciona la id de tu proyecto y cópialo.

 

¿Cómo importar de Figma a Bubble.io? paso 1

Paso 2: ve a ajustes de tu app en Bubble.io

Abre tu app de Bubble.io, entra en ella y ve a la parte de ajustes. En ajustes, clic sobre “generales” y baja hasta que veas “API Key” y “Figma File ID”.

¿Cómo importar de Figma a Bubble.io? paso 2 Apartado general en bubble.io

 

Donde pone “Figma File ID” pega lo que copiaste de la url.

Paso 3: Copia la API key en Figma

Para obtener la API KEY ve a Figma. Una vez allí dale clic en la esquina derecha a tu perfil y ajustes (settings). Cuanto estés en ajustes, baja hasta que veas el “Personal access tokens”, escribe una descripción, dale a intro y obtendrás tu API Key

¿Cómo importar de Figma a Bubble.io? paso 3 setting api key figma escribe una descripción y obtén tu key

Paso 4: clic en importar de Figma a Bubble.io

Vuelve a Bubble y pega tu token en el apartado API KEY. Y listo, la exportación de Figma  a Bubble empezará. Dependiendo del proyecto tardarás más o menos tiempo. Podrás ver todas las página que tenías en Figma aquí:

 

¿Cómo importar de Figma a Bubble.io? 4

 

Paso 5: BONUS Errores

Mi consejo es que si es un gran diseño y merece la pena exportar hazlo. Pero si es algo básico, que no te llevará mucho tiempo construir en Bubble, empieza de 0. Esto es porque hay veces que algunas cosas se modifican y tienes que arreglarlo.

Conclusiones

Es posible exportar tus diseños de Figma a Bubble.io de forma muy sencilla. Sin embargo, es posible que te de errores. Sopesa si realmente es necesario exportar o si perderás menos tiempo creándolo desde 0 en Bubble.

¿Has visto el vídeo donde explico un tutorial sobre el apartado diseño de bubble.io ? Seguro que te resultará útil.

Te invito a unirte a la comunidad hispanohablante de Bubble.io en Discord, donde nos ayudamos en caso de dificultades y compartiremos formación, recursos en vídeos, plantillas etc.