Extensiones de Google Chrome para diseñadores UX/UI que querrás probar

Marta Sánchez Cavadas
5 min readMar 4, 2021

--

…si aún no lo has hecho (2ª Parte)

Hace unos meses compartía por aquí una selección de diez extensiones de Google Chrome con las que aumentar la productividad y llevar a cabo algunas tareas de manera más rápida y sencilla. Pero sobre todo, sin necesidad de instalar o descargar más herramientas, ni completar registros o subscripciones.

En esta segunda parte, gracias a la buena acogida que tuvo la primera, compartiré algunas extensiones que he ido conociendo y que me han parecido muy interesantes.

1. HTML to Figma

Esta extensión nos permite importar la página web que queramos a un archivo de Figma con capas editables. Pudiendo, además, convertir los elementos de manera rápida en componentes. Simplemente pinchando en la extensión podrás descargar un archivo json para abrir en tu Figma (con el plugin que recibe el mismo nombre) y empezar a trabajar.

Html to Figma

2. Vis Bug

VisBug lo permite prácticamente todo: inspeccionar estilos de cualquier página, editar y hacer cambios de diseño y contenido, remplazar imágenes, mover elementos, comprobar accesibilidad y diseño responsive, modificar tamaños, interlineados, alineaciones, padding, etc. En fin, una maravilla…

Pero es que, además de modificar una página directamente desde el navegador, si lo juntamos con la extensión HTML to Figma y su plugin, que ya hemos comentado, podrás llevarte el archivo con tus modificaciones a Figma.

Os dejo por aquí el video de Raúl Marín donde descubrí estas extensiones y donde te lo explica a la perfección.

3. Editor de imágenes — iLoveIMG

Esta extensión es un básico si vas a trabajar con imágenes, ya que te da todas las opciones: Descarga en lote, exportar imágenes, comprimir, capturar pantalla, redimensionar, cambiar de formato, ediciones rápidas de foto para añadir texto, filtros, hacer memes, etc. Así como, conversor HTML para convertir páginas web a JPG o SVG manteniendo su aspecto visual.

Editor de imágenes — iLoveIMG

4. Over Zoom+

Se trata de una extensión muy sencilla y útil. Una vez instalada podrás hacer zoom en imágenes y vídeos por los que pases el cursor del ratón sin tener que acceder a ellos. Coloca el ratón sobre cualquier imagen en cualquiera de los sitios soportados y la extensión lo ampliará automáticamente a su tamaño original. De este modo te evitarás hacer clic o tener que entrar en ellos para verlos a tamaño completo.

5. Loom

Loom es una extensión que nos permite grabar y compartir la pantalla de nuestro ordenador, así como la cámara de una forma muy sencilla. Podemos compartir solo el navegador, todo el escritorio o solamente nuestra cámara. Además, si elegimos compartir el escritorio podemos decidir qué aplicación queremos enseñar.

También debemos destacar que está integrado con Gmail, de manera que cuanto terminemos la grabación podemos adjuntar el vídeo en el email que estábamos redactando.

Loom

6. Save to Pocket

Esta extensión es la forma más fácil y rápida de guardar artículos, vídeos y cualquier cosa que puedas encontrar en internet. A través de su atajo en el navegador podrás almacenar y organizar con etiquetas las páginas de tu interés para después poder verlas en cualquier dispositivo donde tengas instalada la extensión o su aplicación.

Pocket

7. Notion Web Clipper

La extensión de Notion para Chrome es parecida a otras como Save to Pocket y te permite guardar cualquier página que visites en tu Notion. De este modo podrás archivar y ordenar artículos de tu interés, inspiración, investigación, etc. sin perder tiempo.

Además, puedes organizarlas en distintas carpetas, proyectos o etiquetas, así como compartirlas o añadir comentarios.

8. Lighthouse

Lighthouse es una herramienta automatizada de código abierto para mejorar el rendimiento y la calidad de aplicaciones web. Analiza el rendimiento, la accesibilidad, las buenas prácticas y el SEO, para después facilitarte un informe con los errores y sus indicaciones para solucionarlos.

Informe Lighthouse

9. Análisis SEO y evaluación de sitios web de WooRank

Esta extensión puede parecer, a priori, más relacionada con el marketing digital, pero nada mas lejos de la realidad. Con Análisis SEO y evaluación de sitios web de WooRank conseguimos una evaluación detalladísima del tráfico de datos de un sitio web para tener una visión completa de la optimización del sitio.

Divide su análisis en elementos correctos, a mejorar y errores, para que puedas filtrar y localizar fácilmente. Además, subdivide en categorías como Contenido (etiquetas de título, meta descripción, encabezados, enlaces en página, atributos…); Indexación (Urls, robots.txt, sitemap, enlaces rotos…); Móvil (optimización móvil, visualización, pantalla táctil…); Datos estructurados, seguridad, tecnologías utilizadas, así como Backlinks, tráfico del sitio, Google Analytics y Redes sociales.

En el último proyecto que he estado trabajando, me propuse el reto de prestar especial atención a todo lo que afecta a su posicionamiento y buen funcionamiento. Gracias a esta herramienta pude detectar errores que de otro modo no habría conseguido y, por supuesto, aprender cómo todo afecta al rendimiento y como consecuencia, a la buena experiencia de los usuarios.

Análisis SEO y evaluación de sitios web de WooRank

Como siempre, gracias por leerme 😉 Espero que te sean tan útiles como a mí 👌🏼 Si echas de menos alguna extensión no dudes en compartirlo a través de comentarios 👇🏼 Y si todo va bien, nos vemos en una tercera parte ¡Espero tus sugerencias!

--

--

No responses yet