De box-shadow en CSS a un efecto en Figma: el mapa propiedad por propiedad

Respuesta directa a la pregunta

Un box-shadow de CSS y un efecto Drop Shadow o Inner Shadow de Figma describen la misma sombra. Los mismos cinco valores: un desplazamiento en X, un desplazamiento en Y, una cantidad de desenfoque, una cantidad de expansión y un color, solo que con nombres de campo distintos. Una palabra clave de CSS no tiene su propio campo en Figma: inset. En su lugar, se traduce en elegir un tipo de efecto distinto.

Este es un artículo de referencia, así que recorre el mapa de propiedades más abajo y vuelve para ver los dos puntos donde el mapeo realmente falla: la restricción de spread en Figma y qué ocurre con una sombra en una capa de texto.

La sintaxis de box-shadow, campo por campo

CSS define box-shadow como una lista de sombras separadas por comas, cada una formada por hasta seis partes: offset-x, offset-y, un blur-radius opcional, un spread-radius opcional, un color opcional y una palabra clave inset opcional. La referencia de box-shadow de MDN presenta las partes obligatorias y opcionales de esta manera, y la especificación de fondos y bordes de CSS del W3C es la fuente formal del mismo modelo de seis partes.

Solo offset-x y offset-y son obligatorios. Si omites blur-radius, su valor predeterminado es 0: una sombra de borde duro sin difuminado. Si omites spread-radius, también su valor predeterminado es 0, así que la caja de la sombra coincide exactamente con la caja del elemento. Si omites color, la sombra hereda el valor de color del propio elemento, que rara vez es lo que quieres, así que defínelo de forma explícita.

Una sombra típica de tarjeta se ve así:

box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);

Eso es offset-x: 0, offset-y: 4px, blur-radius: 12px, spread-radius: 0, y un relleno negro al 15% de opacidad. Un campo de entrada hundido, en cambio, añade la palabra clave inset:

box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.2);

Los mismos cinco valores, pero ahora la sombra se pinta dentro de la caja en lugar de fuera de ella.

box-shadow acepta una lista separada por comas, así que una sola propiedad puede contener varias sombras apiladas una sobre otra. Un patrón común combina una sombra ajustada y oscura para dar definición con una sombra suave y tenue para dar profundidad ambiental:

box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 8px 24px 0 rgba(0, 0, 0, 0.1);

La primera sombra de la lista se renderiza arriba, la última se renderiza al fondo, y cada sombra de la lista es, por lo demás, totalmente independiente: sus propios desplazamientos, su propio desenfoque, su propia expansión, su propio color.

Qué contiene realmente un efecto de sombra en Figma

El panel de efectos de Figma le da a un efecto Drop Shadow o Inner Shadow cinco campos ajustables: X, Y, Blur, Spread y Fill. El propio artículo del centro de ayuda de Figma sobre cómo aplicar efectos describe X e Y juntos como los que definen la dirección de la fuente de luz, Blur como el control de qué tan suave o nítido es el borde de la sombra, Spread como el ajuste de cuán grande se ve la sombra respecto a la capa, y Fill como la pintura y la opacidad aplicadas a la propia sombra.

Ese mismo artículo afirma claramente que ambos efectos de sombra se traducen a la propiedad box-shadow en CSS. Vale la pena recordar una excepción: un efecto de sombra en una capa de texto se traduce a text-shadow, no a box-shadow, aunque el panel de efectos que usas para configurarlo se vea idéntico en ambos casos.

Inner Shadow se comporta igual que Drop Shadow en todos los campos, pero pinta dentro del límite de la capa en lugar de fuera de él. Los diseñadores lo usan en un panel hundido o en el estado de un botón presionado.

Toma la sombra de tarjeta de la sección anterior, 0 4px 12px 0 rgba(0, 0, 0, 0.15). En una capa de Figma eso se convierte en un efecto Drop Shadow con X en 0, Y en 4, Blur en 12, Spread en 0 y Fill en negro al 15% de opacidad. Cada número pasa directamente; solo cambian los nombres de los campos.

El mapa de propiedades, lado a lado

Al comparar uno con otro, los campos coinciden casi uno a uno:

La última fila es la que más se pasa por alto. No hay una casilla de inset junto a Blur y Spread. La elección se hace una sola vez, en la parte superior del efecto, al decidir cuál de los dos tipos de efecto añades a la capa.

Dónde falla el mapeo

Spread tiene una restricción de forma en Figma que CSS no tiene

El spread-radius de CSS funciona en cualquier caja: un div, un button, una etiqueta a, cualquier cosa con modelo de caja. El campo Spread de Figma es más limitado. Solo afecta a rectángulos, elipses, frames y componentes, e incluso en esos casos requiere que el recorte de contenido (clip content) esté activado con la opacidad de relleno de la capa en 1% o más. Una sombra que se ve correctamente en el navegador puede llegar más plana a Figma si la capa de origen no cumple esa condición, así que conviene revisar los valores de spread en cualquier elemento importado de un tipo poco común.

En la práctica eso significa que una sombra con spread real, por ejemplo box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5), un patrón común de anillo de foco, necesita que su capa de destino ya sea un rectángulo, una elipse, un frame o un componente con el recorte de contenido activado antes de que el campo Spread haga algo. En un tipo de capa fuera de esa lista, el valor de Spread no tiene dónde aplicarse, y el anillo termina reduciéndose solo a Blur.

Varias sombras mantienen su orden, pero conviene revisarlo

Una lista de box-shadow separada por comas se convierte en una lista apilada de efectos en la misma capa de Figma, en el mismo orden: la primera de la lista queda arriba. Es un mapeo limpio, pero fácil de leer mal visualmente si una sombra con un desplazamiento pequeño queda debajo de una con uno grande. En caso de duda, compara la lista de efectos de arriba a abajo con la declaración de CSS de izquierda a derecha.

Las sombras de texto son una propiedad completamente distinta

Vale la pena repetirlo aparte: una sombra en un nodo de texto se convierte en text-shadow en CSS, nunca en box-shadow, sin importar cómo se vea en el panel de efectos de Figma. Si estás comparando una hoja de estilos con un archivo de Figma y los números no coinciden en una capa de texto, esta suele ser la razón. Trata las sombras de texto como su propio mapeo, no como una variante de este.

Dónde encaja esto en el mapa de propiedades de CSS a Figma

Esto se suma a otras referencias propiedad por propiedad que vale la pena guardar juntas: cómo flexbox de CSS se traduce a auto-layout en Figma, qué sobrevive cuando CSS grid se convierte en capas de Figma, y cómo se ve cada valor de position de CSS en Figma.

UnHTML importa el CSS real de una página en lugar de partir de una captura de pantalla, así que este mapeo de sombras es lo que realmente llega a un archivo de Figma al importar, campo por campo, no una aproximación.

En resumen

Cinco valores de CSS, cinco campos de Figma, y una palabra clave, inset, que se convierte en una elección de tipo de efecto en lugar de un campo propio. Los dos puntos donde esto falla son la restricción de forma de Spread y las capas de texto, que usan text-shadow en lugar de box-shadow sin importar cómo se vea el panel de efectos. Guarda la tabla del mapa de propiedades de arriba. Es la parte que vale la pena volver a consultar.