Herramientas de Diseño en Xamarin Forms

Herramientas de diseño pueden potencializar tu trabajo. Si tú, mi querido lector, sabes lo que yo sé entonces sabes que son los pequeños detalles los que marcan la diferencia. Y estos detalles toman tiempo, no importa la plataforma,  rama o dimensión… Los detalles se toman su tiempo.

Lo que vas a ver a continuación son un conjunto de herramientas que bien utilizadas pueden marcar la diferencia entre un antes y un despues. Con una buena UI/UX puedes desde crear mayor atracción para los usuarios hasta incrementar el patrimonio de una empresa, es cierto no estoy bromeando.

Te invito a conocer algunas de las herramientas que pueden no solo ayudarte a ser más productivo, sino que también puede ayudarte a entregar un producto de mayor calidad.

Contexto

Si bien es cierto, hay muchas herramientas y controles dentro de VS y Xamarin Forms que nos ayudan en el dia a dia. Sin embargo este articulo esta enfocado en herramientas y librerias de terceros que hacen o simplifican algún trabajo en concreto.  Ahora si…

¡¡¡Vamos a ello!!!

Eligiendo los paquetes de NuGet

Han sido mucho los avances que ha tenido Xamarin desde sus inicios. Ha mejorado bastante en su apartado de UI/UX ofreciendo nuevas características y nuevos controles. Aunque fuera de la caja de Xamarin podemos encontrar librerías que realmente nos puedes ayudar bastante.

SharedTransitions

Xamarin.Plugin.SharedTransitions es un plugin que contiene animaciones de transición que conecta los elementos de una pagina con otra. Su uso e implementación no tienen ningún misterio, así que, si te quejabas de las transiciones en Xamarin Forms, ya tienes una herramienta empezara a marca la diferencia.

Xamanimation

Xamanimation es un plugin que facilita el uso de animaciones tanto en C# como en XAML. La última actualización que tienen es de hace 2 meses, seria interesante ver como agregan mas animaciones.

CardsView

CardsView es un plugin basado en un CarouselView pero con las animaciones y diseños de cartas. Si alguien quiere dar un toque diferente de interactividad creo que esta seria una bella manera.

FFImageLoading

Creo que Xamarin.FFImageLoading es uno de los plugin que está en más del 70% de los proyectos que manejan grandes cantidades de imágenes. Si yo fuera parte del Team de Xamarin sugeriría crear una librería como Xamarin Essentials solo para agregar este tipo de plugin.

NuGet

FFImageLoading es un plugin que maneja las imágenes por ti, listo. No necesitas saber nada más, parece ser algo divino bajado del cielo. Y no solo eso, sino que soporta efectos y animaciones.  Realmente recomiendo ver que tiene esta librería.

XF-Material-Library

Una de las nuevas librerías que sin lugar a dudas rápidamente se ha ganado el corazón de la comunidad es XF-Material-Library. XF-Material-Library implementa Google’s Material Design haciendo uso de controles personalizados y controles construidos en Xamarin Forms.

Android card iOS card iOS button iOS button

Tiene gran cantidad de controles que puede ser de interés para mas de uno de nosotros. Me gustaría seguir viendo esta librería desarrollarse más.

ContextMenu

ContextMenu es una librería de las más cool sencillamente porque dota a nuestros ListView del poder de agregarle acciones a nuestros ítems dependiendo del contexto (o la acción). Sin lugar a dudas, esta librería te permitirá agregar mas valor a tu producto y si a eso le agregas una buena UI, lo tienes todo campeón.

Validation Rules

Ahora es más fácil manejar las validaciones en tiempo de diseño con Plugin.ValidationRules. Este maravilloso plugin valida datos, introducidos por los usuarios, que pueden ser utilizados para informar a los mismos  sobre la validación realizada. Es muy bueno si tu aplicación maneja muchas entradas de información de los usuarios.

Adicional a esto, hay una extensión de VS llamada Validation Rules Template que te ayuda a agilizar las validaciones. Y algo que te gustará mas, es que con el tiempo vas a crear un repositorio de reglas de validación que puedes utilizar en diferentes proyectos según tus necesidades  según tus necesidades.

Eligiendo Controles pre-creados

Si bien se sabe hay unos cuantos proveedores de controles para Xamarin forms hoy en dia, muchos de estos son muy interesantes y os recomiendo que le hechen un vistazo a todos. Estos controles nos puedes agilizar en gran media nuestro proceso de desarrollo en muchos casos.

SkiaSharp

Muchos de los controles personalizados que se utilizan en muchos frameworks de desarrollo utilizan Skia para dibujar esos controles en 2D. SkiaSharp es una API de  gráficos 2D multiplataforma para.NET basada en Skia Graphics Library de Google .

Si estás buscando crear NUEVOS controles creo que la base seria empezar a investigar que es SkiaSharp, si no sabes que es. Muchas de las librerías que veras a continuación están basadas en SkiaSharp, creo que eso es más que suficiente para ver de qué se trata o al menos ver que se puede hacer.

Les dejo en video muy interesante donde pueden ver el potencial de SkiaSharp aquí.

GrialUI Kit

Creo que GrialUI Kit es una de las librerías más conocidas, no solo por sus templates y controles sino más bien, porque son los creadores de Gorilla Player. Dejar Gorilla Player totalmente gratis para la comunidad es una carta que está jugando a su favor ciertamente.

Grial UI Kit preview

Sin embargo, creo que no es la más utilizada por el hecho de que no proveen una prueba gratuita para testear. Yo en lo personal no compro nada que no pueda probar. La licencia estándar vale $300 dólares.

Creo que ellos deberían al menos regalar algunas licencias a algunos Bloggers para que prueben la librería y le digan a la comunidad que piensan.

Creo que, si la librería es buena, entonces eso aumentaría las ventas.  Solo he visto blogs directamente de la compañía y eso no genera confianza. Cada compañía abogara por sus productos.

Lo que si diré es que tienen unos maravillosos templates que como no los he probado, no les puedo hablar sobre ellos.

Telerik

Telerik es otra librería que hay tener en cuenta, esta es una de las más recomendadas de pago; por no decir la más recomendada. Personalmente creo que la librería de Telerik está más enfocada en la funcionalidad que en el UI, aun así, brinda muchos controles bien vistos.

DataGrid

No he usado Telerik, pero hay una prueba gratuita que pueden utilizar para testear. La licencia de Telerik para Xamarin cuesta $899 dólares por desarrollador.

Algo muy interesante que vi es que ellos ofrecen un entrenamiento con la licencia, lo cual no está nada mal.

Syncfusion

Syncfusion sin lugar a dudas es la librería de pago más usada por la comunidad. Y no, no tengo acceso a la data de syncfusion, pero con el hecho de que ofrecen una prueba gratuita y una licencia gratuita para la comunidad ya con eso se gana las demás herramientas, por lo menos en cantidad de usuarios.

Reordering items by Dragging and Dropping in the Xamarin.Forms ListView

Personalmente, soy de los que les gusta usar sus propios controles o al menos tener acceso al código. Esto es porque si hay algún error especifico de la librería puedo bajarme la librería y solucionar el error sin retrasar los tiempos de producción programados que en ciertas ocasiones son fundamentales para la compañía.

Yo tengo mi licencia community de syncfusion, he corrido algunos demos para probar y eso, y tengo que decir que los controles van bien, ya tendría yo que ponerme a testear más detalladamente esto para darles una opinión formal de este tema.

Si quieres saber más sobre los controles de syncfusion visita esta enlace.

Aurora Control Toolkit

Los controles de Aurora son mas o menos nuevos para mí, en el sentido de que creo haberlos escuchados anteriormente pero no le puse mucha atención. Llegue a él a través del Canal de YouTube de Xamarin Developers con el video llamado “Aurora Controls Toolkit For Xamarin.Forms” mientras hacia mi investigación y me actualizaba con todas las herramientas.

Los controles de Aurora son controles que no puedes encontrar en ningún lugar más, o eso es lo que dice la página. La verdad es tienen muchos controles y efectos interesantes que vale la pena revisar.

Para las personas que les gusta testear hay una versión free que puede estar interesante revisar. Ya las otras licencias están desde USD$130 hasta USD$300.

Eligiendo la Vista Previa

Este apartado es un poco especial, ya que en un principio no había herramientas que te permitieran ver los avances en el UI. Ahora ya tenemos varias herramientas de terceros que nos pueden ayudar en este proceso.

Gorilla Player

Gorilla Player fue un ángel que llego a mi vida cuando estuve en apuros al principio de todo.  Gorilla Player te permite trabajar o diseñar tus ampliaciones con XAML en Xamarin Forms sin la necesidad de compilar.

 

Resultado de imagen para xamarin gorilla player

Estas son algunas de sus principales ventajas y características:

  • Permite construir diseños, estilos y demás mientras previsualizas los cambios sin la necesidad de compilar.
  • Puedes previsualizar los cambios en varios dispositivos a la vez.
  • Es una herramienta que se integra con Visual Studio 2015/2017 (Tengo tiempo que no la uso, no sé si soporta VS2019)
  • Notifica de errores en tu XAML
  • Soporta Mac y Windows

Sin lugar a dudas, Gorilla Player es una de las herramientas que se siguen utilizando hoy en dia. Entonces lo recomendable es hacharle un vistazo para comparar con otras herramientas.

HotReload

Una de las herramientas que a mi parecer puede ayudar más a la comunidad es HotReload, sin lugar a dudas. Esta herramienta me ha ayudado mucho y es open source.

Sample GIF

¿Por qué HotReload?

  • Real Xaml / CSS Runtime Reloader (no tipo de previsualizador)
  • Se integra con Visual Studio
  • Soporta Mac y Windows
  • Open source

Esta es una de las herramientas que mas me ha ayudado en lo personal, no puedo decir que es la mejor ya que a mi parecer a todas las herramientas aún le falta un poco para ser perfectas. Sin embargo, es una de las mejores opciones ahora mismo, yo recomendaría que la vean y saquen sus conclusiones.

LiveXAML

Una de las herramientas mas recomendadas en el mundo empresarial y en la comunidad es LiveXAML. He visto muchos buenos comentarios sobre esta herramienta y sin lugar a duda debe ser una a las cuales hay que tomar en cuenta.

Imagen relacionada

LiveXAML más que una herramienta de vista previa, es una herramienta de desarrollo en vivo (hot reload). Estas son algunas de sus principales ventajas y características:

  • Se ejecuta mientras está depurando su aplicación en vivo.
  • Puedes previsualizar los cambios en varios dispositivos a la vez.
  • Es una herramienta que se integra con Visual Studio
  • Soporta Mac y Windows

Si bien es cierto que esta herramienta ha captado la atención de muchos hay que decir que no es perfecta aún. Uno de los apartados que mas se le critica a este es que es una herramienta de pago.

Algunos lo ven maravilloso por pagar una licencia de permanente de € 199 euros, mientras otros critican y dicen que debería ser gratis y Open Source para la comunidad.

Yo dejare la herramienta por aquí, y ustedes tomen sus propias conclusiones.

XAMLator

XAMLator es una herramienta relativamente nueva pero muy poderosa. La misma herramienta se compara con LiveXAML con la única diferencia de que es Open Source. ¡Pero no solo eso, sino que tiene soporte para código detrás!

monkeys

Estas son algunas de sus principales ventajas y características:

  • Funciona con cualquier tipo de proyecto Xamarin Forms y frameworks MVVM.
  • Previsualización en directo en Android y emuladores iOS.
  • Vista previa en vivo en dispositivos reales (solo Android)
  • Vista previa en varios dispositivos al mismo tiempo.
  • Actualizaciones en vivo de XAML
  • Actualizaciones en vivo de CSS
  • Actualizaciones de código detrás en vivo
  • Previsualizador personalizable
  • Soporte para enlaces de datos ficticios

Realmente creo que este es un fantástico proyecto que deberían ver y sacar sus propias conclusiones.

Otros

Si, sé que hay muchos otros más, pero para mí esos son los que mayor impacto o futuro prometedor han tenido. Otras herramientas como C# HotReloadingLiveSharp, etc que tambien pueden hechar un vistazo.

Hay una herramienta que me llamo la atención, parece que solo unos pocos la conocen y no ha tenido mucha difusión entre en la comunidad, esta es RealXAML. Solo tiene tres meses (ahora en julio 2019) de su lanzamiento y creo que deberíamos ver cómo progresa, parece interesante.

Lo que si me gustaría es que dejaran en la caja de comentarios cual es la mejor herramienta (o la que utilizan) para previsualizar sus diseños en Xamarin Forms.

Eligiendo las Extensiones para VS

Las herramientas de terceros siempre han sido de buena ayuda, siempre buscan la forma de agilizar un cierto proceso especifico. En este caso no es la excepción. Veamos algunas herrientas que simplemente amarán.

XAML Power Toys

Si trabajas muy constantemente con formularios XAML Power Toys es para ti. Esta extensión de VS permite a los desarrolladores crear el XAML base de los formularios rápidamente desde ViewModels o Entity Objects. Con esta herramienta ahorraras mucho tiempo a la hora de desarrollo y creo que es buena iniciativa de cara a otras herramientas que podrían surgir.

Select Source Class

XAML Styler

Se acabo el codificar XAML desorganizado, XAML Styler ha llegado. Esta extensión formatea tu código fuente de XAML y ordena cada línea, cada control, cada atributo; simplemente es una maravilla. Los atributos los ordena por importante. La genial de esta extensión es que puede ayudar bastante ya sea un solo desarrollador o un equipo completo a mantener mejor el código, estilo base y mejor legibilidad sin hacer esfuerzos extras ya que la extensión hace su trabajo cada vez que salvas los cambios en el archivo.

Context Menu

Infragistics AppMap

Lo que hace Infragistics AppMap en sencillamente maravilloso. Cuando creas un proyecto esta extensión te permite diseñar toda la aplicación utilizando un diagrama donde se muestran todas las páginas.

Te permite hacer las relaciones y las instrucciones de navegación. Una vez terminas esa parte la extensión te genera todas las vitas con las viewmodels correspondientes y el código de la navegación ya creado, todo esto basado en la arquitectura de Prism MVVM.

Yo llegue a conocer esta herramienta por casualidad mientras me actualizaba al escribir este articulo. Desafortunadamente la herramienta no funciona en mi VS2019. Si a alguien le funciona por favor dejarlo en los comentarios. ¡¡¡Realmente quiero usar esta herramienta!!!

Eligiendo un editor gráfico

Elegir o aprender por lo menos lo básico de algún editor gráfico es fundamental si dentro de tu equipo de desarrollo móvil no hay. Incluso si estas solo o eres freelancer. Hacer tus prototipos primero te ayuda a agilizar los tiempos de desarrollo.

Generalmente cometemos el error de codificar primero y después diseñar a código puro. Esto es una mala práctica, lo primero es que…

No sabes si el diseño que tienes en mente realmente le gustara a tu cliente o a tus usuarios finales.

Lo ideal seria primero validar el diseño antes de tirar la primera línea de código.

Las herramientas que hoy les presento son Sketch y Adobe XD. Son grandes herramientas que les pueden ayudar a crear prototipos fácilmente y en poco tiempo. Estos dos editores graficos son muy populares y tienen infinidad de recursos creados para que ustedes puedan avanzar en el diseño mas rápido.

Hoy en dia se utiliza mucho el estilo de material design para los diseños de las aplicaciones moviles, con cualquier editor gráfico puedes encontrar recursos con todos los controles de material, ya esto de por si es una ventaja que nos elimina la parte de tener que diseñar esos controles y al validar esta parte no ahorramos el tener que cambiar muchas cosas a nivel de código solo porque al cliente no le gusto o quiere cambiar algo.

Consideraciones

Todas estas herramientas utilizadas de la mejor manera pueden potencializar tu trabajo y subir el nivel de valor agregado a tus aplicaciones.

Es bueno recuerdar que el diseño de una aplicación no depende de las herramientas que tenemos, si no mas bien del diseñador y/o programador.

Todas estas herramientas se agregarán a la Biblioteca Universal Xamarin. Se que faltaron muchas herramientas, herramientas que quizás no conozco pero que valen la pena revisar. Si conoces alguna de estas herramientas, por favor has un PR a la Biblioteca Universal Xamarin, nosotros te lo agradeceremos.

Muchas gracias por leer esta publicación! 
Herramientas de Diseño en Xamarin Forms
5 (100%) 4 votes

Otros

feedback

Te invito a dejar tu opinión en la caja de comentarios. Si quieres que hable de un tema en específico o que detalle un poco más algunos temas, déjame saber. Los temas más interesantes serán agregados en mi lista de publicaciones futuras.

¿Te gustan las publicaciones como esta? Entonces, suscribete y activa las notificaciones push para recibir actualizaciones. Nos vemos en la próxima!

2018-10-17T05:45:52-04:00

8
Dejame tus comentarios

avatar
6 Hilos de comentario
2 Respuestas de hilos
0 Seguidores
 
Comentario más reaccionado
El hilo de comentarios más caliente
5 Comentarios de autores
Andres BernalSergioLuis MatosEnriqueFefe Comentarios de autores recientes
  Suscribirte  
Nuevos Viejos Mas votados
Notificar de
Fefe
Invitado
Fefe

Muy buen paper, te felicito, gracias

Enrique
Invitado
Enrique

Muy bueno Luis

Sergio
Invitado
Sergio

Excelente aporte; Gracias.
Saludos!

Andres Bernal
Invitado
Andres Bernal

Buen Aporte

Andres Bernal
Invitado
Andres Bernal

Que buen post

Andres Bernal
Invitado
Andres Bernal

Gracias