UX en Acción: Herramientas y Estrategias que han Moldeado mi Experiencia Profesional

Durante los 4 años que llevo trabajando como diseñadora de productos, he ido recopilando una lista de pequeños datos, plugins y artículos que me han ayudado a comprender nuevos aspectos del diseño, facilitando mi comunicación con mi equipo. Comencemos con la herramienta más básica, Figma. En mis años como diseñadora, he trabajado con Adobe XD y Sketch. Con esta experiencia, he aprendido la importancia de no aferrarse a una sola herramienta de diseño, ya que la tecnología avanza rápidamente. Es crucial estar al tanto de nuevas herramientas que puedan aportar valor y mejorar nuestro trabajo. No estoy sugiriendo que debamos cambiar constantemente, pero es importante mantener la mente abierta para probar nuevas opciones.

En mi experiencia, Figma ha sido mi herramienta favorita hasta el momento. Esto se debe principalmente a su facilidad para traducir el diseño al equipo de desarrollo. Además, ofrece una amplia gama de videos instructivos en plataformas como YouTube, que explican de manera clara y sencilla cómo utilizar sus herramientas. Asimismo, la comunidad de Figma proporciona una gran cantidad de documentos y plugins que simplifican muchas de las tareas que realizamos. En este artículo, repasaremos algunos de estos recursos para que puedas aprovechar al máximo esta herramienta.

Comencemos con una lista de plugins que, en mi opinión, van siendo mis favoritos a la hora de trabajar:

1. Batch Styler: Sirve para sustituir toda una variable de los estilos de texto, por ejemplo, para cambiar toda una font family.

2. Contrast: Revisar contrastes de colores.

3. Cover Status: Agregar portadas a tus archivos y mantiene todo organizado, puedes ordenar por diferentes categorías.

4. Font Scanner: Puedes ver todas las fuentes que se usan, además de sus tamaños.

5. Lore: Rellena textos con Lorem Ipsum, puede ser según cantidad de palabras o líneas de párrafo.

6. Stark: Nuestro mejor aliado para mantener la Accesibilidad en nuestro documento.

7. Styler: Te ayuda de manera rápida a documentar los estilos que usas en el documento.

Es importante estar leyendo y aprendiendo de otros para tener referencias. Posiblemente ya has escuchado de Dribbble o de Awwwards; en ambos sitios puedes ver muchas tendencias, pero hay que ser conscientes del tiempo y dinero que se estén invirtiendo en nuestros proyectos. Esto te puede ayudar a ser más realista a la hora de diseñar y tener un buen desempeño del equipo de programación. 

También, no soy fan de hacer diseños solo porque marcas grandes lo hagan, pero Mobbin es una buena herramienta para poder ver pantallas de algunas aplicaciones ya existentes, así no tienes que andar descargando mil aplicaciones y documentando todo, sino que te facilita este proceso.

Cuando estés empezando a construir tu UI kit  ( que por cierto, te recomiendo este documento que creé para hacer más fácil iniciar un proyecto Free Strater UI Kit ), posiblemente estés buscando listas de iconos, ilustraciones, tipografías y colores, y no estás cómodo con los documentos de la comunicación de Figma. Te recomiendo Feather, es un sitio donde puedes editar iconos en peso y tamaño de manera rápida y fácil, Typescale para crear tu familia de tipografía y tener acceso tanto en px como en rem. Y por último, Undraw, es un banco de ilustraciones sencillas, y mi parte favorita es que puedes cambiar el color primario y al exportar no tendrías que gastar tiempo cambiándolas una por una.

Si buscan una herramienta que les ayude a revisar accesibilidad en su sitio ya en producción, les recomiendo Axe DevTool, es una extensión sencilla y proporciona mucha información útil para mejorar sus proyectos. Además, les comparto una lista que he creado de documentos en Medium, para desarrollar su aprendizaje en UX & UI. 

Ahora, si nos enfocamos un poco más del lado de desarrollo, a la hora de crear componentes, Material Design es una buena librería para comenzar, o Accordion te puede ayudar con listas de elementos que se enlazan más en programación. 

Una lección que he tenido es que no siempre como llamamos en diseño a un componente así se llama en desarrollo, pero otra lección es que no todos los artículos, empresas o documentos que encuentres van a llamar del mismo modo al mismo componente que usas. Así que mi recomendación es crear su propio glosario junto a su equipo de desarrollo.

Espero que encuentren útiles estos consejos y herramientas que he ido recopilando a lo largo de estos años. Como recomendación final para integrar todo esto con su equipo, les sugiero mantener una comunicación clara y estar abiertos a escuchar sobre nuevas formas de abordar los desafíos. Siempre hay más de una manera correcta de resolver un problema; lo importante es encontrar la que mejor se adapte a las necesidades de nuestro equipo.

Los invito tambien a ver mi website & canal de figma .