Controles e Interfaz
Figma presenta los controles que la gra mayoría de aplicaciones de diseño tienen, principalmente tendremos los siguientes controles para interactuar con la interfaz:
- Clic Izquierdo: Selección
- Clic Izquierdo Mantenido: Selección múltiple
- Clic Derecho: Menú contextual
- Ratón Central: 🤚 Arrastrar nuestra vista
- Ctrl + Ratón Central: Zoom. Alternativamente se pueden usar las teclas de + y –
La interfaz tiene 4 menús diferenciados:
Header: El contenido de este menú está a su vez dividido en cuatro grupos de herramientas.
- Menú de Hamburguesa: A la izquierda, menú clásico donde tenemos todas las opciones relacionables con cualquier menú de aplicación de Windows.
- Herramientas de Diseño: A la izquierda tras el menú de hambuguesa aquí tenemos las herramientas con las que vamos a añadir nuevos elementos al diseño.
- Menú Contextual Central: Las herramientas disponibles en este menú irán cambiando en función de que tengamos seleccionado durante el proceso de diseño, por ejemplo, si seleccionamos el canvas, podremos mover el proyecto a una carpeta, renombrarlo, etc. Pero si tenemos seleccionado una figura geométrica, tendremos operaciones booleanas, _máscaras _y otras herramientas.
- Menú Derecho: Aquí tenemos una lista de las personas actualmente editando el archivo; un botón para compartir el mismo; el botón para comenzar la vista de prototipado; y el nivel de zoom actual.
Canvas: Aquí es donde un diseádor va a pasar la mayoría del tiempo, es donde todos los elementos de la interfaz son colocados y modificados.
Jerarquía: Este panel tiene dos vistas, un panel donde podemos ver la jerarquía del proyecto, es decir, el orden de «dibujado» y el orden de parentesco de todos los elementos de la interfaz, cualquier elemennto que aparezca en el canvas aparece en este panel.
Además, desde este panel también podemos acceder a los assets, donde encontraremos los componentes y las librerías, que serán discutidas más adelante.
Inspector: Este panel nos ofrece una vista en forma de datos de el elemento que tengamos seleccionado, por ejemplo, si tenemos seleccionado un cuadrado, nos dará información como su tamaño, posición, rotación, color, etc. La cual es editable des de este panel.
El inspector también nos da acceso al panel de prototipado, el cual es útil para cuando se quiera implementar la navegabilidad por la interfaz, tema discutido más adelante.
También nos da acceso a la vista de inspección, que es muy similar a la vista por defecto pero sin poder modificar las propiedades del objeto, y esta incluye una traducción a CSS, ‘android’ e ‘ios’.
Frames
Un frame es una vista, será el marco sobre el que se diseñará la aplicación, el contenedor de todos los elementos de la interfaz. Cada fram que creemos será el equivalente a una pantalla de la aplicación.
Para crear un frame podemos hacerlo desde el menú desplegable que encontramos en el header, pulsando f o a sobre el canvas.
Una vez seleccionada la herramienta podremos, arrastrar para crear un rectángulo en el canvas, el cual pasará a ser nuestro nuevo frame, o seleccionar una de las plantillas que ofrece figma en el inspector, por ejemplo: Google Pixel 2 XL.
Tras la elección de uno de estos, ya podremos empezar a tabajar en el diseño de nuestra aplicación.
Jerarquía y Grupos
La jerarquía es una lista con todos los objetos que tenemos en el canvas. Si colapsamos el acordeón al completo, solo veremos objetos fuera de frames y los propios frames que hayamos creado, dentro de estos, veremos los objetos que los componen (Si arrastramos un objeto de un frame a otro, este pasará a ser hijo del frame destino en la jerarquía). Cada objeto es hijo del objeto que esté un nivel superior en la jerarquía. La jerarquía también es el orden de renderizado, es decir, el orden en el que se pintan las cosas en pantalla. En el caso de figma, el primer objeto en renderizarse será el que esté más abajo en la jerarquía, y por tanto, será el que apareza por debajo del resto. En este ejemplo se vé como funciona la jerarquía:
El objeto ‘Verde’ está más abajo en la jerarquía, por tanto, primero se pinta este, y luego se pinta ‘Rojo’ y por eso aparece encima.
No hay que confundir, el orden de renderizado, con la profundidad que se genera con los objetos padre e hijo. Para esto introducimos los grupos, su propio nombre indica lo que son, conjuntos de objetos, que hacen más facil su reposicionamiento en grupo. El orden de renderizado en estos se mantiee, así que no hay que aprender nada nuevo al respecto. Veamos un ejemplo:
Para crear un grupo solo hay que seleccionar varios objetos (manteniendo shift y haciendo clic en los objetos que queramos agrupar) y, con el meú contextual presentado haciendo clic derecho, seleccionar ‘Selección de Grupo’, o simplemete hacer ctrl+g tras seleccionar los objetos.
En los objetos de la jerarquía tenemos dos herramientas que pueden ser muy útil cuando tenemos muchos objetos y estamos intentando editar solo algunos directamente desde el canvas. Estas nos permiten bloquear y ocultar un objeto. Bloquear significa que no se permite que puedan ser seleccionardos en el canvas ni hacerle modificaciones (Indicar que si se bloquea un objeto que esté en un grupo, si al grupo se le aplica una transformación, el objeto bloqueado si se verá afectado por esta modificación). Esta herramienta también es útil si que quiere seleccionar algún objeto que esté por detrás del objeto bloqueado, ya que podremos acceder a el sin tener que apartar el bloqueado. La herramienta de ocultar simplemente esconde el objeto para que non se vea.
Herramientas
Existen tres categorías de herramientas y una cuarta para comentarios, que se discutirán más adelate. Formas, Trazos, Texto. Vamos a ver cada una de ellas:
Formas: La primera herramienta que encotramos nos permite crear formas geométricas, cuadrados, líneas, hasta estrellas. Cuando creamos una figura, podremos hacer varias transformaciones típicas: Mover, escalar, rotar, alinear, etc. Si colocamos el ratón sobre la figura, tendremos una funcionalidad extra, la cual permite modificar la curvatura de los vértices, como se puede ver a continuación:
Existen un par de combinaciones de teclas que hacen la herramienta de escalado muy potente, si escalamos desde un vértice haciendo uso a la vez de la tecla shift mantendremos es ratio de aspecto de la figura; si usamos la tecla alt haremos el escalado relativo al centro de la figura, en vez de la relatividad por defecto que mantiene el vértice opuesto al que se está arrastrando como el pivote.
Esto, evidentemenete, no se queda ahí. Como ya se ha comentado, existe un menú contextual que en función de la herramienta que estemos usando, cambia. En el caso de las formas, tenemos tres herramientas adicionales. Editar la geometría del objeto, convertir en componente, enmascarar y una cuarta oculta que veremos después de estas tres. Vamos a ver para que sirven:
- Editar la geometría: Como el propio nombre indica, vamos a cambiar la estructura de la forma pudiendo alterar la posición relativa de cada uno de los vértices con respecto al resto. A esta herramienta también se puede acceder haciendo doble clic sobre la propia forma.
- Convertir en componente: Los componentes serán discutidos más adelante, pero por ahora diremos que son conjuntos de objetos que luego podremos utilizar como estamos usando las formas ahora.
- Enmascarar: Probablemente la herramienta más interesante de las tres, y la que más puede confundir al principio. Para esto, necesitaremos tener dos figuras en la jerarquía. Digamos que tenemos las dos siguientes figuras:
‘Verde’ está por encima de ‘Rojo’, esto es importante porque la máscara se asignará al objeto que esté debajo en la jerarquía para que esta máscara se le aplique al objeto que esté encima. ¿Qué quiere decir todo esto? Una máscara coge la forma del objeto que esté debajo en la jearaquía (En este caso ‘Rojo’) y solo muestra la parte del objeto superior en la jerarquía (En este caso ‘Verde’). Es decir, enmascara todo aquello que no coincida (Una operación binaria AND). El resultado de la máscara será el siguiente:
- Esto nos da muy buen pie a la cuarta herramienta oculta, los Grupos Booleanos: Esta opción aparece cuando seleccionamos dos objetos en vez de uno:
Con los propios iconos, se puede ver fácilmente que ocurre con las formas cuando les aplicamos estas operaciones, así que no se van a explicar en detalle. Si destacar que cuando una de estas operaciones se aplica, se crea un grupo en la jerarquía con la propiedad booleana seleccionada, por ejemplo:
Puntos De Anclaje y Grids
Los puntos de anclaje son una herramienta clave para que nuestra interfaz sea responsive. Indican la posición relativa a la cual están anclados al padre. Es decir, si el objeto padre cambia de tamaño, nuestro objeto hijo, matendrá su posición con respecto al punto de anclaje asignado. Veamos un ejemplo:
La forma verde, está anclada arriba a la izquierda del frame blaco a una distancia x de 10 y una distancia y de 20.
Bien, si nuestro frame cambiase de tamaño, la forma verde se mantedría a 10 um del lado izquierdo del frame y a 20 um del lado superior, como vemos a continuaión:
Pero se puede hacer cosas más útiles con las diferentes opciones que los puntos de anclaje nos ofrecen.
Por ejemplo, si ajustamos la forma verde a la parte superior del frame, como si fuese una barra de herramientas superior, podemos configurarla para que siempre se matenga arriba y escale con el frame. Esto lo configuramos seleccionado la opción que obliga a mantener la misma distancia siempre con el borde izquierdo y con el derecho (No tiene por que ser necesariamente la misma distancia).
Los puntos de anclaje, están muy relacionados con los grids. Estos nos permiten ordenar elementos de manera dinámica, haciendolo muy útil para diseños responsive, vamos a ver como podríamos usar un grid de columna para tener una barra superior con tres botones perfectamente distribuidos.
Al hacer esto, aparecerán tres columnas rojas, con una opacidad del 10% así:
Ahora, podremos colocar elementos dentro de estas guias (Porque no dejan de ser guías) y asignarles a todos estos elementos el punto de anclaje (centro, centro). Con esto conseguiremos el siguiente efecto:
Si en vez de usar el tipo de Grid ‘stretch’, usásemos ‘center’, obtedríamos el siguiente efecto:
Componentes (Assets) y Librerías
Bien, ya se ha comentado que un componente es un conjuntos de objetos que luego podremos utilizar pero ¿Qué significa esto realmente? Bien, imagiemos la la barra superior que hemos creado antes con el grid. Normalmente, ese tipo de componentes se va a repetir durante todas las vistas de nuestra applicación y sería muy tedioso crearlas una y otra vez, podríamos copiar y pegar si, pero a más complejo que se vuelva el proyecto, más difícil se vuelve este método. Aquí es donde entran los componentes, básicamente un componente es una copia del objeto que deseemos, que vivirá en el menú de assets (En el panel izquierdo) al cual siempre tendrémos acceso rápido y podrémos arrastrarlo y colocarlo donde queramos sin necesidad de ir a buscar el menú en otras vistas.
Para hacer un componente solo tendremos que seleccionar el objeto que queramos y usar la herramienta de crear componente del menú contextual de arriba.
Ahora, si nos vamos al panel de assets, veremos que nuestro nuevo componente está ahí, clasificado por el frame en el que se creó:
Ahora podremos arrastrar este componente a cualquier sitio que queramos. Pero ¿Que pasa si modifico el componente más adelante? Esa es otra ventaja de usar componentes, si se hubiese hecho copiando y pegando de un frame a otro, habría que revisar todos los frames donde se haya pegado, pero con un componente no. Ya que si modificamos el componente, esta modificación se aplicará a todas sus copias. Si, por el contrario, queremos hacer una modificación especial para una de las vistas, podrémos hacer clic derecho y seleccionar ‘desvincular instancia’ lo cual nos permitirá hacer modificaciones a este, pero ya no estará relacionado con el componente original, y por tanto no recibirá los cambios que se le hagan a este.
Si estamos usando figma en un equipo, ahora podrémos crear librerías, estas son una colección de componentes que pueden ser incorporadas por en otros proyectos. Por ejemplo, un equipo podría tener una colección de logos, donde tenga todas las presentaciones de logo de su emperesa, y solo tener que importar la librería en cada proyecto, en vez de tener que crear un componente logo cada vez que empiezan un nuevo proyecto.
Prototipado
Las herramientas de prototipado, nos permiten diseñar y simular la navegabilidad de nuestra aplicación. Primero seleccionaremos la pestaña de ‘prototipo’ en el panel derecho. Una vez seleccionado, cuado hagamos clic sobre un elemento en el canvas, nos aparecerá un simbolo + dentro de un circulo, indicando que podemos crear una conexión cuando interactuemos con ese objeto:
Vamos a crear 3 frames adicionales, cada uno con una forma diferente para probar la navegabilidad, algo así:
Ahora, vamos a hacer uso de la conexión de la herramienta de prototipado arrastrando desde el pequeño más. Saliendo de cada una de las figuras a su correspondiennte frame, así:
Vemos que aparece un menú a la derecha, en este podremos configurar como será la transición, en mi caso la voy a hacer que sea al hacer clic y que tenga una animación ‘Move In’.
Voy a repetir el proceso para el resto de figuras y para los botones de vuelta. Tras esto, vamos a darle al play arriba a la derecha, en el menú superior para probar nuestro prototipo.
Comentarios
La herramienta de comentarios es esencial para un workflow en equipo. Cuando seleccionemos esta herramienta, aparecerán marcadores de donde hay comentarios, a los cuales, si hacemos clic, abriremos y podrémos observar el feedback de nuestros compañeros que, evidentemente, siempre será constructivo.
Exporte
Para exportar, tenemos dos opciones: exportar un frame individualmente, o exportarlos todos.
Para exportar un frame, lo seleccionamos y en el inspector, seleccionamos exportar. Podremos cconfigurar el formato, la escala de exporte y un prefijo si así se desea.
Para exportar todos los frames, en el menú de hamburguesa>archivo>exportar frames como PDF…
Y aquí concluye esta guía introductoria a figma. Figma es una herramienta muy potente y sencilla a su vez con la que podremos diseñar cualquier cosa, esto lo consigue con herramientas muy simples y dando completa libertad creativa al usuario.