Home Blog/ Estilo de Vida/
Estilo de Vida

¬°Dale vida a tu producto digital con Figma!

Hugo Rodríguez - 31 Ene 22

Articulo

7 min.

Conocer qu√© es Figma no s√≥lo te ser√° de gran utilidad para comprender un poco m√°s¬†todo lo que hay detr√°s de alguna de las p√°ginas web que visitas regularmente. Te abrir√° un gran abanico de opciones para potenciar tus movimientos en l√≠nea. ¬ŅQuieres saber m√°s al respecto?

Si no has escuchado hablar sobre el user experience design y c√≥mo te ayudar√° a ser un profesional completo, debes saber que se trata de un concepto muy utilizado en el dise√Īo web que representa la Experiencia de Usuario. ¬ŅY qu√© tiene que ver con el hecho de saber qu√© es Figma?¬†Pues que, por medio de esta¬†herramienta, ¬°los visitantes de tu p√°gina web no se ir√°n nunca!

As√≠ que, si quieres aprender c√≥mo ser UX designer, est√°s en el lugar indicado. En esta nota responderemos qu√© es Figma, al tiempo que¬†tambi√©n veremos m√°s sobre sus caracter√≠sticas, las ventajas que ofrece como producto y su funcionamiento, as√≠ como tambi√©n los¬†recursos que pone a disposici√≥n de sus usuarios. ¬°Acomp√°√Īanos!¬†

¬ŅQu√© es Figma y para qu√© sirve?

¬ŅSabes qu√© es Figma? Es una herramienta online para dise√Īar interfaces que¬†permite la colaboraci√≥n en vivo. Es decir, tanto¬†los miembros del equipo de dise√Īo como t√ļ¬†pueden iniciar sesi√≥n al mismo tiempo y realizar ajustes, al margen del sistema operativo que utilices.

Esta herramienta apareció a finales de 2015 y comenzó a posicionarse rápidamente al ser la primera en tener colaboración en tiempo real, gracias a su modalidad online.

En palabras simples, Figma fue creada pensando en el desarrollo de productos, un factor que la convierte en una soluci√≥n multiplataforma para los dise√Īadores, quienes podr√°n mejorar el proceso de UX de alguna marca. Ahora que ya sabes qu√© es Figma y para qu√© sirve, es hora de averiguar m√°s acerca de sus caracter√≠sticas.

equipo de trabajo figma

Fuente: Pexels

¬ŅCu√°les son las caracter√≠sticas de Figma?

Conocer qué es Figma implica también reconocer sus fortalezas y debilidades. Por ese motivo, te presentamos algunas funciones y secciones que puedes aplicar en la plataforma para hacer tu experiencia mucho más agradable.

Algunas de las características de Figma son las siguientes:

1. Posibilidad de dise√Īar lo que desees

Esto pueda parecer una de las grandes ventajas de lo que es Figma:¬†tienes la posibilidad de dise√Īar cualquier interfaz gr√°fica interactiva que tengas en mente. Entre las opciones que puedes crear en esta plataforma est√°n¬†las siguientes:

  • Pantallas de sitios web.

  • Aplicaciones para celulares.

2. Existen variantes para la gestión de componentes

Si eres dise√Īador, valorar√°s mucho esta caracter√≠stica de Figma. Y, especialmente, su biblioteca de componentes, conocida como Variants.

Variants es, en esencia, un módulo de gestión de componentes inteligente que forma parte de lo que es Figma, el cual te ofrece la posibilidad de realizar un reordenamiento de diversas variantes duplicadas del mismo componente y mezclarlas, para poder organizar la colección de recursos del equipo que desees.

De igual forma, tambi√©n es posible definir un contenedor √ļnico para los componentes que sean parecidos. Adem√°s, en el marco del trabajo colaborativo, Variants busca brindarle al usuario la posibilidad de hacer m√°s f√°cil sus b√ļsquedas.

3. Ofrece listas numeradas y con vi√Īetas

Otra de las virtudes de Figma es que tambi√©n le ofrece al usuario interesado la posibilidad de poder incluir, tanto listas con vi√Īetas como los listados numerados en los distintos proyectos de dise√Īo en UI/UX. Sin embargo, ¬Ņde qu√© pueden servirte estas listas?

Pues es un elemento de mucho provecho, ya que te brindar√°¬†la posibilidad de poder administrar y organizar todos los datos de la forma que gustes o que te sea m√°s c√≥moda para trabajar. Adem√°s, una lista tambi√©n te ser√° de mucha utilidad para poder remarcar la informaci√≥n y los datos de dise√Īos vectoriales.

¬ŅQu√© caracter√≠sticas especiales tienen estas vi√Īetas numeradas? Algunos de los rasgos que caracterizan a este recurso son los siguientes:

  • Pueden traer incluidos cerca de 5 niveles de sangr√≠a.

  • Tiene la opci√≥n de realizar cambios en cuanto al color visual. Especialmente, mediante el color del texto, efectos o trazos.

4. Brinda la conexión de varias cuentas

Cuando hablamos de lo que es Figma, una de las primeras ventajas que destacamos es la posibilidad de acceder a todas las cuentas, perfiles de la comunidad de Figma y espacios de trabajo... ¬°Desde una √ļnica pantalla!

No s√≥lo esto: por medio de lo que es Figma, tendr√°s la posibilidad de saltar, de manera inmediata, entre los distintos espacios de trabajo. ¬ŅDe qu√© forma? En la esquina superior izquierda de la pantalla de Figma.

Ahora, si te interesan las cuentas, revisa el selector de cuentas, que est√° ubicado en la esquina superior derecha de la pantalla.

 

5. Renueva funciones importantes

Si hay algo que caracterizaba a Figma anteriormente era el panel de c√≥digo. Sin embargo, este recurso ha evolucionado hasta convertirse en la placa de inspecci√≥n. ¬ŅY para qu√© se utiliza esta funci√≥n?

Por medio de este recurso, los usuarios tendrán la posibilidad de facilitar a sus colaboradores (principalmente a los desarrolladores) la obtención de códigos y valores del proyecto en el cual se encuentren trabajando.

¬ŅQu√© clase de datos se pueden obtener mediante esta funci√≥n? Algunas de las opciones de informaci√≥n que podr√≠an servir para extraer datos son las siguientes:

  • Colores

  • Variantes

  • Sombras

  • Propiedades

  • Contenido

  • Bordes

  • Tipograf√≠a

Adem√°s, otro recurso¬†se ha visto renovado en todo lo que es Figma: el men√ļ de intercambio de instancias, al cual le fue a√Īadido un men√ļ de estilo push. Este men√ļ se ha convertido en una de las funciones favoritas de los dise√Īadores, ofreci√©ndoles la oportunidad de poder recorrer los componentes sin ning√ļn tipo de esfuerzo.

Asimismo, también existe la posibilidad de utilizar el selector desplegable, mediante el cual tienes la oportunidad de cambiar entre colecciones de equipo. Por si esto no fuera suficiente, existe una versión elegante en miniatura, en caso de que quieras verificar tu componente en vista previa.

6. Integración plena con Zeplin

Por si fuera poco, uno de los puntos altos dentro de todo lo que es Figma es que tambi√©n es compatible con el complemento nativo de Zeplin. ¬ŅSabes para qu√© sirve esta herramienta?

Principalmente, entre sus funciones m√°s destacadas, se√Īalamos que Zeplin permite la exportaci√≥n de proyectos de Figma, con tan s√≥lo presionar el bot√≥n derecho del rat√≥n, a los propios espacios de trabajo de Zeplin.¬†

Lo mejor de todo es que esta transici√≥n, a diferencia de lo que ocurre con otras apps de dise√Īo, no sufre de ning√ļn inconveniente en cuanto al rendimiento o la resoluci√≥n, en caso de que debas¬†exportar dise√Īos de Figma o marcos m√°s grandes.¬†

Ambas plataformas se encuentran desarrollando una función que permita actualizar, de forma directa, ciertos componentes de Figma en Zeplin.

7. Compartir comentarios y revisiones del proyecto en cuestión

El solo hecho de utilizar Figma para la revisi√≥n del dise√Īo de UI / UX termina convirti√©ndose en, simplemente, una conferencia grupal. Lo bueno de todo esto es que el equipo en pleno tiene la posibilidad de revisar posibles fallos¬†en tiempo real, as√≠ como de registrar comentarios; mientras que¬†la resoluci√≥n de problemas ocurre todo dentro del mismo marco de dise√Īo.

Este punto, el de compartir los comentarios, es uno de los puntos especiales de lo que es Figma, pues este recurso admite la tecnología más avanzada en cuanto a los comentarios. Así, cualquier cliente que tenga Slack o una dirección de correo electrónico, podrá ver almacenados las sugerencias y los comentarios debidos.

UX desarrollo

Fuente: Pexels

¬ŅPor qu√© usar Figma?

Para responder qu√© es Figma y por qu√© usarlo, primero necesitamos ser conscientes de la importancia que tiene el dise√Īo UX en la actualidad. Nicolas Cabieses, nuestro profesor del¬† curso online de Introducci√≥n al Dise√Īo UX, lo explica a la perfecci√≥n: "la industria creativa nos est√° empujando a crear productos digitales pensados en el usuario sin importar el tipo de dise√Īador que seas. Hoy en d√≠a, ning√ļn dise√Īador debe ignorar el dise√Īo UX como parte de sus conocimientos".

Teniendo en cuenta cu√°n importante es el dise√Īo UX en la actualidad, ¬Ņquieres saber la importancia de Figma y por qu√© debes utilizarlo? ¬°Te lo contamos!

1. Es una herramienta colaborativa

S√≠, ya te lo adelantamos m√°s arriba, pero vale la pena mencionar esta caracter√≠stica de Figma una y otra vez. El dise√Īo UX se caracteriza por tener fases en las que varias personas est√°n involucradas, por lo que la colaboraci√≥n en tiempo real ayudar√° a ganar tiempo y, adem√°s, a realizar eventuales ajustes en el camino.¬†

2. No cuenta con limitaciones

Figma tiene una versi√≥n gratuita para dos dise√Īadores, quienes podr√°n trabajar simult√°neamente en hasta tres proyectos. Como si esto fuera poco, la plataforma tambi√©n ofrece almacenamiento ilimitado en la nube.¬†

Eso s√≠, si trabajas en proyectos que requieren un mayor n√ļmero de colaboradores, tambi√©n existe una versi√≥n premium que tiene un precio de $45 USD¬†por editor. Adem√°s, esta versi√≥n tambi√©n entrega un reporte de anal√≠tica de tus sistemas, que es otra de las grandes caracter√≠sticas de Figma.¬†

3. Disponible para todos los SO

Gracias a lo que es Figma, no hay que cuestionarse cuál sistema operativo utilizar, ya que esta herramienta está disponible para todos los SO. Así que, si te preguntabas por qué usar Figma, aquí tienes otro gran motivo. 

De hecho, si tienes proyectos en lo que es Sketch, disponible solo para MAC, puedes importar tus archivos a Figma de una manera bastante sencilla.

 

4. Puedes mostrar tus prototipos

Figma tambi√©n te permite copiar la URL de alg√ļn prototipo y dejarla visible para todos, incluso sin que sea necesario tener una cuenta. Esto es muy √ļtil, teniendo en cuenta los avances que suelen mostrarse a los clientes.¬†

5. Trabaja sin conexión

Si bien ya sabes que Figma es una herramienta online, si te quedas sin conexión podrás seguir realizando algunas funciones, como crear componentes locales, crear marcos o formas básicas, entre otras acciones. 

6. Tiene una comunidad enorme

Una de las grandes caracter√≠sticas de Figma es que tiene una gigantesca comunidad de usuarios en la que los dise√Īadores podr√°n compartir sus trabajos o resolver consultas entre ellos.¬†

dise√Īo UX figma

Fuente: Pexels

¬ŅC√≥mo usar Figma?

Hasta ahora, conocer qué es Figma y sus virtudes te ha ayudado a entender que, dado el gran avance de las nuevas tecnologías, pronto esta plataforma evolucionará hacia funcionalidades mucho más grandes y adaptables.

Ahora bien, si¬†te preguntas c√≥mo usar Figma, es bastante sencillo e intuitivo. Para usar Figma, solo necesitas abrir tu navegador y registrarte. Incluye un control de versiones con el que podr√°s saber cu√°ndo fue actualizado por √ļltima vez y te dar√° la seguridad de estar trabajando con la versi√≥n correcta.

La interfaz de Figma es muy parecida a otras aplicaciones como Sketch o Adobe XD, ya que encontrar√°s herramientas como las siguientes:

  • Formas.

  • Im√°genes.

  • Componentes.

  • Librer√≠as.

  • Prototipado.

  • ¬°Hasta un feedback de los usuarios!

Explicarte cómo usar todas las herramientas de Figma nos tomaría varios artículos, así que hemos recopilado los primeros pasos que debes realizar para empezar a familiarizarte con esta herramienta.

Registro Figma

1. Revisar la interfaz de Figma 

Una vez te registres, lo primero que ver√°s es una pantalla de inicio con un peque√Īo men√ļ en la parte izquierda. Desde ah√≠, podr√°s ordenar todos tus proyectos de Figma.

Esta herramienta ofrece recursos predeterminados, pero no son los √ļnicos. Seg√ļn el¬† portal de Figma, existen otros recursos disponibles para ser utilizados por los usuarios, por lo que¬†encontrar√°s muchos m√°s, como plugins o assets.¬†

Vale decir que Figma te da dos opciones: puedes utilizarlo desde el navegador o también descargar una aplicación. 

Interfaz Figma

2. Configurar las tipografías locales

Por defecto, Figma est√° disponible con todas las tipograf√≠as disponibles en Google Fonts. Sin embargo, si lo que quieres es utilizar las tipograf√≠as que tienes en tu computadora, deber√°s realizar un peque√Īo¬†procedimiento.

Tipografías Figma 

Una vez te encuentres en esta sección, deberás ocuparte de lo siguiente:

  • Ve al men√ļ preferencias (haz clic¬†en tu nombre de usuario).

  • Busca la opci√≥n "Fonts".¬†

  • Da clic¬†en el bot√≥n de Descargar.

  • Luego, te aparecer√° un cuadro de di√°logo. Sigue el tutorial.

  • Una vez configurado, podr√°s ver el n√ļmero de tipograf√≠as disponibles que tienes en Figma.¬†

3. Crear un frame

Un frame es un espacio delimitado para poder trabajar y esta es una de las herramientas de Figma más intuitivas. Para crearlo en Figma, lo puedes hacer a través de la misma herramienta o con los shortcuts (F o A).

Frame Figma 

Acto seguido, en la parte derecha de la pantalla te aparecer√°n los tama√Īos predeterminados que ofrece Figma, que en realidad son los m√°s comunes de la industria.

Frame tama√Īos Figma

4. Crear componentes

Si est√°s familiarizado con Sketch, crear un componente en Figma resulta igual de sencillo.

  • En primer lugar, ubica la barra superior. Encontrar√°s tres √≠conos.

  • Da clic¬†en el √≠cono de "Crear un componente", que es una especie de rombo.¬†

  • Ahora, podr√°s ver tus componentes en la parte izquierda de tu pantalla.

Componentes Figma 

5. Configura tu equipo en Figma

Esta es una de las caracter√≠sticas de Figma m√°s √ļtiles. Al crear y configurar un equipo, podr√°s trabajar en tiempo real con los dem√°s involucrados en el proyecto.¬†

Para ello, deber√°s realizar los siguientes pasos:

  • En la parte inferior izquierda, da clic¬†en el bot√≥n "New Team".

  • Te aparecer√° una pantalla en la que podr√°s nombrarlo.

  • Tras pasar la pantalla en la que Figma te explica sus planes, podr√°s configurar la foto de tu equipo, colocar una descripci√≥n o agregar integrantes.

Equipo Figma 

6. Crear tu primer proyecto en Figma

¡Listo! Ya casi terminamos con este resumen de las principales características de Figma. Es momento de crear nuestro primer proyecto. 

Para poder empezar, hay que cumplir con los siguientes protocolos:

  • Ve hacia tu equipo, en la barra lateral izquierda.¬†

  • Una vez est√©s en esta pantalla, ubica el bot√≥n "New Project", ubicado en la parte superior derecha.

  • Col√≥cale un nombre y podr√°s ver los distintos permisos que hay tanto para edici√≥n como para quienes solo puedan ver los avances.

Proyecto Figma

Como puedes ver, conocer qu√© es Figma y todo lo que engloba puede significar m√ļltiples beneficios para ti, adem√°s de resolver problemas de trabajos en equipos, que suelen surgir por mala comunicaci√≥n¬†en primera instancia.

Su facilidad para funcionar en distintos sistemas operativos, su agilidad y disponibilidad para estar ahí desde cualquier PC y, por sobre todas las cosas, la posibilidad de trabajar de forma colaborativa en un archivo... Todo esto, más lo mencionado, hace que Figma empiece a ser considerado como una de las mejores alternativas para los equipos y las empresas.

Porque, como bien menciona el portal Medium, "para que las herramientas de dise√Īo sean efectivas, la velocidad es esencial", y eso es justo lo que representa Figma.

¬°Este ha sido nuestro post! Si quieres aprender m√°s acerca de qu√© es Figma y c√≥mo utilizarlo a tu favor, inscr√≠bete en nuestros cursos de dise√Īo gr√°fico online, con los cuales aprender√°s todo lo que debes saber para aplicar tus conocimientos creativos y explotar tu potencial.¬†

Y como ya eres un experto en todo lo que es Figma, te regalamos estas plantillas para el dise√Īo de interfaces en aplicaciones m√≥viles para que las utilices en tus proyectos audiovisuales. ¬°Exitos!