Figma lanzó muchas funciones nuevas e impresionantes durante Config 2023 y se introdujo un nuevo modo de desarrollo. El modo de desarrollo está repleto de funcionalidades impresionantes, como un área de juegos de propiedades, historial de versiones y la capacidad de designar secciones como listas para el desarrollo. Sin embargo, a pesar de su inmenso valor para cerrar la brecha entre diseño y desarrollo, una característica no ha generado mucho revuelo: la tan esperada capacidad de convertir unidades. Finalmente, podemos diseñar usando píxeles (px) y realizar una transición perfecta a CSS con unidades rem para inspección. En este artículo, aprenderemos cómo cambiar de unidad y, lo más importante, descubriremos por qué es una adición indispensable para crear sitios web y aplicaciones web accesibles.
¡Fácil como un pastel! En el lado derecho de la ventana, verá un interruptor que le permite cambiar entre el modo de diseño y el modo de desarrollo. Actívelo, haga clic en el área del lienzo gris para ver la configuración general y verá un menú desplegable. Desde allí, puedes cambiar fácilmente de px a rem. Incluso puedes elegir otras unidades si lo deseas (hablaremos de esto más adelante).
Al inspeccionar el diseño, todo lo que esté configurado en px se convertirá automáticamente a rem, asumiendo un tamaño de fuente raíz de 16 px. Si encuentra otra unidad, como %, agregará el valor rem como comentario. ¡Eso es todo!
Seguimos diseñando con px en Figma, pero los desarrolladores pueden cambiar a rem cuando quieran.
Una unidad rem, abreviatura de “root em”, es una unidad de medida CSS que representa el tamaño de fuente en relación con el elemento raíz (normalmente la etiqueta ) de una página web.
1rem = la configuración actual del tamaño de fuente raíz