Tutoriales de Bubble.io

Tutorial bubble.io diseño

Tutorial bubble.io diseño

Índice del artículo

Introducción

El siguiente paso después del registro en Bubble es conocer el panel de edición de Bubble.io. Por eso te traigo un tutorial sobre la parte de diseño o “design” de bubble.io, de forma básica para principiantes. El editor tiene una estructura básica compuesta por 6 pestañas, hoy nos centraremos en aprender lo que es la pestaña de design y algunas cosas que puedes hacer.

Recuerda pasarte por la mayor comunidad hispanohablante de Bubble en Discord.

 

Tutorial bubble.io parte diseño

En esta pestaña puedes hacer la parte visual de la app que estés construyendo. Si ya tienes el diseño en Figma, puedes exportarlo y así ya tendrías el diseño hecho (aunque a veces falla y hay que modificar algunas cosas). Si quieres que haga un tutorial sobre esto, únete al Discord y pídelo allí. Te ayudaremos en el momento y posteriormente haré el tutorial.

 

 

Para añadir el elemento, haz clic sobre el y arrástralo hacia la parte en blanco. También puedes seleccionarlo y hacer clic directamente en el lienzo en blanco para ajustar el tamaño que quieras. Elige su tamaño, las propiedades y apariencia (haciendo doble clic sobre el elemento).

Te dejo un vídeo básico sobre esta área.

Tutorial bubble.io diseño ¿Por qué debes hacer un boceto?

Como digo en el vídeo, es importante que antes de diseñar en Bubble, hagas un boceto en papel, Figma, Adobe Ilustrator, Adobe XD o cualquier programa donde puedas hacer un diseño previo de tu idea. La razón es que, esas herramientas están preparadas para facilitar el diseño y hacerlo más ágil. Algo en lo que peca Bubble, ya que, si bien no es difícil, pierdes mucho tiempo haciendo cambios. Por lo tanto, te recomiendo tener el diseño de todas las partes de tu app, web, etc. listo. Recuerda que puedes exportar de Figma a Bubble. Si quieres que te ayude o haga un tutorial, haz clic en el botón azul y únete a la comunidad.