Cómo usar Figma desde cero (Guía definitiva)

Por Friends Of Figma Buenos Aires

Si tienes una idea de cómo empezar un sitio web pero necesitas registrar todo lo que tienes en mente, llevarlo a papel o mejor a un esquema digital, tienes que conocer Figma, una plataforma ideal para hacer prototipado de un sitio completo, una página o una landing.

¿Sólo para website? ¡Claro que no! Es ideal para crear todo tipo de diseños gráficos o para mostrarle a tus clientes una propuesta de navegabilidad de una app.

Al parecer es un gran aliado para quienes se dedican al diseño.

¡Entonces empecemos a explorar esta herramienta de una vez!

¿Qué es y para qué sirve Figma?

Figma es una herramienta online que se utiliza para diseñar interfaces con un plus muy importante para quienes trabajan en equipo y remoto porque brinda la posibilidad de colaboración en vivo.

Esto significa que tanto los miembros del equipo de diseño como tú tienen la opción de iniciar sesión al mismo tiempo y comenzar un prototipo, hacer ajustes, dejar comentarios para cada integrante, etc. Todo esto, al margen del sistema operativo que normalmente utilices.

Vale referir que esta herramienta hizo su aparición en el año 2015, e inició su posicionamiento al ser la primera en contar con la colaboración en tiempo real, debido a su modalidad online.

En otras palabras, Figma nació pensada para facilitar el proceso de desarrollo de productos, lo cual la convierte en una solución multiplataforma para los diseñadores, quienes tendrán la oportunidad de mejorar el proceso de UX de alguna marca.

Los beneficios de usar Figma

Son muchos los beneficios que podrás obtener con el uso de figma y a continuación te mencionaremos algunos de los más importantes ¡Toma nota!

1. Ofrece listas numeradas y con viñetas

Los usuarios podrán incorporar listas con viñetas y numerados en los diferentes proyectos de diseño en UI/UX. No obstante, la pregunta es ¿Para qué es importante?

Este es un elemento que es de sumo provecho, pues te ofrece la posibilidad de organizar y administrar todos los datos de la manera que prefieras o que te brinde más comodidad a la hora de trabajar.

Asimismo, una lista te será de una gran utilidad con la finalidad de remarcar la información y los datos de diseños vectoriales.

Entre las características especiales de las viñetas están las siguientes. ¡Veamos!

Brinda la opción de llevar a cabo modificaciones en relación con el color visual, muy especialmente en cuanto al color del texto, trazos o efectos.
Tienen la posibilidad de tener incluidos cerca de cinco niveles de sangrías.

2. Te da la posibilidad de diseñar lo que quieras

Puedes diseñar cualquier tipo de interfaz gráfica interactiva que tengas en la mente, entre ellas las siguientes:

Aplicaciones para celulares y otros dispositivos móviles.
Asimismo, te permite hacer pantallas de páginas web.
Incluso la puedes usar para bocetar diseños gráficos que no estarán online pero que puedes trabajar en 2D.

3. Ofrece la conexión de varias cuentas

Figma te da la posibilidad de acceder a todas las cuentas, así como perfiles de la comunidad y espacios de trabajo. Y lo mejor es que puedes acceder desde una única pantalla.

Gracias a esta herramienta, podrás saltar de forma inmediata entre los diferentes espacios de trabajo, para lo cual tendrás que fijarte en la esquina superior izquierda de la pantalla.

No obstante, si tu interés está centrado en las cuentas, tienes la posibilidad de revisar el selector de cuentas, el cual se encuentra localizado en la esquina superior derecha de la pantalla.

4. Existen variantes destinados a la gestión de componentes

Esta herramienta cuenta con una biblioteca de componentes conocida como Variants, el cual es un módulo de gestión de componentes inteligentes que está incorporado a lo que es figma.

Este te ofrece la oportunidad de llevar a cabo un reordenamiento de diferentes variantes duplicadas del mismo componentes y mezclarlas, con la finalidad de organizar la colección de recursos del equipo que desees.

5. Renueva funciones importantes

La herramienta brinda la oportunidad de que los usuarios faciliten a sus colaboradores la obtención de códigos así como también valores del proyecto en el que se encuentran operando.

¿Cuáles son los datos que puedes obtener mediante esta función? A continuación te presentamos algunas de las opciones de información que podrías utilizar para para extraer datos:

Variantes

Sombras

Colores

Propiedades

Bordes

Contenidos

Tipografías

6. Compartir comentarios así como la revisión del proyecto

El uso de Figma con el fin de revisar el diseño de UI/UX termina por transformarse en una conferencia virtual, con lo cual el equipo completo tiene la oportunidad de corregir fallas en tiempo real, así como también registrar comentarios, al tiempo que la resolución del problema se produce todo dentro del mismo marco de diseño.

Compartir los comentarios es de suma importancia por cuanto admite la tecnología más avanzada en relación con los comentarios.

Entre otros beneficios también se destaca que:

No cuenta con limitaciones porque el uso de la misma es gratuito, aunque cuenta con algunas funciones específicas que tienen costo.

Constituye una de las herramientas más colaborativas que existen.

Te da la posibilidad de mostrar tus prototipos.

Está a disposición para todos los sistemas operativos.

Puede operar sin conexión,

Está integrada por una enorme comunidad con miembros que tienen intereses similares a los tuyos.

Primeros pasos de Figma

¿Listos para usar Figma? Sigue este paso a paso:

Crear una cuenta: Este es uno de los requisitos principales, sin el cual no podrás tener la oportunidad de iniciar tu experiencia con esta aplicación. Es importante que sepas que el registro es gratuito y toma sólo unos pocos minutos;
Descarga e instala la app en el escritorio: Aun cuando es posible usar la herramienta desde la web, lo más recomendable es instalar la aplicación, a fin de que funcione mejor;
Instala figma mirror: Esta aplicación móvil constituye el complemento ideal con el que podrás probar los diferentes diseños en los smartphone.
Empieza a diseñar: Una vez tengas todas las aplicaciones instaladas en tus equipos puedes comenzar la experiencia de diseñar con Figma.

Gato Computadora GIFs | Tenor

Conceptos básicos: Conociendo la UI

Para conocer el uso de Figma es importante que tengas información acerca de un conjunto de conceptos básicos que harán de esta experiencia mucho más sencilla para tí.

¡Veamos algunos de ellos!

1. Entorno y secciones

Entre las secciones más importantes podemos mencionar las siguientes:

Búsqueda (Search): Esta permite hacer la búsqueda de archivos, usuarios y proyectos;

Reciente (Recient): Esta brinda la posibilidad de mostrar los últimos archivos en los cuales estuviste trabajando;

Borradores (Drafts): Te brinda la oportunidad de almacenar archivos que son de uso personal, así como también llevar a cabo la creación de unos nuevos. Acá encontrarás tres archivos de figma: Prototyping in Figma, Figma Basics y Wireframing in Figma, los cuales te servirán como introducción a la herramienta;

Comunidad (Community): Ofrece la posibilidad de explorar y descargar múltiples tipos de plugins y archivos;

Teams: Brinda la oportunidad de crear equipos de trabajo para diseñar colaborativamente. Hay que referir que los límites de los miembros que pueden colaborar depende del tipo de cuenta;

2. Creación de archivos

En este punto es bueno saber que es posible crear un Archivo de Diseño de figma, mediante la opción new, la cual se encuentra localizada en la esquina superior derecha.

Es importante destacar que todo estará en la nube, debido a que Figma está basada en el navegador. De este modo, los archivos estarán totalmente accesibles con lo que evitarás perder tiempo o dinero en almacenamiento en Google Drive, Dropbox o OneDrive.

Atajos útiles para Figma

Si quieres ser un experto del prototipado con Figma tienes que prepararte con los mejores, pero mientras tomas esa decisión, aquí te dejamos un glosario con los atajos más importantes de la plataforma:

1. Atajos para formas

Bote de pintura: B

Bolígrafo: PA Lápiz, Shift P

Quitar relleno: Alt /

Herramienta de doblado: CTRL.

Quitar trazos: /

Intercambiar el relleno y trazos: Shift X.

Sección de aplanar: CTRL E.

Trazo de contorno: Shift CTRL O.

Unirse a la sección: CTRL J.

Elimina y cura la sección: Shift Eliminar.

Selección de unión suave: Shift CTRL J.

2. Atajos de selección

Seleccionar todo: CTRL A.

No seleccionar ninguno: Esc.

Selección inversa: Shift CTRL A.

Selección menú de capa: CTRL Clic derecho.

Selección profunda: Clic CTRL.

3. Atajos para texto

Negrita: CTRL B.

Subrayar: CTRL U.

Itálica: CTRL I.

Tachar: Shift CTRL X.

Crear vínculo: CTRL K.

Convertir en una lista: Shift CTRL 7.

Central el texto: ALT CTRL T.

Alinear a la izquierda: ALT CTRL L.

Alinear a la derecha: ALT CTRL R.

4. Atajos de editar

Pegar: CTRL V.

Cortar CTRL X.

Duplicar: CTRL D.

Pegar sobre la selección : Shift CTRL V.

Cambiar el nombre de la sección: CTRL R.

Pegar propiedades: ALT CTRL V.

Copiar propiedades: ALT CTRL C.

Copiar compo ping: Shift CTRL C.

Aplausos GIF - Encontrar en GIFER

Herramientas básicas de Figma

Existen un conjunto de herramientas que serán muy útiles para tu experiencia de diseño con Figma, las cuales han sido diseñadas cuidadosamente para mejorar la labor del usuario de esta aplicación.

Acá te las mostraremos para que tomes nota y aprendas a utilizarlas:

Figuras geométricas: Esta herramienta te brinda la oportunidad de insertar una imagen o si gustas crear una figura propia. Lo más importante es que las formas se pueden editar de múltiples maneras.

Frames: Estos constituyen una especie de contenedor para los elementos que hemos diseñado;

Vectores: Estas no son más que herramientas básicas como el lápiz y la pluma, las cuales te serán de mucha utilidad, pues permiten trabajar los nodos y vectores de las maneras que usamos nuestros diseños. Incluso podemos dibujar a mano alzada, anotaciones y los garabatos que nos provoque;

Insertar texto: Cómo su misma palabra lo indica y lo sabemos, te permite introducir textos personalizados. Estos pueden ser de ancho automático o de ancho fijo. Puedes aplicar formas de relleno, contorno y efecto.

Mano: Esta te brinda la oportunidad de navegar por medio de la página en la cual estamos llevando a cabo el proceso de diseño.

Figma vs. Sketch

Ambas aplicaciones cuentan con un conjunto de propiedades que las hacen muy útiles a la hora de diseñar. Mira:

En el caso de Figma

Brinda la oportunidad de trabajar colaborativamente en un archivo, lo cual permite soluciones un conjunto de problemas que ocurren normalmente en equipos de diseño, en el momento en que dos personas quieren trabajar a la vez en un solo archivo.

Asimismo, esta herramienta puede utilizarse en Windows, es decir, en el caso de Sketch sólo está disponible para operar en Mac.

De igual forma, Figma es ágil y está disponible en todos los lugares. Y es que los archivos son accesibles desde cualquier ordenador y, además, no te obliga a descargar nada.

En el caso de Sketch

Una de las principales ventajas de Sketch son los símbolos, los cuales son mucho más sencillos de editar, según quienes han utilizado las dos herramientas.

Adicionalmente cuenta con una interfaz clara, la cual, en el caso de Figma es tan simple que, a juicio de muchos, en muchos casos tiende a confundir y provoca que debas mirar más de una vez que tipo de capa estás seleccionando o cuál está dentro de cuál.

Los plugins de Sketch amplían sus capacidades. En el caso de Figma no se puede comprar temas de accesibilidad, así como tampoco es posible renombrar capas o distribuir elementos.

Y finalmente la comunidad de Sketch es tan grande que existen un sinfín de recursos para descargar archivos, plugins, plantillas, e inclusive resolver de manera sencilla cualquier duda que tengas.

¡Finalizamos!

Esperamos que toda esta información te haya sido de mucha utilidad para conocer cuáles son las bondades y oportunidades que tienes a la hora de utilizar Figma como herramienta de diseño.

Lo fundamental es que explores tanto como puedas esta herramienta y te prepares para vivir la mejor experiencia.

Si te gustó el tema no esperes más y compártelo con tus amigos en las redes sociales.