Diez razones para que los diseñadores utilicen Figma

https://csform.com/best-free-premium-figma-app-ui-kits-for-2019/

Antes de continuar quiero asegurarles que este artículo no es un comercial. Amo tanto a Figma.

Hace tres años, cuando todavía trabajaba con Sketch, mi amigo, un diseñador de UX ubicado en Moscú, me envió un mensaje de texto diciendo: “Mira esta nueva herramienta, mira si te gusta”. Él tenía mucha más experiencia que yo y cada vez que me contaba algo nuevo, lo comprobaba al instante.

Fue la primera vez que vi Figma.

Mi primera reacción fue Ok, arrancaron muchas cosas del Sketch.. Entonces pensé, ohh, la interfaz es más intuitiva. El siguiente pensamiento fue, ¿No depende de una plataforma? Y un pensamiento tras otro pasó por mi mente con asombro. Presenta el CSS. ¡Esta herramienta es increíble! ¡Vaya, creación de prototipos! Han pasado tres años y ahora pienso, No me veo cambiando a otra herramienta en el corto plazo.

¡Aquí están las 10 razones por las que creo que Figma es increíble!

https://www.figma.com/

Empecemos por lo obvio. Tiene colaboración en tiempo real, lo que básicamente significa que cualquier cosa que cree el diseñador, sucede en modo EN VIVO. Los desarrolladores pueden verlo, las partes interesadas pueden verlo, los gerentes de proyecto, básicamente todos los que tienen el enlace y el permiso pueden verlo. Los desarrolladores pueden codificar mientras el diseñador crea la página siguiente en el mismo lienzo. Incluso pueden dejar comentarios entre ellos.

A diferencia de otras herramientas, como Sketch o Adobe XD, no es necesario publicar la última versión del diseño para que la vea el equipo. Un enlace es todo lo que necesitas.

Aquí sólo hay un inconveniente: puede producirse una falta de comunicación, normalmente en empresas más grandes; cuando el diseñador cambia algo y se olvida o retrasa la actualización de ello a los desarrolladores, más adelante podría volverse confuso. Se podría acusar a los desarrolladores de no actualizar los nuevos cambios cuando ni siquiera saben que hubo un cambio. En el caso de publicar cada cambio como en Sketch y XD, la nueva actualización es un archivo nuevo y por lo tanto es una especie de documentación en sí misma.

https://www.computerworld.com/article/3224399/best-ways-to-run-windows-10-on-a-mac.html

Otro obvio. A diferencia de otras herramientas de diseño, Figma se basa en un navegador, lo que significa que sólo necesitas Internet y un navegador decente, y eres libre de diseñar. E incluso si no tienes Internet, puedes continuar trabajando y se guardará automáticamente cuando se restablezca la conexión. Y debido a que trabaja dentro del navegador, automáticamente hace que Figma sea independiente de la plataforma. Entonces no importa si tienes Mac o Windows. También hay una herramienta de escritorio para ambos, pero puedes ceñirte fácilmente al navegador. Sin embargo, si desea utilizar sus fuentes locales y trabajar en el navegador, debe descargar e instalar el asistente de fuentes Figma, ¡y listo! Para la versión de escritorio, sus fuentes locales ya están ahí.

https://medium.com/figma-design/figma-2-0-now-with-prototyping-and-developer-handoff-1b309a5d025c

La creación de prototipos de Figma es la segunda funcionalidad principal. Tiene una curva de aprendizaje muy rápida, fácil de usar y proporciona una gran cantidad de funcionalidades como superposiciones, animaciones de entrada y salida, propiedad de animación inteligente, interacciones con una pulsación larga, desplazamiento, después de un retraso, clics, recientemente Incluso se agregó animación de desplazamiento. Y la duración de la mayoría de las animaciones es ajustable. También hay muchos ajustes preestablecidos de pantalla y, nuevamente, todo lo que necesita es un enlace para presentar su prototipo. Si tienes la aplicación Figma Mirror puedes presentar el prototipo con tu dispositivo móvil.

Aunque el prototipo de Figma es realmente fantástico y fácil de usar, todavía queda mucho por mejorar. Las herramientas de creación de prototipos como ProtoPie, inVision y Origami proporcionan más funcionalidades y animaciones más avanzadas con líneas de tiempo.

Pero para presentar las interacciones Figma es más que suficiente.

https://www.figma.com/best-practices/tips-on-developer-handoff/an-overview-of-figma-for-developers/

La tercera funcionalidad principal de Figma es la herramienta Inspeccionar. En tiempos en los que todavía trabajaba en Windows, y ni XD ni Figma aún salían, los diseñadores trabajaban principalmente con Photoshop y/o Illustrator. Y las herramientas de terceros como Zeplin eran esenciales para proporcionar CSS a los ingenieros. Podían ver el código CSS en versiones 1x y 2x (en aquel entonces todavía no había super retina, por lo que tampoco había 3x). A diferencia de Sketch y XD, Figma tiene su propia herramienta de inspección. Por lo tanto, no es necesario utilizar otra herramienta para realizar la transferencia. Y a excepción de los códigos CSS, la transferencia de Figma también presenta códigos de iOS y Android.

https://idesigntalks.wordpress.com/2019/12/13/design-how-i-set-my-grids-in-figma/

Creo que la mayoría de ustedes ya están familiarizados con la cuadrícula de diseño (guías visuales que les ayudan a mantener la coherencia en su diseño). Figma lo lleva a otro nivel. Hay tres tipos principales de cuadrículas de diseño: una cuadrícula simple, donde puedes establecer fácilmente el tamaño que desees (yo uso principalmente 8 puntos). Una cuadrícula de columnas y filas. Las cuadrículas de filas y columnas son similares, sólo que una es vertical y la otra es horizontal. Estas cuadrículas tienen la opción de establecer márgenes, medianil, número de columnas (filas) y anchos de esas columnas. También hay opciones de alineación. Lo mismo ocurre con otras herramientas, entonces, ¿qué hace Figma mejor? A diferencia de otras herramientas, no tiene tres sino cuatro opciones de alineación: izquierda, derecha, centro y estiramiento.

Estirar es una opción que cambia automáticamente el ancho de sus columnas según su número y los tamaños de medianiles y márgenes.

Y otra característica sorprendente de la cuadrícula es que cuando cambia el tamaño del marco, un objeto dentro de él (si se establecen restricciones) se expande automáticamente de acuerdo con las columnas de la cuadrícula.

https://www.figma.com/blog/figma-feature-highlight-component-overrides/

Estamos familiarizados con los componentes. Se introdujeron por primera vez en Sketch (en realidad, si lo sé correctamente, en React JS, pero ahora estamos hablando de herramientas de diseño). Y el sistema de componentes es realmente el salvador de los grandes proyectos.

Para aquellos que no saben qué es el componente, es básicamente una plantilla de elementos de interfaz de usuario que usted mismo crea. Ok, déjame explicarte con un ejemplo.

Digamos que creamos un botón, de tamaño 128x48pt, y realiza alguna acción como Acceso o añadir a la cestacualquier cosa, pongámosle un nombre X. Ahora imagina que necesitas ese botón en muchas páginas, entonces lo copias y lo pegas. X botón donde sea necesario. Pero un día, una investigación muestra o una parte interesada dice que el color de la botón X debería ser cambiado. Antes de los componentes, retrocedíamos y cambiábamos los colores de cada copia de X, o elimínelos todos y copie y pegue el nuevo. Ahora, cuando conviertes tu botón X en un componente, se convierte en un botón principal. Ahora, cuando copie y pegue desde ese botón principal, todos los botones secundarios se vincularán al principal. Y cuando cambia el color del botón principal, los colores de todos sus botones secundarios cambiarán automáticamente. Puedes darle propiedades únicas a un niño, pero eso no afectará a los padres. Espero haberlo explicado claramente, de todos modos algún día escribiré un artículo más amplio sobre componentes y todas sus capacidades.

Entonces, ¿qué hizo Figma de manera diferente? Si nombras los componentes poniendo “/”después del nombre de sus padres, todos los hijos de cierto padre ingresarán automáticamente a los activos y a un menú desplegable donde podrá seleccionar fácilmente el que desee. Últimamente, incluso actualizaron creando esta nueva función: Variantes.

https://rojcyk.com/blog/figma-variants-intro

En pocas palabras: ahora no es necesario separar a un padre de un hijo con el símbolo “/”. Todo lo que necesita hacer es hacer clic en Agregar variante y la nueva variación se copiará y agregará automáticamente a su biblioteca de recursos. Sólo tienes que cambiar la propiedad que necesites. Con esas variantes también hay un Propiedad, se usa cuando desea crear, digamos, tres variantes, cada una con sus diferentes propiedades. Por ejemplo, hay estados del cuadro de entrada (predeterminado, pasar el cursor, enfocar), cada uno con tres propiedades (error, éxito, predeterminado).

Después de que esas variantes aparezcan en los recursos y en el menú desplegable a la derecha, puede intercambiar fácilmente entre componentes sin copiar y pegar nada.

https://www.drupal.org/project/commerce_free_price_formatter

Sé que es raro ¿verdad? Si eres el único diseñador de tu equipo o solo sois dos, es completamente gratis. Figma cobra cuando se necesitan más de 2 editores en el proyecto. En equipos pequeños como el equipo donde trabajo, soy el único editor (el que puede editar cosas), y quien tenga el enlace puede ver todo allí. Si no recuerdo mal, eran algo así como 12 dólares por editor. Y los espectadores pueden ser tantas personas como quieras. Así que sí, simplemente abre tu navegador, regístrate y vuélvete loco con esta increíble herramienta de diseño.

Foto de Windows en Unsplash

Sketch, Figma y Adobe XD son las tres principales herramientas de diseño de UI que existen y las tres son geniales, cada una con sus pros y sus contras. Todos los que leen mis artículos probablemente ya sepan que soy fanático de Figma y que es mi herramienta de referencia. Intento convencer a todos para que usen Figma (juro que no tengo ningún bono allí, simplemente me encanta la herramienta). Y aunque amo a Figma sobre todo, no puedo ser injusto; este octavo punto se relaciona con los tres. Sus curvas de aprendizaje son casi las mismas. Siempre digo que si conoces bien el photoshop es cuestión de días conocer Figma, Sketch o XD. Pero incluso si no sabes nada de Photoshop, simplemente abre cualquiera de los tres programas, mira todo lo que hay en el lienzo, prueba todas las herramientas que hay allí y estoy seguro, después de un par de horas de jugar. ya conocerás mejor las herramientas. Es muy fácil de aprender, créeme, inténtalo y verás. Para conocimientos más avanzados viene el siguiente punto.

https://www.figma.com/resources/learn-design/#lessons

Figma tiene su video tutorial en línea y texto (completamente gratuito) sobre, si no todas, la mayoría de sus características. Te explican todo lo que hay. Explican cómo funcionan los grids, explican componentes, explican todas las herramientas, colores, etc. Y lo mejor es que también tienen tutoriales de diseño UX (Videos y Artículos) en su sitio web. No solo Figma sino en general el diseño UX. Entonces, incluso si no sabes nada sobre diseño UI/UX, sus tutoriales te brindan la mayoría de los conceptos básicos que necesitas. Incluso si no quieres usar Figma, puedes aprender los tutoriales de diseño allí e ir a Sketch o XD.

https://help.figma.com/hc/en-us/articles/360038006474-Interact-with-files

Figma tiene una gran comunidad de grandes diseñadores e ingenieros. Crean complementos para los diseñadores, comparten sus trabajos para que la gente los use. Simplemente toma lo que necesitas y lo copias en tu diseño, cambia el color y el tamaño si es necesario según tus guías, y listo.

No los enumeraré todos, pero señalaré algunos de los que uso más.

Los archivos que uso principalmente:

•Plantillas de diseño de iOS 14: como sugiere el nombre, aquí puede encontrar la mayoría de los elementos de la interfaz de usuario de iOS. Más útil al diseñar una aplicación para iOS.

•Diferentes tipos de maquetas de pantalla (como MacBook, iPhone, etc.): principalmente para presentar los diseños a partes interesadas, clientes potenciales o incluso carteras.

•Google Material Design: elementos del diseño de materiales de Google.

•Kit de interfaz de usuario de Android: igual que su nombre indica, elementos de interfaz de usuario de Android.

Y muchos otros.

Como para complementos, creo que son una parte esencial del diseño de la interfaz de usuario. Muchos complementos nos lo ponen tan fácil que no podemos dejar de usarlos.

https://blog.prototypr.io/12-super-helpful-figma-plugins-you-can-start-using-now-9ecdf43fcf1

Algunos de los Complementos los que uso más son.

•Unsplash: una enorme biblioteca de excelente apariencia…