Analítica web
Reflexiones sobre madurez digital, datos y tecnología

UX Figma: primeros pasos

Se lee en 1 minuto

¿Qué es Figma?

Figma es una aplicación de diseño de interfaces de usuario tanto en web como mobile. Es una herramienta online y gratuita que permite generar código CSS para el traspaso sin necesidad de tener conocimiento de este.

Transformación de los elementos a CSS, iOS, Android

Como veréis en la imagen inferior, haces click en el margen derecho donde aparece “code” y en este apartado se despliega todo el código.

code

Además, te permite transformar los elementos que vas creando en las siguientes opciones: CSS, iOS, Android:

CSS, iOS, Android

Colaboración en tiempo real

Permite la colaboración, en tiempo real, entre varias personas, lo que ayuda a que varios usuarios trabajen en el diseño de una nueva app, por ejemplo, de forma remota y simultánea, comunicándose entre ellos y avanzando en el resultado.

Como se puede apreciar en la imagen hacemos click en “Share”:Can view

Hacemos click en la flechita donde aparece “can view“ y seleccionamos “can edit”:can edit

Para proyectos donde trabajan un gran número de diseñadores, esta herramienta es muy útil para que varias personas puedan colaborar en un mismo diseño, estén donde estén, ya que cada vez las empresas interiorizan más los trabajos en remoto y sobretodo cuando se trata “pulls” (desarrollo, diseño… etc.).

Por lo tanto, mientras un miembro del equipo cambia el diseño de un elemento concreto, icono o pantalla, el resto del equipo puede observar e ir aplicando otros cambios.

Al ser en tiempo real, agiliza los procesos de aprobación y ejecución y además facilita la comunicación entre lo miembros del equipo.

Importar archivos Sketch

También solemos oír mucho sobre sketch (herramienta de diseño vectorial).

Muchas veces cuando otros miembros del equipo, es decir, consultora y cliente trabajando en el mismo proyecto, nos envían el archivo sketch con los iconos actualizados que va a utilizar la empresa (por parte del cliente) u otros diseños en sí, al abrirlos desde otra herramienta, puede que se descuadren e incluso que no se puedan abrir.

Con Figma tenemos la opción de abrir estos documentos provenientes de sketch a partir de esta pestaña, en las que mantendrá el formato y el diseño completo. Haremos click en “New from Sketch File” y abriremos el documento sketch deseado:

sketch from file

Espero que haya servido de ayuda y sean muchos los que se animen a probar esta herramienta ya que es online y gratuita.

¡Hasta el próximo post!


*Fuentes:

● Tsacudakis, J. (2019): “10 tips on using components in Figma”. Medium Blog

● Rhode, M. (2011): “Sketching: the visual Thinking Power Tool”. A list apart Blog

● Imagen destacada: Unsplash

Escribe tu comentario

uno × tres =

Navegar