en design, flutter

Pasar del diseño a Flutter – SuperNova

Buscando si había herramientas para pasar del diseño a código, encontré SuperNova, en youtube puede encontrar algunos tutoriales y su presentación oficial.

Advertencia: Actualmente en la fecha en que se hace este post, supernova ya no ofrece la descarga, sino registro para acceso a su nueva versión que “pronto” saldrá, no hay fecha, por eso si no puede obtenerlo, por lo cual talves continuar leyendo no le sea útil, incluso el código generado no es con las versiones actuales de los framework ( Android, IOS, Flutter y React)

Advertencia: Al trabajar el diseño en supernova, se vera bien, pero al momento de exportarlo, y abrirlo en su propia plataforma ( android studio, visual studio code para flutter, etc), presentará problemas por versiones y las pantallas no se mostrarán exactamente igual y necesitará ajustarlo para mostrarlo y compilar correctamente , … en su presentación no mostraron la parte de exportación.

Primero descargue SuperNova https://download.cnet.com/developer/supernova-studio/i-11246412, actualmente es gratuito, si pide una actualización, proceda y obtendrá la versión completa.

Una ves registrado y abrir , le mostrará la pantalla de bienvenida

Probando el archivo de ejemplo obtuve errores, por lo cual probé con algunos archivos propios

Presione sobre “Import” y seleccione el archivo ( no encontré diferencias en el código generado si el diseño es de sketch o adobe XD )

Sobre las pestañas “Studio/Sketch/Adobe”, son solo los archivos recientes, studio son los archivos creados por Supernova, ya que los diseños importados, se trabajan antes de exportar.

Y los iconos de sol y luna son para cambiar el diseño claro y oscuro.

Cuando importe el archivo, preguntará cuales diseños desea importar, y seleccione la plataforma ( se puede cambiar despues)

Cargará los archivos

Cada parte:
1 ) Screens, muestra cada pantalla, Componentes, muestra el arbol de los elementos de la pantalla, y assets, son las imágenes que se usaron en el diseño.

2) Muestra el flujo de las pantalla establecidos en SuperNova

3) Muestra la pantalla selecciona

4) Con el botón play, pueden emular como esta quedando la pantalla en diferentes tamaños, modos landscape y portrait

El símbolo </>, muestra un previo del código generado, que bien puede copiarlo y pegarlo ( probado solo en flutter)

5) Con el penúltimo botón puede exportar, puede probar los otros, son configuraciones y documentación

Edición Básica

Pueden revisar un tutorial mas completo en el canal de Angaa : https://youtu.be/51Jq4umRxfI – de Angga Risky

Por ejemplo seleccionamos el boton “Create account”

En el panel de derecho pueden revisar los 4 circulos

Las lineas horizontales y verticales, es para indicar que mantenga su ancho o alto
Los 4 puntos es para indicar que va a mantener su distancia actual a cada lado, es decir, si marco el punto derecho y abajo, el botón mantendrá esa distancia

Para ir de una pantalla a otra, selecciona el “botón”, hasta ahora solo era un elemento visual, para poder clickearlo, se tranforma en boton , click derecho>Convert component>Button

Luego agregar la interacción, click derecho > Create interaction>push>send money ( nombre de la pantalla que navegara )

Presiona sobre PLAY y podrá probar la interacción

Exportar proyecto

Presionar sobre el botón de exportar y pedirá algunas configuraciones, que puede cambiar o dejarlo

Click, sobre exportar ( en este ejemplo se hizo con flutter ), luego abrirlo en Visual Studio Code, obtener paquetes y ejecutar, se vera algo asi

Como se ve, no es igual al diseño, pero los widgets están creados y puede editarse para que quede igual, como se sabe diseñar en flutter es “sencillo y rapido”, dependiendo de la complejidad, por eso esta herramienta al menos en mi caso, la usare para widget complejos, como sombras o formas y copiar el código en el proyecto.

Pueden descargar el proyecto generado desde github
https://github.com/JavierSolis/SuperNova_example_beep

Referencias:
Tutorial de uso de SuperNova
https://youtu.be/51Jq4umRxfI – de Angga Risky

Documentación No encontrada de SuperNova
https://help.supernova.io/docs/preview-window

Documentación aún publica de SuperNova
https://help.supernova.io/docs/components

Descarga alternativa de SuperNova
https://download.cnet.com/developer/supernova-studio/i-11246412

Adobe XD
https://www.adobe.com/la/products/xd.html

Escriba un comentario

Comentario

Webmenciones

  • Pasar de diseño a Flutter - con Adobe XD - Blog de Punto y Coma Lab

    […] opciones de como pasar del diseño al código ( ver como pasar del diseño en Sketch o Adobe XD a android, react, ios o flutter) , encontré otra opción de hacerlo desde Adobe XD, a diferencia de SuperNova, se puede pasar por […]