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 Adobe adquirió Figma en 2022, puede haber algunos cambios que reorganizarán la 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 ahorrarle tiempo en tipos de diseño repetitivos.
¿Cuánto cuesta Figma?
Puedes crear una cuenta de Figma gratis en el sitio figma o descargando el aplicación figma. Una cuenta gratuita proporciona funcionalidad para todos los aspectos de diseño de la aplicación. Puedes 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 invite a compañeros de equipo, trabaje desde las bibliotecas del equipo, tenga acceso a archivos Figma ilimitados e historial de versiones, y más, por $ 12 por 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 Menú principal icono: el logotipo de Figma. Seleccionando 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á el Mover herramienta (V), con el Escala herramienta (k) anidado debajo de él. 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 de Región, Marco (F), Sección, y Rebanada, acurrucados juntos.
En Figma, un marco es lo que otros programas pueden llamar mesa de trabajo o lienzo. Seleccionar 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 Forma herramientas, Bolígrafo herramientas, y el Texto herramienta. Seguido, entonces, por Recursos—Componentes, Complementos, y Widgets-y el Mano herramienta para moverse por su archivo. Y finalmente, el Comentarios herramienta que es excelente para tomar notas y colaborar con 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, y Inspeccionar. 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, Llenar, Ataque, Efectos, y Exportar. Algunos de estos están minimizados de forma predeterminada, pero al hacer clic en el + firmar, 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 agregue marcadores de posición de imagen, y puede agregar texto usando la herramienta Texto en formas que probablemente haya hecho en otros 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 Capa el menú ofrece modos de opacidad y fusión; con Llenar 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 a la izquierda Capas menú al lado del Activos pestaña. 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 Diseño opción de menú es la Prototipo menú. 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 Prototipo El menú 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 eres 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 Figma diseño para su equipo de desarrollo que puede recrear sus interacciones 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.