Cómo usar Figma: una guía para principiantes

El mundo del software de diseño gráfico es enorme y tiene mucha competencia. Figma es una herramienta de diseño que está compitiendo hacia el primer puesto para los diseñadores de UX/UI de todo el mundo. Pero, ¿qué sabes de esta herramienta intuitiva?

Si bien es simple, también hay una curva de aprendizaje si está acostumbrado a otras herramientas de diseño. Veamos Figma y cómo usarlo. Bienvenidos a Figma 101.

¿Qué es Figma?

Si ha trabajado como diseñador gráfico o diseñador web en los últimos años, es probable que haya oído hablar de Figma. Incluso podrías haberlo usado.

Figma es una herramienta de diseño y se ha convertido constantemente en la favorita de los diseñadores digitales, superando opciones como Adobe XD, Adobe Photoshop y Sketch, para diseño web y más. Sin embargo, desde que Adobe adquirió Figma en 2022, puede haber algunos cambios que reorganizarán la tabla de clasificación.

Hay muchos usos para Figma. Se utiliza principalmente para diseño digital y no se puede diseñar en CMYK para impresión. Algunos de los usos principales de Figma incluyen:

• Prototipos
• Diseño de UX/UI
• diseño de aplicaciones
• diseño web
• Diseño de presentación

Puede usar complementos de maquetas de Figma para ayudar a mostrar sus diseños, convertir páginas web reales en diseños de Figma usando complementos e incluso crear plantillas maestras para diseños de Figma para ahorrar tiempo en tipos de diseño repetitivos.

¿Cuánto cuesta Figma?

Puede crear una cuenta de Figma de forma gratuita en el sitio de Figma o descargando la aplicación de Figma . Una cuenta gratuita proporciona funcionalidad para todos los aspectos de diseño de la aplicación. Puede diseñar con Figma y FigJam, la herramienta de colaboración de Figma.

Si está utilizando Figma como aficionado o como autónomo, la versión Free Forever es casi perfecta. Aún tiene acceso a todos los complementos, puede invitar a colaboradores ilimitados, usar archivos personales ilimitados y usar Figma desde todas las plataformas.

Si bien la versión gratuita de Figma ofrece más que suficiente para cualquier diseñador estándar, una suscripción a Figma Professional le permite invitar a compañeros de equipo, trabajar desde bibliotecas de equipo, tener acceso a archivos ilimitados de Figma e historial de versiones, y más, por $12 al mes por editor. Si eres estudiante o educador, puedes obtener Figma Professional gratis.

Cómo usar Figma: conceptos básicos

Ya sea que use la aplicación Figma o la versión del navegador, puede seguirla fácilmente.

Cuando abra Figma, se le presentarán opciones para iniciar un nuevo archivo Figma, un nuevo archivo FigJam o importar un archivo creado en otro programa, como Sketch o Adobe XD. Si ha usado Figma antes, también verá sus proyectos anteriores de Figma que puede abrir y trabajar.

Navegando por el espacio de trabajo de Figma

Abrir un nuevo archivo inicialmente parece poco inspirador. A diferencia de muchos otros programas de diseño, no comienza con su mesa de trabajo o lienzo, sino con una página de diseño totalmente en blanco. Pero con una mente llena de inspiración, no permanecerá en un espacio vacío por mucho tiempo.

El menú horizontal superior izquierdo comienza con el icono del menú principal : el logotipo de Figma. Al seleccionar el menú principal, puede navegar a sus otros archivos, acciones rápidas de Figma, opciones de archivo típicas y acceso a complementos, widgets y bibliotecas.

A continuación, encontrará la herramienta Mover ( V ), con la herramienta Escala ( K ) ubicada debajo. Estas herramientas son para mover elementos o escalar partes de su diseño hacia arriba o hacia abajo. Y a la derecha de estas herramientas, verá las herramientas Región, Marco ( F ), Sección y Sector , juntas.

En Figma, un marco es lo que otros programas pueden llamar mesa de trabajo o lienzo. Seleccione Marco para dibujar su lienzo de tamaño personalizado. Cuando se selecciona, el menú de la derecha presentará opciones de marco prefabricadas para tamaños de dispositivos comunes: teléfonos inteligentes, tabletas, computadoras de escritorio, relojes inteligentes, presentaciones y opciones de redes sociales. También puede hacer clic y arrastrar su marco directamente para que tenga cualquier tamaño personalizado.

Volviendo al menú superior izquierdo, a la derecha de las herramientas de Región están las herramientas de Forma , las herramientas de Pluma y la herramienta de Texto . Seguido, entonces, por Recursos ( Componentes , Complementos y Widgets ) y la herramienta Mano para moverse por su archivo. Y, por último, la herramienta Comentarios , que es excelente para tomar notas y colaborar con los compañeros de equipo.

El menú de diseño de Figma

Con un marco elaborado, al seleccionar su título se activa el marco, listo para el diseño. El menú de la derecha muestra títulos para Diseño , Prototipo e Inspección . Como sugiere el nombre, la opción Diseño es el menú que usará para diseñar los elementos en su marco.

Si bien el menú Diseño inicial es algo simplista, a medida que agrega más elementos a su diseño, las opciones del menú evolucionan. Al principio, el menú se ejecuta de arriba a abajo con herramientas de alineación, herramientas de tamaño, Diseño automático , Cuadrícula de diseño , Capa , Relleno , Trazo , Efectos y Exportar . Algunos de estos están minimizados de forma predeterminada, pero al hacer clic en el signo + , puede abrir cualquier menú o presionar – para minimizarlo.

Una vez que haya dibujado su marco principal para el proyecto, puede usar las herramientas Forma o Pluma para dibujar formas o agregar marcadores de posición de imagen, y puede agregar texto usando la herramienta Texto en formas que probablemente haya hecho en otro software.

Una vez que tenga formas o texto en el marco, use las diversas opciones del menú de la derecha para editar y diseñar esos elementos. El menú Capa ofrece modos de opacidad y fusión; con Relleno puede agregar color o insertar imágenes con algunas funciones de edición como Exposición , Contraste , Temperatura y más.

A medida que construya más elementos en su proyecto, las capas se formarán en el menú Capas de la izquierda junto a la pestaña Activos . Puede hacer doble clic en el título de una capa para encontrar el elemento y viceversa; puede hacer doble clic en un elemento de diseño para encontrar la capa resaltada. Hacer doble clic en los títulos le permite cambiarles el nombre para una organización óptima.

El menú de prototipos de Figma

A la derecha de la opción de menú Diseño está el menú Prototipo . Una vez que haya finalizado los aspectos visuales de su diseño y haya establecido los cuadros de imagen y el texto donde deben ir, puede usar las herramientas de prototipo para agregar animaciones y transiciones a sus diseños.

El menú Prototipo le permite conectar marcos o componentes como transiciones. Puede elegir en qué orden y cómo cada fotograma pasa a otro.

Esto funciona muy bien si está haciendo una presentación de Figma que anima de una diapositiva a la siguiente, pero la herramienta también le permite visualizar animaciones para botones o menús para aplicaciones y diseño web. Puede agregar múltiples transiciones por página para todas las cosas diferentes, de modo que pueda ver cómo los usuarios interactuarían con su sitio web cuando esté activo.

Si bien usar Figma para diseñar un sitio web no es lo mismo que crear un sitio web en vivo, puede entregar su diseño de Figma a su equipo de desarrollo, quien puede recrear las interacciones de su prototipo como diseños de animación de la vida real para su sitio web. Esto significa que puede pasar de una página a otra a partir de clics, tiempo u otras interacciones.

Comenzar con Figma es fácil

Ahora sabe cómo navegar por el diseño de Figma y cómo funcionan las herramientas básicas de diseño y prototipo. Dado que Figma es tan fácilmente accesible, es hora de jugar con esta herramienta de diseño y ver qué puede crear.