• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar al pie de página

Juanpol

Diseño UX y UI / Creación de productos digitales

  • Tutoriales de Figma
  • Blog
  • Newsletter
  • 🔴 YouTube

¿Qué es Figma y para qué sirve?

Es el futuro, me dijeron después de preguntar qué es Figma. Hoy te quiero hablar sobre esta herramienta de diseño de interfaz colaborativa. Con ella los profesionales UX/UI podemos crear, probar y compartir nuestros diseños.

Pero antes de comenzar con la introducción a Figma te quiero contar brevemente mi relación con los programas de diseño.

Índice del artículo

  • El trabajo de un diseñador UX/UI
  • Figma en español
  • Características de Figma
    • Wireframes
    • Diseño
    • Tutoriales de Figma
    • Prototipos animados
    • Codificación
    • Colaboración
      • Sistemas de diseño
      • Plugins
    • Config, la conferencia de Figma
      • Config 2021
      • Config Europe 2020
      • Config 2020
    • Curso de Figma
    • ¿Qué es y cómo trabaja un Product Designer?
    • Cómo diseñar un buscador en Figma
    • Cómo crear una barra de navegación en Figma
    • Cómo crear un menú desplegable en Figma

El trabajo de un diseñador UX/UI

En 1990 instalé en un viejo Macintosh la primera versión de Adobe Photoshop. Durante mucho tiempo trabajé con esa herramienta. Instalaba el software en mis ordenadores, aplicaba las actualizaciones disponibles y así pasé muchos años de versión en versión.

A comienzos del 2000 lo comencé a dejar, trabajaba casi todo el día utilizando aplicaciones de la empresa Macromedia. Curiosamente, unos años después pasaron a ser de Adobe. Me sentía atado, sabes bien que las licencias de Adobe siempre fueron… «importantes».

qué es figma y para qué sirve
El diseño de mi sitio web versión 2020 lo estoy haciendo con Figma.

En 2010 después de probar unas semanas la versión beta de Sketch decidí comprar la aplicación. Encontré en ella las mismas herramientas que utilizaba en Photoshop para hacer mi trabajo. Unos meses después ya no utilizaba las aplicaciones de Adobe. Es más, en algunos de mis ordenadores ni siquiera las tenía instaladas. Con este programa de la empresa Bohemian Coding descubrí que no se necesita un Ferrari para ir a comprar el pan. Imagino que entiendes lo que quiero decir.

En 2014 incorporé una nueva herramienta en mi flujo de trabajo, compré Affinity Designer y tiempo después me hice con Affinity Photo. Las sensaciones fueron las mismas que con Sketch, tenía la posibilidad de crear diseños profesionales pagando licencias razonables. Las tres aplicaciones funcionaban perfectamente en todos mis ordenadores, los nuevos y los viejos con menos potencia y prestaciones técnicas.

Aprende Figma desde cero recorriendo la guía de herramientas oficial.

Si llegaste hasta aquí y no conoces las apps de las que estoy hablando te diré que Sketch es un programa para el sistema macOS de Apple, la Suite de Affinity (Designer, Photo y desde hace poco Publisher) se puede utilizar en Macintosh y Windows.

¿Por qué te cuento estas cosas? Comparto mi experiencia para que entiendas el cambio de paradigma que me llevó a perder el miedo a trabajar con herramientas desconocidas y «poco probadas». La transformación comenzó con la compra de Sketch. No la hice de un día para otro, el cambio fue progresivo. Debería en realidad hablar en presente, porque el cambio lo sigo haciendo, hoy te estoy introduciendo en Figma.

Sigamos hablando del próximo paso.

Figma en español

Persiguiendo el objetivo de optimizar nuestro flujo de trabajo utilizando un mejor sistema de diseño comentamos con un compañero la posibilidad de dejar Sketch y pasar a Figma.

Figma funciona dentro de tu navegador, es una aplicación web (SaaS o Software as a Service) que puedes utilizar en sistemas operativos macOS, Windows y Linux. Aunque existen versiones de escritorio para Mac y Windows la posibilidad de usarlo en línea te dará libertad total. Cuando comencé a diseñar con Figma experimenté las mismas sensaciones que tuve en 2006 cuando pasé de Office a Google Docs de la hoy Google Drive o Google Suite.

En el momento de escribir este artículo Figma tiene tres planes disponibles. Starter, Professional y Organization. La primera es gratuita, 100% funcional pero con algunas limitaciones. Las otras dos son de pago pero los precios son muy asequibles. Un detalle, si eres estudiante también podrás utilizar libremente la versión Professional.

Si usas Figma en línea te olvidarás de instalaciones y actualizaciones. Es más, podrás guardar tus diseños en la nube de forma ilimitada, incluso con la versión gratuita. Si te descargas la versión de escritorio tampoco es un problema, la instalarás sólo una vez y sus upgrades son rapidísimos.

Características de Figma

Aunque mi idea es publicar más artículos con información y tutoriales de Figma me gustaría hacer un repaso de sus características principales.

Wireframes

Hasta hace poco tiempo los wireframes que montaba durante el proceso de creación los hacía con Balsamiq Wireframes, una aplicación que apareció en 2008. En su momento era todo un referente, quizás hoy lo siga siendo.

Pero ya no uso Balsamiq Wireframes en mis ordenadores. Con Figma puedes crear wireframes. Como te contaré a continuación a estos esquemas de páginas y pantallas podrás convertirlos en el diseño final y hasta a crear prototipos con ellos.

Diseño

Con Figma puedes diseñar pantallas de sitios web, aplicaciones móviles y cualquier otra interfaz gráfica interactiva. Encontrarás en sus paneles de herramientas muchas similitudes con otros programas como Sketch o InVision Studio.

Podrás crear y editar formas con vectores y nodos, utilizar paletas de colores y maquetar textos sin poner límites a tu imaginación. Tus ideas fluirán con facilidad porque pondrás toda tu atención en el diseño.

En este screencast puedes ver cómo se usa Figma, cuando lo pruebes te sentirás dentro de tu aplicación favorita.

Insisto, dedicaré próximos artículos de este blog para comentar con detalle todas las opciones que Figma ofrece al profesional del diseño UX/UI.

Tutoriales de Figma

Aquí debajo te dejo mi lista de los tutoriales que he creado hasta el momento:

  • Cómo crear animaciones en Figma sin plugins
  • Cómo crear un enlace a un imagen
  • Cómo crear links en Figma
  • Componentes interactivos
  • Todas las herramientas de Figma
  • Canvas, el lugar donde diseñamos
  • Auto Layout
  • Auto Layout con atajos de teclado
  • Auto Layout desde el menú contextual
  • Auto Layout desde el menú o icono hamburguesa
  • Auto Layout desde tu propio módulo

Si no te quieres perder ningún contenido puedes recibir mi Newsletter en tu correo electrónico.

Prototipos animados

Figma te permite crear prototipos animados con tus wireframes y diseños. Podrás darle vida a tus pantallas para mostrar el camino que harán tus usuarios y clientes.

Con un diseño prototipado que parece real tu equipo de trabajo podrá evaluar el proyecto y sacar las conclusiones necesarias para seguir con la idea original o para hacer los cambios que llevarán tu creación al éxito.

Con un diseño prototipado que parece real tu equipo de trabajo podrá evaluar el proyecto y sacar las conclusiones necesarias para seguir con la idea original o para hacer los cambios que llevarán tu creación al éxito.

Codificación

Dentro de la aplicación encontrarás un panel de código. Sin salir de Figma podrás utilizar un inspector de código para ver o interpretar tu diseño. Muy parecido al que tienes disponible en Sketch, o al usas en navegadores como Google Chrome o Mozilla Firefox.

Entre muchas otras cosas podrás generar o códigos en formatos SVG, CSS, iOS y Android.

Colaboración

Si tienes compañeros de trabajo que no están a tu lado no hay problema, Figma te ayuda a compartir tus diseños y prototipos con un simple enlace. Sólo se necesita un dispositivo con conexión a Internet. Tus compañeros de trabajo podrán dejar sus comentarios en contexto, incluso podrán editar y hacer cambios si así lo deseas. Con Figma la colaboración es muy fácil.

Sistemas de diseño

Si en tu empresa tienes un sistema de diseño escalable cualquier integrante del equipo podrá reutilizarlo infinitamente. Incluso lo podrás actualizar con nuevos elementos y herramientas ayudando a los diseñadores a trabajar más rápido y con más organización. Dedicaré también algunos artículos a este tema puntual.

Plugins

La comunidad que hay detrás de Figma crece de manera constante. Diseñadores y programadores desarrollan y ofrecen plugins para hacer de Figma una herramienta mucho más poderosa.

Está pasando lo mismo que en su momento ocurrió con Sketch, las posibilidades que esta herramienta nos ofrece a los diseñadores de experiencia de usuario son realmente infinitas.

En el artículo Los mejores plugins de Figma te cuento cuáles son mis plugins favoritos y cómo los selecciono e implemento en mi workflow.

Config, la conferencia de Figma

Figma organiza todos los años un evento llamado Config.

Config 2021

Hay fecha para Config 2021, el evento de Figma más importante del año. Será realizará el 21 de abril. En cuanto haya más información sobre el evento y los ponentes que participarán la compartiré aquí mismo.

Config Europe 2020

Varios meses después de hacer el primer Config se organizó un evento virtual llamado Config Europe en el que participar ponentes y asistentes de muchos países del mundo. El objetivo fue el de siempre, reunir a usuarios de Figma para hacer crecer la comunidad y que todos aprenden de todos. El primer Config Europe se realizó el 17 de septiembre de 2020.

Config 2020

Durante el mes de febrero de 2020 Figma organizó Config, una conferencia realizada en San Francisco, al evento asistieron más de 1000 usuarios de la aplicación, profesionales del desarrollo y el diseño de todos los niveles que enseñaron y aprendieron unos de otros.

La conferencia la abrió Dylan Field, el CEO de Figma, para agradecer la asistencia y compartir información sobre el crecimiento y consolidación de la aplicación.

Luego hablaron casi 40 ponentes de empresas como Dropbox, Shopify, NPR (la radio pública de Estados Unidos), Microsoft, Autodesk, Atlassian, GitHub, Etsy, Asana o Uber. Seguro que alguna de estas firmas te suena. Efectivamente, como lo estás pensando, ellos también usan Figma.

Hablaron del uso de Figma con casos reales, técnicas que implementan en su trabajo diario, nuevas herramientas, futuras características de la aplicación, etc.

Está disponible el livestream de la conferencia, lo puedes ver aquí mismo.

Curso de Figma

¿Te interesa hacer un curso para aprender a usar Figma? Como dije mi intención es publicar más artículos sobre la aplicación, su uso y la implementación de la misma en procesos creativos. Este post lo actualizaré cada vez que publique información sobre Figma.

Por cierto, estoy compartiendo directos con clases y tutoriales en Twitch.

Te pido entonces, por favor, que sigas con atención mis noticias. Y al mismo tiempo te invito a dejar tus preguntas, reflexiones, experiencias y/o sugerencias en un comentario.

¿Qué? ¿Te animas a dar el salto?

✅ Tutoriales de 2023

qué es y qué hace un product designer

¿Qué es y cómo trabaja un Product Designer?

¿Cómo trabaja un profesional dedicado al diseño de producto?

cómo crear una barra de búsqueda con figma

Cómo diseñar un buscador en Figma

Tutorial paso a paso para crear una barra de búsqueda para una aplicación móvil.

cómo crear una barra de navegación en figma

Cómo crear una barra de navegación en Figma

Tutorial para diseñar componentes y prototipo.

Cómo crear un menú desplegable en Figma

Cómo crear un menú desplegable en Figma

Indicaciones paso a paso para montar un menú dropdown.

Aprende a usar Figma, Sketch y Webflow

Suscríbete gratis para recibir notificaciones cuando publique nuevos contenidos.

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción.

Información de privacidad

En este sitio web te solicito algunos datos para enviarte correos electrónicos con las publicaciones que hago. Finalidad de los datos: Enviar correos electrónicos con las novedades publicadas en el blog. Legitimación: Aceptación expresa de la política de privacidad. Almacenamiento de los datos: Base de datos alojada en Siteground España. Duración: Hasta que lo solicites. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

juanpol

Acerca de Juanpol

Product Designer, Diseñador UX/UI y creador de contenido con 29 años de experiencia. Trabaja en Freepik Company.

Interacciones con los lectores

Comentarios

  1. Foto del avatarEvelyn dice

    29 junio, 2020 a las 23:37

    Excelente herramienta, estoy muy interesada en aprenderla. Agradezco de antemano su ayuda y ganas de enseñarnos.

    Responder
    • juanpolJuanpol dice

      30 junio, 2020 a las 0:38

      Muchas gracias a ti por tu interés Evelyn, en breve comenzaré a publicar los artículos que estoy haciendo dedicados completamente a Figma.

      Responder
  2. Foto del avatarJorge dice

    14 septiembre, 2020 a las 0:56

    Interesante el artículo, y si me interesa saber más de Figma, me topé con él hace tres meses, más o menos. Empecé a utilizarlo y el manejo es sencillo, tal vez porque algunos comandos son similares a los que uso en otros programas de diseño. Ahora toca ahondar más en el tema y artículos como este, estoy seguro que ayudarán sobremanera. Una consulta para ser diseñador UX/UI, basta con saber estás plataforma de prototipados o hay algo más que averiguar.
    Felicitaciones.

    Responder
    • juanpolJuanpol dice

      14 septiembre, 2020 a las 2:24

      Muchas gracias Jorge por dejar tus comentarios. Decirte que seguiré publicando artículos sobre la Figma, hoy sigue siendo la herramienta más innovadora para diseñar.
      Sobre tu segunda inquietud te diré que para trabajar con UX/UI debes contar con skills que no son propias de la o las herramientas que puedas utilizar, si ese tema te interesa por favor dímelo, con tu respuesta podré añadir al plan editorial artículos y programas del podcast que podrán responder tus inquietudes. Saludos!

      Responder
  3. Foto del avatarRichard Ortega dice

    25 septiembre, 2020 a las 17:37

    Saludos amigo y muchas gracias por su trabajo.

    Mi comentario tiene que ver con la codificación, por ejemplo yo estoy creándome un sitio web para mi negocio en WordPress, mi idea es personalizar lo más que pueda la interfaz de usuario. Mi pregunta: ¿Podría diseñar esa UI en Figma y luego exportar algún tipo de código a WordPress y así colgar mi diseño en la interfaz de WordPress?

    De antemano gracias por su disposición y espero me puedas ayudar

    Responder
    • juanpolJuanpol dice

      25 septiembre, 2020 a las 18:34

      Buena tu pregunta Richard, gracias por dejarla aquí en el blog. Me la apunto para responderla con detalle en un próximo artículo. Saludos.

      Responder
  4. Foto del avatarNemesio dice

    31 octubre, 2020 a las 21:23

    Me gustaría mucho aprender sobre este aplicativo de diseño. ¿Estos diseños se pueden publicar tal cual para una página web o una aplicación móvil? O ¿son solo para diseñar y esquematizar? Saludos.

    Responder
    • juanpolJuanpol dice

      1 noviembre, 2020 a las 16:01

      Figma es una aplicación de diseño y prototipado Nemesio. Después de montar tu proyecto en ella tendrás que desarrollarlo en el lenguaje y la plataforma que más se acerquen a tus necesidades.

      Responder
  5. Foto del avatarofir solis dice

    31 octubre, 2020 a las 23:35

    Tengo un problema y es que abro mi aplicación de escritorio Figma y me manda al navegador y no me da la función de trabajar en la App de escritorio.

    Responder
    • juanpolJuanpol dice

      1 noviembre, 2020 a las 15:59

      Ofir, ante todo gracias por dejar tu pregunta sobre Figma. Quiero terminar de entender lo que te pasa, si la aplicación de escritorio te manda al navegador entiendo que lo hace para que abras una sesión allí, acción que te permitirá abrir la aplicación de escritorio para seguir trabajando en ella sin problema alguno. ¿Lo has probado?

      Responder
      • Foto del avatarJuliana dice

        7 diciembre, 2020 a las 15:11

        A mi me pasa lo mismo que a Ofir. Es como si la aplicación dejara de funcionar y la sesión de mi cuenta tiene limitaciones. No tiene todas las herramientas de la de escritorio.

  6. juanpolJuanpol dice

    7 diciembre, 2020 a las 16:44

    Juliana, ¿puedes darme más información? Cuando dices que no tienes todas las herramientas de la versión de escritorio… ¿de qué herramientas hablas? si quieres puedes enviarme capturas de pantalla a info@juanpol.com
    Si puedo ayudarte, cuenta con ello, saludos.

    Responder
  7. Foto del avatarveronica dice

    1 febrero, 2021 a las 19:02

    Hola ! Me interesa…

    Responder
    • juanpolJuanpol dice

      1 febrero, 2021 a las 19:58

      Pues… bienvenida al blog Verónica! Cualquier duda o inquietud pregunta y te responderé lo más rápido posible. Gracias por tu interés!

      Responder
  8. Foto del avatarEsayé dice

    9 febrero, 2021 a las 2:38

    Hola Juan, me encantó tu artículo. Estoy comenzando a estudiar esto del UX/UI, estaré al pendiente de los demás artículos, gracias!

    Responder
    • juanpolJuanpol dice

      9 febrero, 2021 a las 6:54

      Muchas gracias Esayé! Cualquier duda que tengas déjala en un comentario y te respondo. Saludos!

      Responder
  9. Foto del avatarIván dice

    19 abril, 2021 a las 18:47

    Hola Juanpol! La verdad muy valiosa tu información y experiencia de como pasar de Adobe a nuevas aplicaciones. Yo igual tengo más de 25 años de trabajar con Adobe, pero quiero conocer nuevas formas de trabajar adaptadas a tiempos reales. Pregunta: se necesita conocer de programación para trabajar con Figma? Saludos!

    Responder
    • juanpolJuanpol dice

      19 abril, 2021 a las 19:15

      Hola Iván, bienvenido al blog, es tu primer comentario y espero que no sea el último. Te respondo, para trabajar con Figma no necesitas saber programar, podrás crear tus diseños con click de ratón y atajos de teclado. Los flujos e interacciones de los prototipos igualmente, sólo usarás ratón y teclado. Si te puedo ayudar en algo, deja un comentario. Saludos!

      Responder
  10. Foto del avatarDavid Villarreal Berdugo dice

    10 febrero, 2022 a las 16:06

    Hola buenos días, tengo la siguiente inquietud, yo uso una licencia professional para Figma, si en dado caso se me llega a vencer la licencia se me perderia todo el trabajo realizado o se eliminaria, o queda almacenado hasta que vuelva a renovar la licencia?
    Muchas gracias.

    Responder
  11. Foto del avatarHilario Avlear dice

    1 febrero, 2023 a las 17:30

    ¿Cual es el rango salarial para un diseñador que maneja Figma en el mercado laboral?

    Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


En este sitio web te solicito algunos datos para poder moderar y responder comentarios de usuarios. Responsable de los datos: Juan Pablo Olmo / Finalidad de los datos: Gestionar los comentarios y evitar el spam. / Legitimación: Aceptación expresa de la política de privacidad. / Almacenamiento de los datos: Base de datos alojada en Siteground España. / Duración: Hasta que lo solicites. / Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Footer

Te puede interesar

  • Componentes interactivos de Figma
  • Los mejores plugins de Figma en 2023
  • Cómo crear un scroll en Figma
  • ¿Qué es Figma y para qué sirve?

Información

  • Juanpol
  • Contacto

Juanpol

Juanpol

Diseño UX y UI / Creación de productos digitales

  • info@juanpol.com
  • LinkedIn
  • YouTube
  • Telegram
  • Twitter

  • Privacidad

Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada o a partir de tus hábitos de navegación. Puedes informarte más sobre ellas en los ajustes

Resumen de privacidad

Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada o a partir de tus hábitos de navegación. Puedes cambiar la configuración u obtener más información consultando la política de cookies.

Cookies de terceros

Esta web utiliza herramientas de estadística para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Política de cookies

Más información sobre nuestra política de cookies.