Para muchas personas, Figma es la herramienta de diseño de interfaces perfecta por sus características sólidas. De hecho, algunos la consideran mejor que Sketch en términos de funcionalidad.
Pero, ¿qué es Figma y cómo funciona? Esa es una buena pregunta que responderemos a continuación. Si estás buscando una herramienta que simplifique el trabajo de diseñar y programar, esta es una opción más que interesante
¿Qué es figma?
Figma es un instrumento de diseño de UI y UX alojado en la nube usado para diseñar y programar código.
Un diseño de UI y UX es una combinación entre lo que ve el usuario, que vendría siendo el diseño, y en la experiencia del usuario, que vendría siendo la funcionalidad de la plataforma.
Figma es una herramienta completa para usar en un proyecto de diseño. Cuenta con funciones importantes, como los vectores, los cuales permiten maquetar una web, aplicación, programas y más, desde cero.
¿Qué hace especial a Figma?
Figma, como herramienta para diseñar, cuenta con varias ventajas interesantes. Empezando, por supuesto, con que es gratuita. Quienes deseen iniciar un proyecto sin invertir prácticamente nada, es una opción a tener en cuenta. Eso sí, solo te permite crear tres proyectos por cada cuenta generada.
En segundo lugar, se puede usar en los principales ordenadores del mercado y sus respectivos sistemas operativos. Es decir, corre tanto en Windows como en Mac sin inconvenientes.
Tercero, y quizás una de las ventajas más importantes, es que permite compartir los proyectos entre usuarios. Siendo una herramienta fenomenal para FreeLancer o jefes de diseño.
Tercero, se pueden importar archivos desde otras herramientas de diseño como Sketch. Aunque, lamentablemente, no hay reciprocidad en la acción. Es decir, puede exportar los archivos de Figma a HTML, pero no Figma a FiSketch.
Cuarto, se pueden crear prototipos de conexiones y puntos de acceso para probar el funcionamiento de los proyectos. En especial la codificación para Mac, PC y en dispositivos Android.
Quinto, y último, Figma cuenta con una cantidad envidiable de temas y complementos sacados de CMS como WordPress para aumentar la gestión y construcción de las interfaces. Incluso, se puede trabajar con una biblioteca de activos valorada en millones de proyectos online.
Aprender a usar Figma
Bien, a este punto sabemos qué es y las razones para usarla como tu próxima herramienta de diseño de interfaces. Pero, ¿cómo funciona todo esto? ¿Hay que ser un experto en código y programación?
La respuesta superficial a esa pregunta es: no. Puedes usar Figma sin ser un profesional de diseño. Aunque, es bueno conocer algunas nociones básicas sobre diseño de UI / UX y programación para no ir en blanco.
Sin más nada que agregar en torno a la previa de aprender a usar Figma, aquí un tutorial compacto, pero claro, de cómo dar tus primeros pasos en la herramienta de diseño y codificación de interfaces.
Crearse una cuenta
Lo primero que tienes que hacer es crearte una cuenta en la página. Para ello tendrás que entrar en el dominio oficial de la herramienta, presionar el botón de ‘registrarse’ y posteriormente llenar los datos del formulario para amar tu cuenta.
Una vez que hayas confirmado el correo electrónico, Figma te dará acceso a la pantalla de inicio de tu interfaz. Aquí encontrarás las secciones que proporciona la herramienta para crear proyectos de calidad.
Por cierto, antes de subir cualquier archivo o iniciar un proyecto, recuerda que los documentos en Figma se almacenan en la nube. Por tanto, no es necesario que cuentes siempre con el mismo ordenador para usar los archivos. Siempre que los hayas subido, estarán almacenados en el servidor online.
Revisa los componentes de Figma
Ya que estamos dentro de la página, es momento de relacionarse con los componentes. Existen diversas áreas para gestionar y operar la plataforma, así que mencionaremos las más importantes.
- Menú. Lo encontrarás en la parte superior izquierda. Te desplegará una barra interactiva con diversas opciones de configuración y corrección de la plataforma online.
- Herramientas. En las herramientas es donde encontrarás los elementos de construcción. Por ejemplo, los textos para la maquetación, las formas, marcos dimensionales y más. A medida que vayas usando las herramientas, estas se ordenarán por frecuencia.
- Opciones. Aquí encontrarás los elementos de construcción extra. También configuraciones relacionadas con los archivos que estás usando para tu nuevo proyecto.
- Capas. Las personas que hayan usado alguna vez Photoshop u otro programa de diseño, sabrán qué son las capas. Es un área donde se enumeran todos los elementos usados en un diseño, como los textos y los marcos del proyecto. Es indispensable para controlar el proceso de construcción y organizar los componentes de las plantillas.
Crear nuevos marcos
Los marcos también son conocidos como mesas de trabajos en Figma. Como te habrás imaginado, es el lienzo donde ‘dibujar’ el diseño de las interfaces.
Hay varias configuraciones que puedes hacer sobre un marco, como: agrandar o reducir las dimensiones –para ello podrás hacer zoom mediante los comandos preestablecidos– o la herramienta mano para alejar o acercar la pantalla.
Comenzar a diseñar
Una vez que tengas tu marco listo, es momento de empezar a diseñar de acuerdo a las nociones del proyecto. Para ello, puedes empezar con la herramienta de texto para agregar enunciados, mensajes y títulos.
También puedes usar la herramienta de forma, donde encontrarás varias alternativas como triangulo y cuadrado. Los cuales te permitirán dividir en secciones las áreas del marco. También podrás incluir el texto sobre las formas.
Finalmente, puedes usar la configuración de color para agregar ilustración a los otros elementos mencionados. Es decir, las letras y las formas geométricas. También hay herramientas de edición, como el brillo y el contraste.
Guardar los cambios
Cuando hayas culminado tu proyecto, o termines tu jornada de diseño, recuerda guardar los cambios. Tienes que darle un nombre al proyecto, ya que así se diferenciará con otros archivos guardados en la herramienta de diseño de interfaces.
Al igual que sucede con las imágenes y otros archivos, los proyectos se almacenarán en la nube. Tendrás acceso desde cualquier ordenador compatible con Figma para realizar configuraciones y cambios.