Flutter es el kit de herramientas de Google que permite compilar apps atractivas de forma nativa para dispositivos móviles, la Web y computadoras de escritorio a partir de una única base de código. En los últimos años, se convirtió en la primera opción para los desarrolladores que desean crear apps en distintas plataformas. Sin embargo, los diseñadores necesitan una herrramienta visual para crear prototipos y compilar IU en Flutter, en lugar de hacerlo manualmente con el código fuente de Dart. Ingresa a XD a Flutter.
Ya casi pasó un año desde la primera versión preliminar del complemento, y seguimos perfeccionándolo gracias a un conjunto de pequeñas actualizaciones, el gran lanzamiento de la versión 1.0 el verano boreal pasado y ahora la versión 2.0 que coincide con el lanzamiento de Flutter 2.
Su nombre ya lo indica: el complemento XD a Flutter es una herramienta eficaz y fácil de usar con la que puedes convertir tus diseños increíbles de Adobe XD en un código ordenado que funcione con Flutter. Puedes copiar el código de elementos visuales específicos de tus diseños y exportar widgets reutilizables o incluso vistas enteras.
De esta manera, el complemento XD a Flutter te permite ejecutar diseños en casi todos los dispositivos con solo hacer clic en un botón. No hará todo el trabajo por ti, pero te ayudará a empezar.
XD a Flutter fue creado por gskinner de forma conjunta con Adobe y se publicó como un complemento para Adobe XD, por lo que puedes usarlo con cualquier diseño de Adobe XD que estés creando.
La versión inicial de XD a Flutter permitía la transferencia de los distintos elementos visuales de diseño, como gráficos vectoriales, imágenes, texto enriquecido, fondos desenfocados, modos de fusión, sombras y mucho más, pero los resultados a veces eran inflexibles y estáticos.
Si bien era útil para copiar un ícono o estilo de texto, queríamos que hiciera más. XD ayuda a los diseñadores a crear IU dinámicas con herramientas como diseños adaptables, áreas desplazables y cuadrículas. Nuestro objetivo es que el complemento admita todas estas funciones, y con la versión 2.0 logramos varios avances.
XD a Flutter admite las funciones de diseño adaptable de XD, lo que permite "fijar" los elementos que se encuentren dentro del elemento principal y controlar con precisión la forma en la que cambian de tamaño.
En Flutter, lo logras mediante un widget de diseño fijado del paquete de adobe_xd de código abierto que los desarrolladores pueden usar directamente en sus proyectos.
Las "pilas" y los grupos de desplazamiento brindan maneras nuevas de mostrar el contenido en pantalla de forma dinámica en Adobe XD. Con las pilas de XD, puedes distribuir un grupo de elementos en una lista horizontal o vertical, con espaciados diferentes entre ellos. Se asemejan más a los widgets flexibles de Flutter que al widget de pila.
Con los grupos de desplazamiento, como su nombre lo indica, puedes definir un área en el que se desplazará una gran parte del contenido de manera horizontal o vertical dentro de tu diseño.
XD a Flutter v2.0 admite estas funciones y las convierte en widgets comunes de Flutter (Column, Row y SingleChildScrollView). También puedes colocar una pila dentro de un grupo de desplazamiento a fin de crear rápidamente una lista de elementos desplazables.
Otra función nueva son los elementos de fondo, con los que puedes designar un elemento visual como fondo para un grupo. Combínalo con relleno a fin de agregar espacio entre los bordes del fondo y el contenido.
El complemento exportador de Flutter usa un widget de pila para colocar la capa del elemento de fondo detrás del contenido y agregarla a un widget de relleno.
Las funciones de diseño que se describieron antes permiten lograr una IU mucho mas adaptable, lo que complementa la compatibilidad adicional de Flutter 2 con factores de forma, como computadoras de escritorio y la Web.
Asimismo, Flutter 2 ofrece seguridad nula sólida, una función del lenguaje que ayuda a los desarrolladores a detectar problemas de nulabilidad antes de que generen problemas en las apps. XD a Flutter v2.0 incluye la nueva configuración "Export Null Safe Code", que garantiza que el código generado sirva en el futuro.
Ya sea que lo quieras utilizar para copiar el código de un gradiente complicado o exportar widgets con parámetros, totalmente interactivos y adaptables, puedes unirte a los miles de profesionales creativos que ya están usando el complemento XD a Flutter.
Puedes instalarlo seleccionando "Browse Plugins…" desde el menú "Plugin" de Adobe XD y buscar "Flutter" (no lo encontrarás si buscas "XD a Flutter"). También puedes visitar adobe.com/go/xd_to_flutter.
Una vez que lo hayas instalado, abre el panel de XD a Flutter desde el panel de complementos y presiona el vínculo de ayuda para consultar la documentación del complemento.
Flutter 2 representa un avance importante para el framework, ya que se centra en la compilación de apps atractivas que se pueden ejecutar desde casi cualquier dispositivo. En gskinner, nos emociona trabajar con Adobe y Google para que XD a Flutter siga simplificando aún más el proceso de convertir diseños increíbles en un producto funcional.
¡No te pierdas las próximas actualizaciones!
