Tutorial Figma para diseño web

Figma es una herramienta de diseño online que te permite crear diseños y prototipos interactivos de aplicaciones web y móviles, entre otras cosas. Si estás buscando un tutorial de Figma para diseño web y descubrir más sobre esta poderosa herramienta, has llegado al lugar indicado. En esta entrada, te voy a explicar qué es Figma y para qué sirve como tal.

No te preocupes si eres nuevo en esto, ya que he escrito este artículo pensando en los principiantes para que sepas lo imprescindible de esta herramienta. 

Tutorial Figma: ¿Qué es Figma?

Figma es una aplicación web de diseño e interfaz de usuario que te permite realizar todo tipo de proyectos creativos. Estos pueden ir desde esquemas de sitios web y aplicaciones móviles hasta prototipos interactivos y publicaciones en redes sociales.

Lo que hace diferente a Figma de otras aplicaciones de diseño es que funciona directamente en tu navegador. Así, puedes acceder a tus proyectos y diseñar desde cualquier ordenador o plataforma, sin necesidad de depende de tener instalado su software en múltiples dispositivos y andar moviendo archivos.

Además, Figma te ofrece un plan gratuito muy generoso (del que te voy a hablar más adelante), con el que puedes crear y almacenar hasta 3 proyectos activos al mismo tiempo. Es una opción ideal para aprender, experimentar y trabajar en proyectos pequeños.

¿Para qué sirve Figma?

Ahora que ya sabes más sobre Figma, mira lo que puedes hacer con esta herramienta. A continuación, tienes una selección de maneras en las que puedes utilizarla. 

1. Lluvia de ideas (brainstorming)

Si estás en la fase de conceptualización de un gran proyecto, querrás reunir tus ideas en un solo lugar. Y aunque puedes dibujarlas en papel, probablemente te resulte más fácil apuntar tus pensamientos en formato digital.

Figma ofrece FigJam, una herramienta muy útil para la lluvia de ideas. Puedes usar cuadros de texto para escribir cualquier cosa que necesites consultar más adelante. Así como emplear diferentes formas y añadir comentarios, y mucho más.

2. Figma para Diseño Web

Un sitio web bien diseñado es crucial para las empresas que quieren maximizar sus ingresos y llegar a más gente. Pero antes de que una web vea la luz, hay que planificar mucho entre bastidores. Si quieres ver cómo quedarían distintas páginas web antes de darles vida, merece la pena recurrir a Figma.

En Figma, puedes elegir entre numerosos tamaños para representar con precisión el aspecto que tendría tu página. Por ejemplo, si estás creando algo para un móvil, tienes diferentes dimensiones según la pantalla.

También puedes elegir otras funciones útiles para ver cómo se comportará la página en la vida real, por ejemplo, el desplazamiento.

3. Creación de prototipos de aplicaciones

En relación con lo anterior, Figma es una aplicación imprescindible para los diseñadores de interfaces de usuario (UI) y de experiencia de usuario (UX). Resulta increíblemente útil si quieres generar prototipos de aplicaciones y ver cómo se mostrarán en varios dispositivos.

He mencionado en la sección anterior que puedes elegir las dimensiones para diferentes dispositivos móviles. Eso incluye iPhones, iPads y Androids. 

Al generar un prototipo de aplicación con Figma, puedes añadir texto y cambiar sus tipografías, fuentes y tamaños. También puedes integrar varios plugins, además de muchas otras funciones.

4. Gestión y colaboración en proyectos

Cuando piensas en software de gestión de proyectos, es posible que te venga a la cabeza una solución como monday.com o Asana. Pero si ya ocupas Figma para tus proyectos, puede que quieras usarlo también para gestionarlos.

Figma tiene varias herramientas que puedes emplear para la gestión de proyectos. Por ejemplo, permite colaborar con varias personas y conocer sus opiniones. Asimismo, puedes crear líneas de tiempo con las formas y el texto de Figma.

Al utilizar Figma, se pueden integrar numerosos plugins para ayudar a gestionar los proyectos.

5. Mapas mentales

Si quieres crear mapas mentales en Figma, tienes varias opciones a tu disposición. Puedes usar alguna de las plantillas disponibles o hacer uno propio desde cero con las herramientas que te ofrece la aplicación.

Figma te da la libertad de ser creativo con tus mapas mentales. No sólo puedes escribir texto, sino también dibujar con marcadores, añadir conectores y usar diferentes tipos de pegatinas.

Además, si quieres que otras personas participen en tu mapa mental, puedes aprovechar las herramientas de colaboración de Figma. Puedes invitarlos a editar el documento directamente o dejarles comentarios.

Planes de precio de Figma

Para satisfacer las necesidades de todos, Figma ofrece diferentes niveles de suscripción. Para uso personal, puede valer la pena quedarse con la versión gratuita. Pero si diriges o trabajas para una empresa que utiliza esta aplicación semanalmente, tendrás que invertir en uno de los planes de suscripción de Figma.

Plan gratuito (starter)

Este es el nivel de suscripción básico en el espectro de precios de Figma. Debido a que no incluye muchas de las características disponibles en otros planes y limita su uso, Figma Free está diseñado exclusivamente para uso individual (y equipos muy reducidos como mucho). 

Sin embargo, vale la pena mencionar que no es una prueba gratuita. No hay límite de tiempo en absoluto, y puedes seguir usándolo para pequeños proyectos personales durante todo el tiempo que quieras.

Estas son las funciones que obtienes con el plan gratuito:

• Te permite trabajar en 3 archivos Figma al mismo tiempo.
• También puedes trabajar simultáneamente en 3 archivos FigJam (la pizarra colaborativa de Figma para lluvias de ideas en equipo).
• La herramienta es totalmente gratuita.
• Te permite subir un número ilimitado de archivos y colaborar con un número indeterminado de personas.
• Además, tienes acceso a la aplicación móvil de Figma.

Figma Professional

Este es el primer nivel de suscripción de pago que ofrece Figma. A un precio asequible de 12 $ por editor al mes, incluye muchas más funciones que el plan gratuito básico. Figma Professional es lo mejor para pequeñas start-ups que necesitan una herramienta de diseño fiable y para grandes empresas para las que el diseño puede no ser la mayor prioridad.

Estas son las principales características de este plan de precios de Figma:

• Cuesta 12 $ por editor/mes si pagas todo el año de una sola vez o 15 $ por editor/mes si pagas mensualmente.
• A diferencia de la versión gratuita, permite trabajar con un número ilimitado de archivos Figma y FigJam.
• El paquete incluye un historial de versiones ilimitado para que puedas volver atrás y recuperar archivos viejos que se hayan borrado o modificado por error.
• Se incluye una amplia gama de permisos de uso compartido con diferentes niveles de permiso que hacen que la colaboración sea muy sencilla.
• Te da la opción de abrir proyectos compartidos a los que muchas personas pueden acceder y en los que pueden trabajar.
• Te da acceso a bibliotecas de equipo.

Plan Organization

Mientras que Figma Professional está diseñado para empresas que no emplean a más de 100 personas, Figma Organization está hecho a medida para grandes compañías con cientos de empleados. También lo utilizan organizaciones más pequeñas para las que el diseño de la interfaz de usuario es una prioridad.

Estas son algunas de las claves que necesitas saber sobre este plan de precios de Figma:

• Cuesta 45 $ por editor al mes, lo que significa que es mucho más caro que Figma Professional. Por el momento sólo está disponible la facturación anual.
• Incluye todo lo que hace el nivel Professional y muchos extras.
• Mientras que Figma Professional te permite tener bibliotecas de equipo, Figma Organization te da acceso a bibliotecas de toda la empresa. Es perfecto para grandes organizaciones con varias oficinas/equipos.
• Está lleno de análisis en profundidad para mejorar tus diseños.
• Puedes ramificar y fusionar proyectos, lo que significa que los miembros del equipo pueden trabajar individualmente y luego unir sus esfuerzos.
• Ofrece opciones de gestión centralizada de archivos para mayor seguridad. 
• Permite unificar la contabilidad para obtener las mejores prácticas de facturación.

Figma Enterprise

El último plan de precios de Figma, que se llama Enterprise, hace hincapié en el poder de la conexión y la interactividad. Incorpora espacios de trabajo dedicados y ofrece más opciones para delegar y automatizar tareas administrativas. También se centra más en la seguridad, algo imprescindible para las empresas que manejan información confidencial.

Estas son algunas de las principales características de Figma Enterprise:

• Cuesta 75 $ por editor al mes. Por el momento sólo está disponible la facturación anual.
• Contiene todo lo que ofrece el nivel Figma Organization, además de varios aspectos adicionales.
• Te da las mejores opciones de personalización.
• Viene con muchas opciones de retroalimentación que facilitan la colaboración, tales como comentarios incrustados en cada proyecto.
• Dispone de controles de privacidad y contraseñas para una mayor seguridad.

Si quieres saber más sobre las características de los planes, te invito a visitar la web oficial de Figma.

Figma para diseño web

Espero que, después de explorar esta entrada, tengas una comprensión más sólida de cómo Figma puede mejorar significativamente tu proceso de diseño. La fácil colaboración en un proyecto para los diferentes miembros, la eficiencia en la creación de diseños y la facilidad de uso son algunas de las razones por las cuales Figma se ha convertido en la elección preferida de diseñadores en todo el mundo.