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.
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.
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
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?
Storyset
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.
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
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.
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.
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.
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
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
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.
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.
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.
Image Palette
Con Image Palette podrás generar una paleta de colores a partir de imágenes.
Descargar plugin Image Palette
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.
Language Tester
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
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.
Material Design Icons (Community)
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.
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.
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.
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.
Muy interesante este artículo! Gracias! Me lo anoto todo :)
Bienvenida Amalia y gracias por dejar tu comentario.