Figma destaca como una herramienta indispensable para diseñadores, equipos de desarrollo y cualquier persona que busque una plataforma intuitiva para dar vida a sus ideas. En este post, aprenderemos qué es Figma y cómo dar de manera detallada los primeros pasos con esta herramienta que ha transformado la industria del diseño y predilecta de tantos equipos creativos.
¿Qué es Figma?
Figma es una herramienta colaborativa de prototipado web y edición de gráficos vectoriales que te permite crear, modificar y compartir diseños de interfaces de usuario, prototipos interactivos, y otros elementos gráficos en tiempo real.
Posee una serie de características que lo hacen muy atractivo frente a su competencia:
- Tiene una versión gratuita que es bastante completa y te ofrece muchas posibilidades.
- Está alojado en la web (aunque también puedes instalarlo) y puedes empezar a trabajar con él tras un simple registro. Y, lo más importante, puedes compartir tus proyectos con tu equipo y hacer modificaciones en la misma mesa de trabajo trabajando todos al mismo tiempo.
- Tiene una comunidad muy grande que te ofrece numerosos recursos para descargar: archivos, plugins, plantillas…
- Permite crear componentes lo que contribuye a que tus diseños sean más coherentes y consistentes.
- Se integra con otras herramientas de diseño y desarrollo, como Sketch, Adobe XD, InVision Studio o Zeplin.
- Te permite crear diseños responsive que se adapten automáticamente a distintos tamaños de pantalla y dispositivos, lo que te ahorrará mucho tiempo.
Y, además de todas estas ventajas, Figma tiene una interfaz sencilla e intuitiva que hace que el proceso de aprendizaje sea bastante rápido. A continuación vamos a ver cómo dar nuestros primeros pasos con él.
1. Crear una cuenta
El primer paso para poder utilizar Figma es registrarse y crear una cuenta en https://www.figma.com/. Clicamos en el botón de Get started for free y podemos crear nuestra cuenta con un usuario y contraseña o continuar con nuestra cuenta de Google.
Una vez dentro de la aplicación podemos ver los tres planes que ofrece:
- Starter (Gratuito)
- Professional
- Organization
El Starter permite crear 3 archivos, 3 páginas y 1 proyecto y tiene todas las características básicas de Figma, incluidos los proyectos de colaboración en tiempo real y una cantidad limitada de bibliotecas compartidas.
2. Crear un archivo
Para comenzar a trabajar debemos crear un archivo nuevo así que clicamos en el apartado Drafts del menú de la izquierda y llegaremos a la siguiente pantalla:
Clicando en el botón + Dessign file de la esquina superior derecha crearemos un nuevo archivo.
En la parte central de la barra de herramientas negra aparece el nombre temporal que Figma da a un archivo nuevo (Untitled). Simplemente habría que clicar sobre la palabra para poder editarla y cambiar el nombre de nuestro archivo.
3. Crear un frame en Figma
Para crear un frame clica en el tercer icono de la barra de herramientas superior y elige la opción de Frame.
Automáticamente en el inspector de la derecha te saldrán diferentes opciones de tamaños agrupados por diferentes categorías: Phone, Tablet, Desktop…
Si, por el contrario, quieres crear un marco con un tamaño personalizado clica sobre el espacio de trabajo y arrastra el ratón hasta lograr las dimensiones deseadas. Si quieres modificar el tamaño de nuevo puedes seleccionar el nombre del marco (que aparece en la parte superior del mismo) y en el inspector podrás modificar su altura, anchura, posición….
En el caso de que quieras modificar el nombre del frame clica doblemente sobre el mismo y podrás editar el texto.
Una vez creado el frame podrás ver en el sidebar de la izquierda las páginas y las capas de tu archivo. Dentro de las capas aparecerá tu frame. Ten en cuenta que todos los elementos que crees en el marco deben estar dentro de esa capa para que se muestren al visualizar el trabajo.
4. Crear un espacio de trabajo en Figma
El espacio de trabajo de Figma se divide en cuatro partes bien diferenciadas:
4.1. Barra de herramientas
Situada en la parte superior del espacio de trabajo contiene las herramientas básicas del programa, agrupadas en tres áreas:
Área izquierda, que contiene:
- El icono de Figma despliega un menú con las opciones habituales de cualquier programa: Abrir archivo, Guardar, Editar, Exportar… pero además nos permite visualizar las rejillas y las reglas del archivo y acceder a la Ayuda online, entre sus opciones principales.
- Puntero/Escala, para seleccionar y escalar elementos
- Frame, para crear nuestros espacios de trabajo
- Formas geométricas básicas e inserción de imágenes o vídeos
- Pluma/Pencil, para dibujar formas vectoriales
- Texto, para insertar, lógicamente, nuestras cajas de texto
- Recursos, que nos da acceso a los Componentes , Plugins y Widgets de Figma
- Hand Tool, para desplazarnos por el espacio de trabajo
- Comentarios, opción muy útil para poder añadir notas que queramos compartir con otros miembros de nuestro equipo.
Área central, que incluye:
- Drafts, que nos da acceso a nuestros archivos y el nombre del archivo actual
Esta área central cambiará según qué tengas seleccionado. Por ejemplo, si seleccionáramos una forma geométrica nos aparecerían las siguientes herramientas: Editar objeto, Crear componente, Usar como máscara
Área derecha, que contiene:
- Acceso a nuestro perfil de usuario
- Share, para compartir nuestros archivos con quien queramos añadiendo simplemente su cuenta de correo electrónico
- Switch para cambiar al Modo Desarrollador
- Acceso a la Vista Prototipo, para poder visualizar cómo se comporta un prototipo que hayamos creado
- Zoom
4.2. Sidebar (columna de la izquierda)
Siguiendo con la interfaz de Figma, la columna de la izquierda (2) es donde podrás crear las páginas del archivo (por ejemplo: una para el diseño, otra para los wireframes, otra para las pruebas…) y donde verás las capas. Éstas aparecerán en lista con indentaciones, que sirven para ver dentro de qué frame o grupo está un elemento determinado.
En esta zona podrás crear las páginas de tu proyecto.
- Archivos organizados en páginas que contienen frames
- También podemos ver los assets creados
- Búsqueda archivos
- Archivos recientes
- Drafts
- Community: Para descargar recursos, plugins…
4.3. Mesa de trabajo o canvas (zona central)
Es el área de trabajo propiamente dicha. En ella es donde diseñaremos nuestros proyectos. Es muy grande, alcanza hasta los 65.000 píxeles.
4.4. Inspector (columna de la derecha)
Está dividido en dos pestañas:
- Design, en la que podemos ver y editar las propiedades del elemento o capa que tengamos seleccionado. Por ejemplo, en el caso de un frame aparecerían las siguientes propiedades: Alineación y distribución, orientación, posición, anchura, altura…
- Prototype, desde donde podremos configurar las opciones para crear un prototipo con nuestros diseños.
5. Compartir un archivo con un equipo
Para compartir con nuestro equipo un archivo en el que estemos trabajando clicaremos en el botón Share en la parte izquierda de la barra de herramientas superior. Se abrirá un popup:
Dentro del mismo podremos escribir los correos electrónicos de las personas con las que queremos compartir el archivo. También podemos decidir si queremos que sólo puedan verlo o además editarlo. Recibirán las invitaciones por email.
Conclusión
En resumen, Figma es probablemente la herramienta más versátil de la actualidad para crear diseños UI:
- Dispone de una versión gratuita bastante completa.
- Se puede ejecutar desde el navegador, lo que la hace perfecta para equipos remotos que pueden trabajar de forma colaborativa en tiempo real.
- Es una herramienta muy intuitiva y sencilla de usar, para usuarios de todos los niveles.
- Permite importar archivos de otras herramientas de prototipado como Adobe XD, InVision Studio o Zeplin
- Tiene una gran comunidad de usuarios en la que se comparten innumerables recursos, muy útiles para ahorrar tiempo y mejorar la productividad.
Te animo a que la uses y descubras todas las técnicas y funcionalidades que ofrece. Y si eres programador su Modo Desarrollador (sólo incluido en las versiones de pago) te sorprenderá gratamente por todas las facilidades que ofrece para transformar tus diseños en código.
¡No te pierdas la segunda parte del artículo con mucha más información detallada sobre Figma como:
- Componentes
- Bibliotecas
- Comunidad
- Auto Layout
- Prototipado
- Exportación de diseños
- Atajos de teclado
¡Síguenos en Redes Sociales y Canal de YouTube para no perderte nada!
