Supernova Studio convierte diseños de bocetos en aplicaciones móviles nativas

Francisco Merelo
WikiUX
Published in
5 min readJul 19, 2017

Supernova convierte cualquier diseño móvil creado en Sketch a aplicaciones nativas reales, con la esperanza de que todo el proceso de diseño-a-desarrollo sea más eficiente.

Ellos están tomando un enfoque interesante en que no incluye ninguna herramientas de diseño incorporado y se centra en la importación y la conversión inteligente de diseños de Sketch en código. Esto es un poco diferente de Paintcode . Así es como lo describe Supernova :

El importador de Supernova no importa el diseño tal como es, sino que lo ejecuta a través de múltiples etapas de optimización para garantizar que se importa lo más cerca posible de la aplicación real. Esto significa eliminar capas redundantes, optimizar el agrupamiento, aplanar los componentes para convertirse en imágenes y mucho más.

Supernova soporta la versión 4.0+ de Sketch, y la mayoría de su funcionalidad, incluyendo símbolos, degradados, máscaras y muchos más. No dude en usar lo que quiera, puede manejarlo.

Supernova está actualmente libre mientras que en Beta, los precios aún no se anunció.

Mas detalles en https://supernova.studio

Introducción a Supernova

Convierta los diseños de Sketch en aplicaciones nativas en minutos

Cuando se trata de construir una aplicación móvil, sigue siendo un proceso dolorosamente lento y engorroso. ¿Por qué crear el diseño y luego código de nuevo a mano, cuando alguien trabajó tan duro para asegurarse de que todos los píxeles son justo? Dijimos que no.

La introducción de Supernova, una herramienta nativa destinada a superar la brecha entre desarrolladores y diseñadores , permite a los diseñadores crear aplicaciones nativas en funcionamiento por primera vez (no prototipos!), O ayudar a los desarrolladores a reducir el tiempo de desarrollo mediante la eliminación total del trabajo de la interfaz de usuario.

Supernova es una suite todo-en-uno que automatiza lo siguiente:

  • ✅ Conversión de capas de diseño a componentes nativos 🔥
  • ✅ Estilo de componentes
  • ✅ Creación de cadenas de navegación
  • ✅ Creación totalmente automática de diseños de respuesta 🔥
  • ✅ Detección y exportación de recursos (sin necesidad de cortes)
  • ✅ Creación de animaciones básicas y avanzadas
  • ✅ Exportación del código, de los activos, del proyecto, de las fuentes, de la interfaz de usuario y de todo lo necesario para iOS, Android y (muy pronto) Reaccionar proyectos nativos también 🔥
  • ⭐ Bono para todas las sesiones nocturnas: Modo de interfaz de usuario ligero / oscuro

¿Mejor de todo? Funciona con cualquier diseño móvil pulido. Vamos a bucear, ¿verdad?

Dibujar a Supernova

Supernova no importa capas como están en Sketch. En su lugar, las capas se convierten en los elementos básicos de cada aplicación: imágenes, etiquetas y vistas, preservando toda la información de diseño que proporcionó.

No sólo eso, sino que también optimiza el diseño : eliminar redundancias, arreglar colores y transparencias, crear y combinar rutas inteligentes, exportar recursos de imágenes, aplicar máscaras … todo lo que los programadores necesitarían hacer manualmente.

Importar archivo de boceto crea todas las pantallas de la aplicación — la optimización se realiza inmediatamente

Componentes nativos y vista previa interactiva

Los bloques de construcción básicos por sí solos no son suficientes en la mayoría de los casos — los componentes más complejos los agrupan y proporcionan funcionalidad adicional, como desplazamiento, carga de datos o eventos táctiles. Supernova permite la conmutación sin fisuras entre diferentes tipos de componentes , o la fusión de múltiples componentes para formar elementos complejos como tablas.

Para mostrar los cambios y cómo se comporta la aplicación, Supernova ofrece una vista previa en tiempo real . Cuando termine de editar, simplemente cambie a interactivo y disfrute de la aplicación completa exactamente cómo se verá a sus usuarios . Esta vista previa simula todos los componentes, animaciones, interacciones y, por supuesto, el diseño sensible.

Conversión de capas a componentes complejos — botones, texto, tablas, nombre.

Starlight — Motor de diseño de respuesta automática

De acuerdo con los estándares actuales, hacer que las aplicaciones respondan y soporten cualquier tamaño de pantalla es una necesidad . Lo hemos automatizado para todos.

Supernova le permite crear diseños utilizando el mismo sistema que el diseño automático de iOS o el diseño de restricciones de Android, pero elimina el trabajo duro: calcula las restricciones, usando información de posicionamiento, márgenes, pero también el tipo de componentes, sus estilos y contenido.

Una vez que haya creado todos los componentes como botones o tablas, simplemente haga clic en resolver, y el diseño se hace. Cambiar al modo interactivo le permite previsualizarlo en cualquier tamaño de dispositivo .

La opción “Resolver pantalla” crea todas las restricciones para usted

Animaciones

Hacer grandes animaciones es complicado y tenerlas justo es casi imposible de hacer a mano. Para aliviar el dolor de su creación, Supernova cuenta con un completo motor de animación que traduce lo que diseña en código nativo, integrando todo para usted.

Usted es capaz de construir y previsualizar animaciones directamente desde dentro del estudio , ya sea a mano o mediante el uso de plantillas predefinidas, incluyendo todas las cosas dulces como fotogramas clave y animaciones de primavera. Todas las animaciones se muestran inmediatamente, incluyendo sus interacciones.

Haciendo los botones poco más vivos

Cadenas de navegación

Supernova le permite conectar visualmente pantallas para crear los mapas de navegación . La navegación puede ser invocada desde botones, tablas, celdas o vistas, o simplemente puede conectar las pantallas juntas y eventualmente usar esa conexión en el código usted mismo.

Creación del mapa de navegación

Exportación nativa

Una vez que esté satisfecho con lo que ha creado, es hora de exportar para iOS o Android (y pronto, React Native). Dependiendo de su configuración y plataforma, obtendrá:

  • Los códigos fuente (Swift, Java, Kotlin) creados con las últimas prácticas recomendadas
  • Definiciones de interfaz de usuario y diseño (storyboards, XML)
  • Activos en todas las resoluciones
  • Fuentes necesarias
  • Proyecto de construcción con todos los archivos vinculados y configuración

--

--