¬°Dale vida a tu producto digital con Figma!

Última actualización 15 de Enero del 2021

user

Miguel Mejia

¬°Dale vida a tu producto digital con Figma! ¬°Dale vida a tu producto digital con Figma!

¬ŅAlguna vez te has puesto a pensar todo lo que hay detr√°s de alguna de las p√°ginas web que visitas a diario? O, mejor a√ļn, ¬Ņsabes por qu√© vuelves una y otra vez a ese sitio web? Figma y un equipo de dise√Īadores son los responsables de la agradable interfaz que ves a diario. En esta nota te explicaremos qu√© es Figma y su importancia en la industria.¬†

Seguro que has escuchado sobre el dise√Īo UX, un concepto muy utilizado en el dise√Īo web que representa la Experiencia de Usuario. Figma, pues, es una herramienta que precisamente ayudar√° a que los visitantes de tu p√°gina web no se vayan nunca. A prop√≥sito, te invitamos a conocer las tendencias UX y UI para el 2021.¬†

En esta nota responderemos qu√© es Figma, pero recuerda: esta es una pincelada al poder de una herramienta. Al final hay desarrollo estrat√©gico, dise√Īo y research que ir√°s aprendiendo para hacer de tus proyectos un √©xito rotundo. Ahora s√≠, ¬°ha llegado el momento de aprender a usar Figma!

 

√ćndice:¬†

  1. ¬ŅQu√© es Figma y para qu√© sirve?
  2. ¬ŅPor qu√© usar Figma?
  3. ¬ŅC√≥mo usar Figma?¬†

 

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

Figma es una herramienta para dise√Īar interfaces que apareci√≥ a finales de 2015 y comenz√≥ a posicionarse r√°pidamente al ser la primera en tener colaboraci√≥n en tiempo real.

¬ŅQu√© quiere decir esto? Pues que Figma funciona en l√≠nea, lo que permite la colaboraci√≥n en vivo; es decir, t√ļ y los miembros del equipo de dise√Īo pueden iniciar sesi√≥n al mismo tiempo y realizar ajustes tambi√©n a la vez, al margen del sistema operativo que utilices.¬°Es una de las grandes caracter√≠sticas de Figma! Aprovechamos para contarte las caracter√≠sticas que debe tener una PC o laptop para el dise√Īo gr√°fico.

¬ŅQu√© es Figma?¬†

Imagen: Freepik

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 conocer por qu√© deber√≠as aprender a usar esta herramienta.

 

¬°Conoce todos los cursos online de Web que tenemos para ti!

 

2. ¬ŅPor qu√© usar Figma?

Para responder por qu√© usar Figma, primero necesitamos ser conscientes de la importancia que tiene el dise√Īo UX en la actualidad. Nicolas Cabieses, nuestro profesor del curso online 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".

Como dato adicional, ¬Ņsab√≠as que Airbnb revolucion√≥ el dise√Īo UX y lo atribuye como uno de los factores que los llev√≥ a alcanzar el √©xito?¬†

Teniendo en cuenta cu√°n importante es el dise√Īo UX en la actualidad, ahora s√≠ es oportuno explicar por qu√© usar Figma.

 

Descarga gratis esta plantilla para wireframe UX para iOS y Android

Plantilla para wireframe

 

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.¬†

Figma sin 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, Figma 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 US$ 45.00 por editor. Adem√°s, esta versi√≥n tambi√©n entrega un reporte de anal√≠tica de tus sistemas, otra de las grandes caracter√≠sticas de Figma.¬†

¬ŅMAC o Windows?¬†

Gracias a Figma no hay que hacer más esta pregunta, ya que esta herramienta está disponible para todos los sistemas operativos. Así que, si te preguntabas por qué usar Figma, aquí tienes otro gran motivo. 

De hecho, si tienes proyectos en Sketch, disponible solo para MAC, puedes importar tus archivos a Figma de una manera bastante sencilla, seg√ļn Serguei Orozco, profesor del curso online Prototipado desde cero con Figma.

"Si eres un usuario de Sketch, te será fácil hacer una transición. En Figma podrás importar tus archivos de Sketch con una precisión de casi el 90%, manteniendo todas las capas y símbolos intactos".

¡Muestra 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.¬†

Trabaja sin conexión

Si bien 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. 

¡Sé parte de la comunidad! 

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.¬†

3. ¬ŅC√≥mo usar Figma?¬†

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.

Registro Figma

La interfaz de Figma es muy parecida a otras aplicaciones como Sketch o Adobe XD, ya que encontrarás herramientas como formas, imágenes, componentes, librerías, prototipado y hasta un feedback de los usuarios.

Feedback Figma

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. Recuerda que, si quieres ahondar más en Figma, el profesor Serguei te espera en su curso online.

 

Conoce el maravilloso mundo UX y UI de la mano de Pol Celsi

 

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.

Interfaz Figma

Asimismo, Figma ofrece recursos predeterminados, pero no son los √ļnicos, ya que al entrar a su p√°gina web 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. 

¬ŅC√≥mo configurar las tipograf√≠as locales en Figma?

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 unos peque√Īos pasos.

Tipografías Figma 

-Ve al men√ļ preferencias (click en tu nombre).

-Busca la opción "Fonts". 

-Da click 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.¬†

¬ŅC√≥mo crear un frame en Figma?¬†

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 

Frame tama√Īos 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.

 

Membresía Premium

 

¬ŅC√≥mo crear componentes en Figma?

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

Componentes Figma 

-Ubica la barra superior. Encontrarás tres íconos.

-Da click 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.

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.¬†

-En la parte inferior izquierda, da click 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 

¬ŅC√≥mo 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. 

-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  

¡Felicidades! Acabas de dar el primer paso para convertirte en un auténtico especialista de Figma. Si bien ya sabes qué es Figma, recuerda que puedes afianzar tus conocimientos con alguno de los cursos online que te compartimos en este artículo. 

Recomendados para ti