5 plugins esenciales para diseñar interfaces en Figma

Figma es una plataforma de diseño que se ha posicionado de forma indiscutible en la vida de millones de creadores. Su agradable experiencia de uso, junto a la posibilidad de trabajar de forma colaborativa sin fricciones, ha hecho que sea la primera opción de los diseñadores de productos digitales.

A pesar de competir en un sector poblado por una larga lista de herramientas de diseño colaborativo y prototipado, como InVision, Adobe XD y Sketch, su cuota de mercado no para de crecer; así como tampoco sus ingresos recurrentes anuales.

En este artículo veremos plugins o herramientas que pueden ayudarte a impulsar tu trabajo y ahorrar tiempo. Todas son de fácil instalación y puedes conseguirlas de forma gratuita tanto en la versión web como en la app de escritorio. Spoiler: ninguna utiliza Inteligencia artificial (aún).

Pero primero…

¿Qué es un plugin?‌

Un plugin es una herramienta instalable que ofrece Figma para mejorar y ampliar sus funciones, estas pueden ser creadas de forma nativa por Figma o por los numerosos miembros de la comunidad que hacen aportes diarios según las necesidades que van detectando.

¿Cómo instalar un plugin en Figma?‌‌

Hay distintas formas de instalar un plugin en Figma, pero para responder esta pregunta vamos a ver el caso más ordenado y práctico según mi parecer.

1. Primero, ingresa a Figma desde el navegador o app de escritorio y crea un proyecto, no importa su nombre.
2. Da click derecho en cualquier lugar del documento. Encontrarás los plugins en la ventana emergente.
3. Coloca el cursor encima de Plugins y verás las distintas opciones. Si ya tienes plugins instalados, los verás en lista. En caso de que no, da click en “Buscar más plugins…”
4. Ahora solo toca explorar y conocer todos los aportes de la diversa comunidad de diseño. También puedes instalarlos directamente desde la sección de comunidad que consigues en el inicio o ingresando directamente al link del plugin.

Dicho esto, vamos con la selección:

1. Iconify‌

Si alguna vez diseñaste en Adobe Photoshop o Illustrator, seguro has demorado horas de tu vida buscando los iconos perfectos para tu proyecto por todo internet. Gracias a la función de los plugins, más nunca volverá a pasar. Iconify es una herramienta que recopila colecciones de iconos para que puedas usarlos en tus proyectos de Figma sin necesidad de descargarlos.

Podrás encontrar colecciones relevantes en la industria como los de Material Design, FontAwesome, Iconify y muchos más. Solo debes buscar un icono, darle doble click y automáticamente se añadirá el vector al proyecto.

2. Icons8‌‌

¿Más iconos? Pues sí, pero no solo eso. Icons8 es un plugin que además de ser otra opción para conseguir esos elementos que acompañen tu diseño, contiene un catálogo de imágenes e ilustraciones que hacen que cualquier proyecto cobre vida. Frente a Iconify, se queda corto en cuanto a las colecciones de íconos que ofrece, pero la razón principal por la que debes usarla, es por las más de 100 colecciones de ilustraciones gratuitas que podrás aprovechar para añadir a tus creaciones.

Solo debes instalar el plugin e ir a la sección de ilustraciones. Luego, podrás explorar según la colección que más te interese o por las categorías que se encuentran en lista, como Negocios, Educación, Eventos, Tecnología y más.

3. Unsplash‌‌

Unsplash es reconocido por ser un banco de imágenes gratuitas de buena calidad. Al igual que otros plugins, lo que nos permite tenerlo directamente en Figma es que ahorra muchísimo tiempo y almacenamiento, porque no tienes que descargar una imagen para poder usarla. Simplemente, puedes colocarla directamente en tu diseño y todos felices.

Las imágenes de Unsplash pueden ser utilizadas por los diseñadores para dar más personalidad al producto y acompañar elementos importantes para las interfaces como los banners, las portadas y algunas pantallas donde resaltan. Es una herramienta necesaria para diseñadores de otros campos, como los de redes sociales, ya que puede ser usado fácilmente para posts y otros tipos de piezas.

4. Content Reel‌‌

Microsoft ofrece distintos recursos para el diseño de interfaces con Content Reel. Uno de sus usos más valiosos es la colección de Avatars que contiene, tanto para género femenino como para masculino, y que puedes usar en tus proyectos para darle rostro a los perfiles de usuario que estamos creando en las versiones de alta fidelidad.

Al ser un aporte del equipo de diseño de esta compañía, podrás conseguir una enorme cantidad de iconos nativos de Microsoft listos para ser aprovechados como Fluent Icons e Icons Fabric. Además, ofrece otras piezas como logos genéricos, formatos ejemplares de correo y otros tipos de textos que harán todo el proceso más sencillo.

5. A11y‌‌ Contrast Color Checker

Si hablamos de diseño de experiencias, no hablamos solo de pantallas lindas e ilustraciones que provoca estampar en camisas. Con A11y, que parte del término utilizado para referirse a la “accesibilidad web”, podremos validar si los colores usados en nuestros diseños cumplen con los estándares de accesibilidad del contenido web, conocidas en inglés como WCAG. Nos sirve para validar el contraste entre elementos y estar más seguros de que no habrá problemas de lectura cuando llegue al usuario final.

Para usarlo después de instalarlo, solo debes activar el plugin y seleccionar una capa. En pocos segundos te notificará si hay algún conflicto u oportunidad de mejora para cumplir con los niveles AA y AAA de visibilidad. Sin duda alguna, una buena práctica que nos permite asegurarnos de llegar a muchas más personas.

Bonus: html.to.design

Hasta hace meses podíamos dedicar horas de nuestra vida útil clonando un diseño desde la web hasta tenerlo de una forma perfecta o similar en Figma. Ahora, con html.to.design podemos tener diseños completamente editables extraídos de cualquier página web en segundos.

En su descripción, el autor comenta el tipo de usos para los que puede ser utilizada, entre los que resalta: Usar otro sitio web como inspiración para tus diseños, rediseñar un viejo sitio, comprar una web en desarrollo con los diseños originales, revisar la accesibilidad y mucho más.