Squints

Herramientas de diseño directamente sobre cualquier web en vivo

Sobre Squints

Squints te permite inspeccionar y trabajar sobre cualquier página web en tiempo real. Mide espaciados, traza guías, superpón grillas de columnas, captura colores en cualquier formato, identifica tipografías renderizadas y controla animaciones a tu ritmo. Totalmente gratis, sin registro ni rastreo.

¿Qué es Squints?

Squints es una extensión gratuita para Chrome que añade un conjunto de herramientas de diseño sobre cualquier página web en funcionamiento. En lugar de revisar espaciados, tipografías o colores en un archivo de diseño, permite inspeccionarlos directamente en el navegador, donde hoy se toman muchas de esas decisiones.

Al activarla sobre una web, puedes seleccionar elementos para ver sus dimensiones y la distancia hasta el elemento siguiente, sacar reglas y guías que se ajustan solas, superponer una grilla de columnas que se recuerda por sitio, y dibujar flechas, cajas o notas sobre la propia página. También incluye un selector de color que devuelve el valor en distintos formatos junto al token asociado, identificación de la fuente realmente renderizada con sus métricas, y control de velocidad para reproducir animaciones a una décima parte de su ritmo.

El resultado del trabajo se puede guardar como captura de pantalla o grabación, con las marcas visibles o sin ellas. Está desarrollada por Andreas Katzmann y se presenta como una herramienta pensada para perfiles de design engineering.

Características principales de Squints

Inspección de elementos con lectura de su caja y del espacio hasta el elemento contiguo.
Reglas y guías arrastrables con ajuste automático, en la línea de las de Figma.
Grilla de columnas superpuesta sobre la página real, que se recuerda para cada sitio.
Anotación directa sobre la web con flechas, cajas y notas.
Selector de color que devuelve cualquier formato y el token que hay detrás, e identificación de la tipografía efectivamente renderizada con sus métricas.
Reducción de la velocidad de las animaciones hasta una décima parte y captura del resultado en imagen o vídeo, con o sin marcas.

¿Para quién es Squints?

Está orientada a personas que trabajan en la frontera entre diseño e implementación: design engineers, diseñadores de producto que revisan cómo queda su trabajo en el navegador, desarrolladores front-end que ajustan espaciados y tipografías, y cualquiera que necesite documentar o auditar la interfaz de una web en vivo.

Casos de uso

Comprobar si la implementación de una interfaz respeta los espaciados y tamaños definidos en el diseño.
Superponer una grilla de columnas sobre una página en producción para verificar la alineación del layout.
Extraer el color exacto y el token asociado, o averiguar qué tipografía se está renderizando realmente en un sitio.
Ralentizar una animación para estudiarla con calma y grabarla con anotaciones para compartir el feedback con el equipo.

Precio de Squints

Squints es gratuita y se instala como extensión de Chrome. Según su web, no requiere registro ni realiza seguimiento.

¿Squints está disponible en español?

Sin confirmarLa web está en inglés y no enlaza una versión en español; no hay información sobre si la extensión ofrece interfaz en español.

Preguntas frecuentes sobre Squints

¿En qué navegadores funciona?: Se distribuye como extensión de Chrome y se instala desde el propio sitio mediante la opción de añadirla al navegador.
¿Hay que crear una cuenta para usarla?: No: es gratuita y no requiere registro ni incluye rastreo de uso.
¿Sirve para revisar animaciones?: Sí, permite reproducir cualquier animación hasta a una décima parte de su velocidad y capturar el resultado en captura o grabación.