• 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

Los mejores plugins de Figma

En este artículo te hablaré de los mejores plugins de Figma y te explicaré su proceso de instalación y el método personal que aplico para introducirlos en mi flujo de trabajo. Espero que esta información te ayude o motive a optimizar el tuyo.

los mejores plugins de figma
Los plugins de Figma hacen más grande y potente a la herramienta / Vectores: Flaticon

Si utilizas algún plugin que no aparezca en este artículo o deseas compartir tu experiencia o alguna recomendación por favor deja un comentario o escríbeme. Como siempre digo, todos aprendemos de todos. Gracias de antemano.

Quizás te pueda interesar la guía de herramientas de Figma más completa en español.

Índice del artículo

  • Listado de plugins
    • Freepik
    • Storyset
    • Buscar y Reemplazar
    • Border
    • Rename It
    • Unsplash
    • Google Sheets Sync
    • Link to Documentation
    • Stark
    • Content Reel
    • Lorem ipsum
    • Image Palette
    • Autoflow
    • Language Tester
    • Font Scale
    • Material Design Icons (Community)
  • Cómo buscar plugins de Figma
    • La comunidad de Figma
      • Plugins destacados
      • Los más utilizados
      • Plugins instalados
      • Entrar en la comunidad
      • Documentación para desarrolladores
      • Todos los plugins de Figma
      • Ficha de plugin
  • Cómo instalar los plugins de Figma
    • Desinstalación
  • ¿Qué plugin de Figma debes instalar?
    • Referentes

Listado de plugins

Este listado con plugins para usar en Figma lo he montado con los que yo mismo utilizo para trabajar y con las sugerencias de amigos y lectores del blog. Es una lista viva porque la actualizo todas las semanas.

Freepik

plugin de freepik para figma

Con el plugin de Freepik puedes usar millones de fotos en tus diseños. Da igual si estás creando una página web o una aplicación para dispositivos móviles, en todas las pantallas podrás incrustar fácilmente imágenes de calidad profesional.

¿Te interesa que publique un artículo explicando todas las características de este plugin?

Descargar plugin Freepik

Storyset

storyset plugin

Si quieres añadir pequeñas animaciones en tus diseños tienes que probar este plugin. Mis compañeros de Freepik Labs lo han desarrollando. Dedicaré un post entero para hablar de Storyset.

Descargar plugin Storyset

Buscar y Reemplazar

Utilicé por primera vez este complemento para buscar y reemplazar texto cuando tuve la necesidad de una frase repetida más de 30 veces en un archivo de Figma que no estaba hecho con componentes. En lugar de cambiar todos los copys a mano ejecuté Find and Replace y el cambio lo hice en segundos.

También se pueden cambiar los nombres de los Layers. Funciona igual que el proceso Buscar y Reemplazar de editores de texto como Sublime Text, Atom o Visual Studio Code.

Tiene un detalle simple pero muy valioso, antes de hacer el cambio el plugin te ofrece una vista previa de los resultados.

Descargar plugin Find and Replace

Border

plugin para crear bordes en figma

Hasta el momento cuando necesitamos crear en Figma un borde en alguno de los elementos de nuestro diseño tenemos dos opciones: 1) dibujarlo a mano utilizando una línea o una forma o 2) crear un efecto de sombra. Personalmente prefiero usar la primera opción. Para evitar esta «solución» provisional busqué en el repositorio alguna opción interesante.

Encontré el plugin Border, hace lo mismo que yo estaba haciendo a mano pero me permite ganar algo de tiempo y un poco de orden. Tiempo porque con un simple click puedo crearlos y ajustarlos con precisión y orden porque el plugin crea un grupo con todos los bordes dentro.

Por defecto crea bordes negros de 1 píxel de ancho, si deseas cambiar su aspecto sólo tienes que ir al grupo, seleccionar el borde y modificarlo desde el panel Stroke ubicado en el sidebar de Figma.

Me consta que no es la mejor solución, pero mientras tanto te ayudará a ser más rápido en tareas repetitivas.

Figma ya permite crear bordes de forma nativa, recomiendo entonces no utilizar este plugin.

Descargar plugin Border

Rename It

rename it

Siempre me gusta llevar un orden bastante estricto con la información que hay dentro de mis proyectos. Rename It es la herramienta perfecta para hacerlo. Este plugin creado por Rodrigo Soares te permite cambiar por lotes el nombre de layers y frames. Esta acción te ayudará a ti y a tus compañeros de equipo a “no perderse” dentro de los archivos de Figma.

Rename It es el primer plugin que instalé en Figma, conocía todo su potencial porque ya lo utilizaba en Sketch.

¿Te interesa aprender a usar Rename It para aplicarlo en tu trabajo? Si te parece buena idea por favor dímelo en un comentario.

Descargar plugin Rename IT

Unsplash

unsplash

Poco puedo decir del plugin de Unsplash para Figma. Todos conocemos la calidad de sus fotografías. Poder insertar fotos profesionales para utilizar en proyectos personales y comerciales es toda una gozada.

Ciertamente echo de menos plugins para hacer lo mismo con las imágenes de Pexels y Freepik.

Descargar plugin Unsplash

Google Sheets Sync

google sheets sync

Este plugin te permite sincronizar la información de Google Sheets con tus archivos de Figma. Lo ha creado Dave Williames, un desarrollador con varios plugins publicados en Figma Community. Como los anteriores este plugin te ayudará a ganar tiempo, a ti y a los demás integrantes de tu equipo.

Para un adicto a G Suite como lo es un servidor Google Sheets Sync es otro plugin de obligada instalación.

Descargar plugin Google Sheets Sync

Link to Documentation

link to documentation

El nombre del plugin explica claramente su utilidad. Yo lo uso muchísimo para enlazar ciertas partes o elementos de un proyecto con documentos publicados en G Suite o con URLs donde hay información relacionada con el proyecto.

Link to Documentation lo ha creado Jackie Chui, un diseñador de producto que trabaja en Microsoft y que tiene varios plugins de Figma publicados en el repositorio oficial.

Descargar plugin Link to Documentation

Stark

stark

Aunque los compañeros de accesibilidad siempre nos ayudan para que nuestros proyectos sean inclusivos con el máximo número de personas, siempre viene bien adelantarse a ellos. Stark es un plugin muy recomendable para diseñar teniendo en cuenta el contraste de color y el nivel de daltonismo de los usuarios.

Descargar plugin Stark

Content Reel

content reel

Otro plugin bastante útil si necesitas contenidos para tus diseños. Content Reel te permite añadir fácilmente: cadenas de texto, iconos y avatares.

Es uno de los plugins de Figma con más descargas, lo ha creado Microsoft Design.

Descargar plugin Content Reel

Lorem ipsum

lorem ipsum

Todos los diseñadores conocemos las virtudes del Lorem ipsum, este plugin te permite generar y añadir párrafos a tus diseños. Es otra herramienta para acelerar ciertos pasos en tu flujo de trabajo.

Debo decir que lo probé pero no lo instalé en mi cuenta principal de Figma porque decidí seguir introduciendo cadenas de Lorem ipsum en cualquier aplicación y sistema utilizando los snippets que he creado en mi cuenta de TextExpander.

Descargar plugin Lorem ipsum

Image Palette

image palette

Con Image Palette podrás generar una paleta de colores a partir de imágenes.

Descargar plugin Image Palette

Autoflow

autoflow

Con Autoflow podrás dibujar el camino que hacen los usuarios (el User journey) cuando utilizan tu proyecto. Conecta objetos con flechas y recorre los pasos de la Persona con este plugin creado por la empresa Coinbase.

Descargar plugin Aufoflow

Language Tester

traducir textos en figma

Mi compañera Isabel recomendó en nuestro canal de Slack este plugin para probar textos en varios idiomas. Para quienes trabajamos en proyectos multi-idioma es una herramienta indispensable. Aunque el copy final lo preparan otros compañeros con este plugin podemos probar el comportamiento de los textos dentro de botones, modales y demás contenedores.

Funciona de la siguiente manera, seleccionamos las capas de texto que queremos traducir y elegimos el idioma en el modal que lanza el plugin, así lo hacemos con todos los idiomas que necesitamos testear. Cuando terminamos la prueba pulsamos el botón para volver al idioma original.

Descargar plugin Language Tester

Font Scale

font scale

Este plugin es perfecto para trabajar con diseños nuevos o con aquellos que necesitan una revisión total comenzando por sus bases. Font Scale te ayudará a generar una estructura consistente y armoniosa en la tipografía.

Descargar plugin Font Scale

Material Design Icons (Community)

plugin iconos figma

Utilizo este plugin siempre que necesito usar iconos de Material Design en mis proyectos o especialmente en los diseños y componentes que publico en mi perfil de Community. A diferencia de otros plugins no requiere ningún tipo de registro, lo ejecutas y automáticamente puedes buscar e incrustar más de 4000 iconos en el canvas de Figma en formato vectorial.

La última actualización tiene algún tiempo, pero en ningún momento me ha dado error alguno.

Descargar plugin Material Design Icons (Community)

Cómo buscar plugins de Figma

Como diseñadores UX / UI que somos siempre buscamos la última información sobre metodologías y herramientas en blogs, redes sociales, grupos de Telegram o WhatsApp y otras publicaciones. Esta dinámica de por sí nos ayudará a conocer los últimos plugins de Figma.

figma community
Repositorio oficial de plugins de Figma

La comunidad de Figma

Además siempre podemos aterrizar en Figma Community, el repositorio de plugins oficial de Figma.

Para entrar en el repositorio podemos utilizar:

  • El menú principal del sitio web de Figma (“Features > Plugins”).
  • El ítem “Plugins” presente en nuestro perfil de usuario.
  • La ruta “Plugins > Manage Plugins…” dentro de la herramienta, tanto en la versión web como en la de escritorio.
  • O desde el menú conceptual dentro de la aplicación activado con el botón derecho del ratón.

Hagamos ahora un recorrido por la landing del directorio.

Plugins destacados

Lo primero que encontramos es un grid con 9 elementos: 8 plugins y un botón para explorar todos los plugins del repositorio. Los plugins del grid se presentan con icono, nombre, descripción y avatar del desarrollador.

Los más utilizados

Luego encontramos un listado de los 10 plugins más populares. Desconozco cómo lo calculan, imagino que tomarán en cuenta el nº de descargas, las instalaciones, los likes, el feedback de los usuarios, etc.

Plugins instalados

Si tenemos plugins instalados los veremos en un apartado formado por una pequeña.

Entrar en la comunidad

También vemos una leyenda que nos indica que estamos en la Comunidad de Figma y que nos invita a participar en la misma. Es interesante, en pocas palabras nos deja claro que podemos unirnos para crear, publicar, duplicar y remezclar nuestros plugins.

Documentación para desarrolladores

Por último vemos un enlace para que los desarrolladores obtengan información, pasos, requisitos, guías y buenas prácticas para publicar sus plugins.

Por cierto, ¿te interesa saber cuál es el procedimiento para publicar un plugin en el directorio oficial de Figma? Avísame si te gusta la idea para poder dedicarle un artículo.

Todos los plugins de Figma

Si en la landing de la comunidad pulsamos el botón para explorar entramos en una lista con todos los plugins de Figma, realmente impresionante, son muchísimos.

Para no perdernos en ella podremos ordenar los plugins por nombre, creador o desarrollador, fecha de publicación y nº de instalaciones.

Además contamos con un buscador en el que podremos introducir los términos para encontrar el plugin que deseamos probar y eventualmente incorporar en nuestro proceso de diseño.

un plugin de figma
Ficha de un plugin publicado en Figma Community

Ficha de plugin

Vamos a centrarnos en la información que nos ofrece una ficha de plugin en Figma Community.

  • Icono y nombre del plugin
  • Nº de favoritos (indicados con un icono de corazón)
  • Botón para instalar el plugin
  • Nº de descargas
  • Portada de la ficha del plugin (los estilos son diversos pero casi siempre hay capturas de pantalla en las que podemos ver el plugin y/o los resultados que obtendremos al utilizarlo)
  • Descripción (en general todos los plugins cuentan con bastante información)
  • Historial de versiones
  • Nombre y avatar del desarrollador (si los pinchamos veremos un grid con todos sus plugins publicados y más datos para contactarlo)
  • Etiquetas (si pinchamos una etiqueta llegaremos a un nuevo listado de plugins)
  • Compartir (iconos para copiar la URL del plugin y para compartirlo en Twitter y Facebook)
  • Detalles (un pequeño apartado en el que veremos la fecha de la última actualización del plugin y el correo electrónico del desarrollador)
  • Por último, un link bastante discreto para marcar el plugin como inapropiado

En todas las fichas de plugin encontraremos un enlace para unirnos a la Comunidad de Figma, igual al que tenemos en la página principal del repositorio.

Cómo instalar los plugins de Figma

Veamos ahora los pasos para instalar plugins en Figma.

La primera vez que pulsemos el botón Instalar el sistema nos mostrará un modal que nos advierte que los plugins están hechos por terceras partes, es decir, por desarrolladores que no son los de Figma y que al hacerlo aceptamos los riesgos potenciales. También nos dice que en próximas instalaciones no veremos el mensaje.

La instalación es casi instantánea, aparecerá cerca del margen inferior de nuestra pantalla un strip indicando que la instalación se ha realizado correctamente.

A partir de ese momento dentro de la herramienta, cuando despleguemos el ítem Plugins, encontramos el nombre del mismo sobre el ítem Manage Plugins… o entre los plugins que ya teníamos instalados.

Desinstalación

La desinstalación de un plugin es igualmente fácil y rápida. Para eliminarlo sólo tendremos que ir a la ficha del mismo dentro del repositorio y pinchar en el botón “Installed” (el que antes ponía “Install”). Automáticamente aparecerá un aviso indicando que la desinstalación se ha completado.

¿Qué plugin de Figma debes instalar?

Cuando un diseñador UX / UI me pregunta qué plugins debe instalar en su cuenta de Figma lo primero que hago es responder con otra pregunta: ¿para qué utilizas Figma?

Hay dos tipos de usuario bien definidos, los que están conociendo y probando la herramienta y los que ya la utilizan a diario en sus proyectos.

Los primeros crean una cuenta y la prueban. Son los que instalan un plugin, le dedican un rato y saltan al siguiente. A estos los dejaré de lado por el momento, todavía les queda un tiempo de approach.

Con mi punto de vista y experiencia quiero responder ahora la pregunta ¿qué plugin de Figma debo instalar? a las personas que ya tienen a Figma entre sus aplicaciones principales.

Yo instalo en Figma únicamente los plugins que voy a utilizar. Es una práctica que desde siempre aplico en otras herramientas de diseño UX / UI como Sketch o en navegadores como Google Chrome o Mozilla Firefox. Procuro siempre no caer en el “síndrome de Diógenes digital”.

Una vez al mes dedico unas horas para investigar plugins que fueron llegando a mí a través de vías diferentes. Si alguno me parece interesante y se ajusta a mis necesidades lo instalo en una cuenta de Figma que sólo utilizo para probar plugins.

  • Antes de instalarlo me pregunto si Figma puede hacer de forma nativa aquello que ofrece el plugin, es decir, con sus propias herramientas.
  • También me pregunto si podría hacerlo con herramientas externas a Figma que uso a diario. Algunas veces prefiero utilizar el tiempo y la energía para profundizar mi experiencia y desempeño en ellas.

Cuando he pasado un tiempo considerable haciendo pruebas con el plugin en la cuenta de testing, lo instalo definitivamente en mi cuenta principal de Figma para así utilizarlo en mi workflow.

Llevo el control de todos los plugins que tengo instalados en Figma:

  • Estoy al tanto de las últimas actualizaciones de Figma, muchas veces los nuevos upgrades cuentan con herramientas que “nos obligan” a dejar de lado ciertos plugins que veníamos utilizando.
  • También me pregunto si con los últimos proyectos realizados los he utilizado, alguna vez he descubierto que sólo lo he usado en momentos puntuales o para cierta necesidad no muy común.

Quizás te parezca que soy un poco “extremo” con el uso de los plugins de Figma. En realidad son mis ganas de sacarle jugo a la herramienta las que me llevan a ser muy cuidadoso con este tema.

Realmente me gustaría conocer tu punto de vista o experiencia y saber cuáles son tus plugins de Figma favoritos. Si quieres aportar valor a este artículo estás invitado y estás invitada a hacerlo.

Para terminar, aquí debajo te dejo unos enlaces con más información:

  • Figma en español, canal de Telegram.
  • Figma Community, el repositorio oficial de plugins de Figma.
  • UXCollective, los 15 mejores plugins de Figma (hasta ahora).

Referentes

También podremos encontrar los mejores plugins siguiendo las publicaciones de profesionales referentes del UX /UI que han decidido trabajar con Figma.

  • FigmaPlugins: es una cuenta de Twitter administrada por Ahmad Al Haddad y Dean Rie. Ellos destacan los mejores y más recientes plugins de la herramienta.
  • Miguel Cardona: diseñador y educador de Figma.
  • Jesse Showalter: en su canal de YouTube y en sus redes habla sobre Figma y otras aplicaciones como Sketch o Adobe XD.
  • Punit Chawla: también en YouTube este diseñador UX / UI habla sobre los plugins de Figma.
  • Cris Busquets: esta experta en experiencia de usuario utiliza Figma en algunos de sus proyectos.

Sigue con atención el artículo, porque la lista de referentes también seguirá creciendo.

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 avatarAmalia dice

    5 septiembre, 2022 a las 8:22

    Muy interesante este artículo! Gracias! Me lo anoto todo :)

    Responder
    • juanpolJuanpol dice

      5 septiembre, 2022 a las 8:29

      Bienvenida Amalia y gracias por dejar tu comentario.

      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.