Figma es una herramienta de diseño potente y versátil. Permite crear prototipos de interfaces para todo tipo de aplicación que posea una interfaz gráfica, como pueden ser páginas web o apps móviles, por ejemplo.

Tienes la opción de descargarte la aplicación y utilizarla como un programa local en tu equipo si lo prefieres. Pero no es necesario, puedes usar Figma desde la web, sin necesidad de descargar nada.

Si accedes mediante web, tus diseños quedarán almacenados en la nube y se editan, comparten o realizan colaboraciones con miembros de tu equipo en tiempo real. Tienes la posibilidad de conectarte a esta herramienta desde cualquier dispositivo con conexión a internet.

En cuanto al trabajo en equipo, una característica a destacar de Figma son las librerías de componentes. Con ellas, los elementos producidos pueden ser compartidos y reutilizados por diferentes personas en distintas partes de la aplicación sin tener que volver a empezarlos de nuevo cada vez que se necesiten.

También es importante mencionar que es posible trabajar offline con Figma desde su aplicación. Edita tus archivos tranquilamente, en cuanto se recupere la conexión a internet se sincronizarán automáticamente, no perderás ningún avance.

Figma ha sido comprada recientemente por Adobe

El pasado 15 de septiembre de 2022 se anunció la compra de Figma por Adobe a cambio de 20.000 millones de dólares. Aunque desde Adobe aseguran que Figma continuará operando de manera autónoma, a medio o largo plazo, no sería de extrañar que pase a formar parte de la familia de productos Adobe.

¿Por qué Adobe ha decidido adquirir Figma? Bueno, es innegable la popularidad de esta herramienta. De hecho, es utilizada por empresas como Google o Airbnb. Pero lo más importante es que era una dura competencia para Adobe XD, su programa para diseño web, apps y juegos.

Vamos a explicarte, a grandes rasgos, como funciona esta increíble herramienta de diseño, seguro que no te defrauda.

Tutorial de iniciación: primeros pasos

Lo primero que deberás hacer es crear una cuenta, para ello tienes usar una cuenta de correo electrónico verificada o utilizar una cuenta de Google.

Una vez te hayas registrado, podrás instalar la aplicación en tu ordenador o trabajar con la herramienta desde la web.

Cuando accedas por primera vez se te harán una serie de preguntas, como a qué te dedicas o que utilidad le vas a dar a Figma, personal, estudios o laboral. Una vez respondas ya puedes comenzar a trabajar.

Arriba a la derecha, aparece un menú sobre la configuración de tu cuenta. Aspectos relativos a tu perfil, plugins, ajustes, añadir otra cuenta y cerrar sesión.

También en la parte superior verás tres opciones:

• New Design File (crear un nuevo diseño)
• New Fig Jam File (elaborar un nuevo archivo de Figma)
• Import File (importar otro archivo directamente desde tu equipo)

Figma nos ofrece bastantes templates que puedes utilizar a modo de plantillas si no quieres comenzar tu diseño desde cero.

A la izquierda encontrarás otro menú que incluye:

• Proyectos recientes (Recents)
• Borradores (Drafts)
• Cosas que ha hecho la comunidad (Explore Community)
• Upgrade (opción para pasarte al plan Premium si estás usando la versión gratuita)
• Equipos de trabajo que has creado

Cómo comenzar un diseño con Figma

1. Pulsa sobre New Design File y se te abrirá un nuevo diseño en blanco
2. Crear un frame. Para ello, pulsa sobre el icono de un marco (#) en el menú de la esquina superior izquierda.
3. Te saldrán tres opciones frame, selection y slice. Haz clic sobre frame. Se te desplegará un menú a la derecha de la pantalla con un con muchísimas opciones de formato para elegir. Todos los modelos de iPhone, tablets, smartwatch, ordenadores…
4. Puedes escoger el que prefieras o hacer tú mismo el marco. Clicas en la mesa de trabajo y, manteniendo pulsado deslizas el cursor hasta conseguir las dimensiones deseadas.
5. Si te fijas, arriba en el centro, pone Drafts/Untitled. Haz clic sobre Untitled y escribe el nombre de tu proyecto.
6. Por último, has de colocar guías en el frame para trabajar dentro de ellas. Pincha el icono con forma de cuadrado y elige la forma que desees. Haz clic y desliza. Una vez lo tengas céntralo en el frame ayudándote de las guías inteligentes.

Ya puedes empezar a diseñar, verás que es una herramienta muy intuitiva, aprender a usarla es cuestión de dedicarle un poco de tiempo. Pero estamos seguro que será clave para ayudarte con el diseño web de tu proyecto.