En este artículo vamos a ver cómo hacer un prototipo en Figma siguiendo unos sencillos pasos. Figma es una herramienta de creación de prototipos web y un editor de gráficos vectoriales, alojada en la web. Esta aplicación permite crear pantallas web, aplicaciones móviles y otras interfaces gráficas. Además, podrás crear y editar formas con vectores y nodos, utilizar distintas paletas cromáticas y maquetar textos sin poner límites a la imaginación.
Una de las ventajas de Figma es que al estar en el navegador, se pueden compartir tareas con el equipo y editarlas desde la misma mesa de trabajo. Figma se ejecuta en la nube, pero también puede ser descargada y ejecutada como aplicación en el ordenador.
Esta herramienta puede resultar familiar para los usuarios que han trabajado antes con Sketch o Adobe XD. Encontrarán un panel y herramientas similares a estos programas.
Principales características de Figma
Las características principales de Figma son:
- Es muy fácil de utilizar e intuitiva.
- Puede ser usado para la creación de cualquier tipo de archivo digital interactivo gracias a su función de editor de gráficos vectoriales.
- Se pueden exportar las piezas en formatos estándar como .pdf, .png, .jpg.
- Figma funciona con plugins, en algunos casos gratuitos, que se pueden añadir para ampliar y mejorar su uso.
- Se puede compartir el trabajo con el equipo fácilmente desde la nube.
- Permite alojar los diseños en la nube.
- Tiene versión gratuita.
Ahora que ya tenemos claro de que es capaz esta excelente aplicación, vamos a ver paso a paso como crear un prototipo en Figma desde cero.
¡Estos son los 5 pasos que debes conocer!
Paso 1. Instalación y registro en la web
Como hemos comentado en el punto anterior, la aplicación puede usarse tanto desde el propio navegador como siendo descargada y usada en el equipo, teniendo disponibles las mismas características y funciones.
La principal diferencia de usar Figma desde el propio equipo frente al navegador es poder usar las tipografías instaladas en el equipo sin necesidad de instalar ningún plugin extra.
Los pasos para descargar e instalar la aplicación en nuestro equipo son los siguientes:
- Descargar Figma para escritorio desde aquí.
- Hacer clic en el archivo descargado para ejecutar el instalador. Una vez instalado se abrirá la siguiente ventana.
- Seguidamente, pulsamos en Create one, se abrirá una pestaña en su navegador para poner su email y contraseña y más tarde su nombre y la finalidad para la que usará la aplicación. Se deberá verificar su cuenta desde su correo electrónico y ya estará la cuenta lista para comenzar a usar Figma.
Paso 2. Crea un nuevo proyecto
Después de iniciar sesión, puedes crear un nuevo proyecto. Para ello solo tienes que hacer clic sobre el botón + que tienes situado en la parte superior izquierda o bien hacer clic sobre el botón + Design File situado en la parte superior derecha.
Paso 3. Diseña tus pantallas
Antes de crear un prototipo, necesitas diseñar las pantallas individuales de tu aplicación o sitio web. Utiliza las herramientas de diseño de Figma para crear elementos como botones, imágenes, campos de texto, etc. Cada grupo de pantallas deberá estar en una página separada dentro de tu proyecto para crear proyectos con orden.
Para crear una nueva pantalla solo tenemos que dirigirnos a la herramienta Frame disponible en la barra de herramientas o bien pulsamos la tecla F del teclado. Al activar esta herramienta seguidamente en la barra lateral derecha podemos seleccionar los tamaños preestablecidos. Por ejemplo podemos seleccionar Iphone 14 si es que nuestro diseño va destinado a este dispositivo.
A partir de aquí, ya solo tenemos que insertar textos, imágenes y demás elementos para componer nuestro prototipo. A continuación, puedes ver varios vídeos introductorios que te ayudarán con el funcionamiento.
[embed]https://www.youtube.com/watch?v=dXQ7IHkTiMM&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4&index=2[/embed]
[embed]https://www.youtube.com/watch?v=wvFd-z7jSaA&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4&index=3[/embed]
Paso 4. Crea enlaces entre pantallas
Para crear un prototipo, necesitas establecer vínculos entre las diferentes pantallas. Esto es lo que permitirá a los usuarios navegar entre ellas. Para hacerlo, sigue estos pasos:
- Selecciona un elemento en una pantalla que deseas convertir en un enlace, como un botón.
- En el panel derecho, verás una pestaña llamada "Prototype" o "Prototipo". Haz clic en ella.
- Haz clic en el botón "Add Interaction" o "Agregar interacción" que se representa con un +.
- Selecciona la pantalla a la que deseas vincular. Puedes elegir una pantalla específica o simplemente "Previous" para volver a la pantalla anterior.
- Define la acción de activación (por ejemplo, "On Tap").
- Ajusta las transiciones y animaciones según tus preferencias.
[embed]https://www.youtube.com/watch?v=lTIeZ2ahEkQ&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4&index=4[/embed]
Paso 5. Comparte el prototipo
Ahora que ya sabemos cómo hacer un prototipo en Figma y lo tenemos preparado, puedes compartirlo con otros colaboradores o clientes para que puedan visualizar y testear el resultado. Figma te permite generar un enlace, acceso público o agregar personas a tu proyecto para que puedan ver y comentar sobre el diseño. Para general el link simplemente tenemos que dirigirnos al botón Share ubicado en la parte superior derecha de la interfaz. Al hacer clic podemos acceder a la siguiente pantalla dónde podemos invitar a otros usuarios o generar un link para su visualización.
El aprendizaje de la herramienta Figma se ha convertido en un elemento crucial para aquellos que buscan afrontar proyectos de usabilidad y experiencia de usuario de manera efectiva. Figma no solo es una plataforma de diseño de interfaz de usuario intuitiva y potente, sino que también promueve la colaboración y la comunicación entre diseñadores, desarrolladores y otros miembros del equipo de proyectos. Esto es esencial en el proceso de diseño centrado en el usuario, ya que permite a todos los implicados trabajar en conjunto para crear soluciones de alta calidad que realmente satisfagan las necesidades de los usuarios.
