Características de Figma
Todo está en la nube
Como te he avanzado en la introducción, Figma está basado en el navegador. Lo que significa que tus archivos estarán siempre accesibles y podrás evitar perder tiempo (e invertir dinero) en servicios de almacenamiento como Google Drive y Dropbox.
Tienes también un historial de cambios de cada archivo, por lo que siempre podrás volver a algún punto anterior. Y todo lo que borres está accesible en el Deleted Files que te he comentado en el paso anterior.
Los componentes en Figma
Crear un componente con Figma es igual de fácil que hacerlo con Sketch: es suficiente con seleccionar lo que lo compondrá y hacer clic en el “rombo hecho de rombos”.
La capa pasará de azul a lila y cambiará el icono de su izquierda:
Si necesitas editarlo, solo tendrás que hacer clic en él (es decir, seleccionarlo) y añadir las capas necesarias o las modificaciones que quieras hacerle.
Al igual que Sketch, todos los componentes pueden sobreescribirse. Para ello, solo hay que hacer clic en él e ir modificando los colores, textos, etc.
Compartir el proyecto con Figma
Este es un punto a favor para Figma. Si quieres compartir un proyecto con Sketch tendrás que utilizar Sketch Cloud u otra herramienta de terceros.
Con Figma tenemos un sistema muy parecido a Google Drive: si haces clic en el botón Share del menú horizontal superior se te abrirá una pequeño pop-up con la configuración del enlace:
Es una buena forma de compartir los archivos sin llegar a enviar el archivo original o sin que se vean los componentes (que es lo que sucede con Sketch Cloud y los símbolos).
Si se comparte en forma de prototipo, quien recibe el enlace puede añadir comentarios si tiene usuario en Figma.
Figma vs Sketch
Por lo general siempre defiendo Sketch, pero hay que reconocer que hay algunos casos en los que los otros programas son superiores.
Qué me gusta de Figma
- Permite trabajar colaborativamente en un archivo. Esto soluciona algunos problemas que se dan en equipos de diseño, cuando dos diseñadores quieren trabajar a la vez en un solo archivo de Sketch. Solo queda una opción, duplicarlo y después “juntarlo” todo (o dejarlo en dos archivos y arriesgarse a perder parte del proyecto).
- Puede utilizarse en Windows (y cualquier otro sistema operativo). Sinceramente, sigo utilizando Mac porque Sketch solo está disponible en ese sistema operativo. Y Figma me está haciendo replantear algunas cosas que creía que nunca iban a cambiar: me planteo volver a Windows.
- Ágil y disponible en todas partes. Los archivos de Figma son accesibles desde cualquier ordenador y, lo que es mejor, no hace falta que descargues nada. Simplemente inicias sesión y ya lo tienes todo allí.
Reduce la cantidad de software de terceros. Con Sketch, quieras o no, acabas utilizando Zeplin, Dropbox y otros software que te ahorras con Figma.
Qué adoro de Sketch
- Los símbolos. Por mucho que Figma tenga los componentes, me parecen mucho más complicados de gestionar y editar que los símbolos de Sketch.
- Una interfaz clara. Ya lo he explicado más arriba: el UI de Figma es tan simple que en algunos casos confunde y hace que debas mirarte más de una vez qué tipo de capa estás seleccionando o cual está dentro de cual.
- Los plugins. Las capacidades de Sketch se amplían exageradamente al utilizar los plugins. Con Figma no puedo comprar temas de accesibilidad, renombrar de golpe capas, distribuir elementos con un shortcut, etc. Sé que la “pluginitis” es mala, pero hay algunos que realmente ahorran tiempo (o clics).
- La comunidad de Sketch es inmensa. Existen infinidad de recursos para descargar archivos, plantillas, plugins e incluso resolver fácilmente tus dudas.
Elementos de figma
Los componentes en Figma nos dan mucho juego a la hora de crear interfaces de usuario y sistemas de diseño. Si creas componentes, ahorrarás un montón de tiempo y te ayudarán a mantener la coherencia en tus diseños. Vamos a ver cómo.
¿Qué es un componente?
Un componente es una capa o un grupo de capas que podemos reutilizar en nuestro diseño. Por ejemplo, el pie de página —que normalmente se repite en todas las páginas de una web— lo podemos convertir en un componente. Ahora vas a ver las ventajas.
https://3ymedia.school/componentes-figma/
Patrones de diseño con los que solemos crear un componente
En casi todos los proyectos que hacemos, solemos crear componentes con los típicos patrones de diseño. Estos son algunos patrones que se utilizan más de una vez en las interfaces de usuario:
- Encabezados
- Pies de página
- Carruseles
- Botones
- Iconos
- Menús
- Tooltips
- Elementos de formulario
- Cards
Grillas en figma
Un grid es la estructura invisible sobre la cual se apoyan todos los elementos visuales. Su función es la de separar cada uno de los componentes de la interfaz en un espacio ordenado, organizando los sitios que quedarán en blanco y aquellos que contendrán formas. Un grid bien definido se transforma en una ayuda al diseño que, generando orden y simplicidad, mejora la usabilidad de la app.
Por lo general las retículas web de desktop tienen 12 columnas, esto es sus sistemas de grillas, esta información es crucial para los desarrolladores.
Tarea
Cree su archivo de trabajo y agregar al menos 1 frame desktop y uno mobile con grillas de diseño.
Descargar/Copiar un archivo de Figma Community y compartir su descubrimiento con el curso.
