Cómo comparar un diseño de Figma con la página web
La página casi siempre sale parecida al Figma, pero no igual: 4 px más de espacio aquí, otro peso de letra allá. Así se encuentran esas diferencias sin medir a mano.
Qué se escapa al revisar a ojo
Las diferencias que más se escapan son las chicas y repetidas: un espaciado que cambió en un componente y se repite en diez pantallas, un gris que no es el del sistema de diseño o un interlineado distinto. Una por una no se notan; juntas hacen que el producto se vea descuidado.
- Espaciado: padding, gap y la posición de cada elemento
- Tipografía: familia, tamaño, peso e interlineado
- Color del texto, del fondo y de los bordes
- Tamaños, radios, sombras y opacidad
- Elementos que están en Figma y faltan en la página
Tres formas de comparar
Superponer sirve para ver de un vistazo si algo se movió. Para saber qué cambiar en el código hace falta el valor: «el título mide 44 px y en Figma 48».
| Forma | Cómo funciona | Qué te da |
|---|---|---|
| A ojo, lado a lado | Abres el Figma y la página en dos ventanas | Lo grande; lo chico se escapa y depende de quién mira |
| Superpuesto | Un plugin o una extensión pone el Figma encima de la página con transparencia | Ves dónde no calzan, pero tienes que adivinar cuánto y por qué |
| Valor por valor | Una herramienta empareja cada capa de Figma con su elemento en la página y compara sus medidas | Una lista con el valor de Figma y el de la página, lista para el ticket |
Paso a paso con Pixel Perfect
- Pega el link del frame. En Figma, clic derecho sobre el frame › Copy link to selection. Si el frame tiene versiones tablet y móvil, las encuentra solo.
- Escribe la dirección de la página. Sirve localhost, staging o producción. Si pide usuario y contraseña, inicias sesión dentro de la app.
- Compara. Captura la página al ancho exacto del frame y mide cada elemento. Una página de 8294 px de alto tarda unos 12 segundos.
- Revisa y reporta. Las diferencias llegan ordenadas: primero las que se ven. Marcas las que importan y creas el ticket de Jira con los recortes, o copias el texto para Slack.
Consejos para que la comparación sea justa
- Compara al mismo ancho que el frame: una página de 1440 px contra un frame de 1600 siempre va a dar diferencias falsas.
- Usa el mismo estado: la misma sesión, los mismos datos y las fuentes ya cargadas.
- Define cuánto es «igual»: un margen de ±1 px para medidas y un umbral de color (delta E) evita ruido por redondeos.
- Separa lo que viene del componente de lo que viene de la pantalla: lo primero se arregla una vez en la librería.
Qué hacer con las diferencias
Empieza por las que cualquiera nota. Las menores van en otra tanda. Si una diferencia viene del componente compartido, arréglala ahí y vuelve a comparar: la misma corrección suele cerrar varias diferencias a la vez. Volver a comparar te muestra qué se resolvió y qué es nuevo.