Crear variables de sombra en Figma: elevación reutilizable

Para crear variables de sombra en Figma, utiliza variables numéricas en los campos de efecto compatibles y una variable de color para la sombra. Vincúlalas a una sombra paralela y guarda el tratamiento completo como estilo de efecto. Comprueba después la elevación sobre las superficies donde se utilizará.

La guía desarrolla una tarjeta elevada ficticia para un espacio de trabajo. Los nombres, valores, casos de aceptación y procedimiento de revisión son propuestas de diseño, no una escala oficial de Figma ni un contrato de tokens existente en EmviUI. Buscamos una sombra que otra persona pueda inspeccionar, reutilizar y modificar con una explicación clara.

Separa los valores de la receta de sombra

Un tratamiento de elevación reutilizable tiene dos responsabilidades: almacenar valores individuales y mantenerlos reunidos en el efecto previsto. Evita empezar por una variable llamada «sombra de tarjeta» esperando que contenga una pila completa de efectos. Identifica primero los campos necesarios y después da un nombre al tratamiento compuesto según su función dentro de la interfaz.

Figma permite vincular números y colores a propiedades de efectos, mientras que los estilos de efecto guardan tratamientos reutilizables. Consulta las instrucciones para aplicar variables y la guía para crear estilos para comprobar los controles disponibles. Recomendamos usar los nombres de variables como una lista verificable de piezas y el estilo como receta reutilizable.

En este ejemplo, la lista contiene elevation/card/x, elevation/card/y, elevation/card/blur, elevation/card/spread y elevation/card/color. La receta se llama Elevation/Card. Son nombres propuestos. Conserva la convención de tu biblioteca si ya expresa la misma relación: cambiar foundations ajenas a esta tarea añade trabajo que no mejora por sí mismo la primera muestra de sombra.

Para entender la distinción general entre valores y tratamientos reutilizables, consulta variables frente a estilos en Figma. Aquí el resultado es más concreto: una receta de sombra rastreable, con sus campos exactos y una superficie donde el equipo haya comprobado que funciona para el propósito acordado.

Construye una muestra de elevación verificable

Dibuja una tarjeta sobre un marco de superficie mayor y deja espacio alrededor para inspeccionar sus cuatro bordes. Mantén fijos dimensiones, radio de esquina, relleno y contorno durante el primer experimento. Si cambias también la superficie o la geometría, la sombra puede parecer mejor sin que puedas explicar cuál de los ajustes produjo esa diferencia visual.

Utiliza una receta inicial pequeña: X 0, Y 4, desenfoque 12, expansión 0 y negro al 12% de alfa. Son valores de prueba, no un umbral de accesibilidad ni una elevación universal recomendada. Escríbelos junto a la muestra e inspecciona la tarjeta al tamaño de uso previsto antes de decidir si encajan en la interfaz.

Crea otra tarjeta con idénticos relleno y contorno, pero sin sombra. Así la revisión tiene una pregunta útil: ¿el tratamiento elevado comunica mejor la agrupación o la relación entre capas? Responde dentro de la página real. Una sombra atractiva sobre un lienzo gris aislado puede añadir ruido a una lista con muchos elementos próximos.

Anota la función: «resumen elevado del espacio de trabajo dentro de la página», junto con los usos excluidos. En nuestro ejemplo, menús y diálogos necesitan su propia revisión; no reciben automáticamente la receta de tarjeta por ser también rectángulos. Esta nota evita convertir la primera muestra que funciona en un efecto aplicado por defecto a todo el producto.

Haz repetible la comparación con una etiqueta breve: «Tarjeta de trabajo, superficie clara de página, contorno habitual, contenido normal». Añade fecha e iniciales de la persona revisora a la nota. Si después alguien propone un desenfoque de 16 en lugar de 12, duplica esta misma muestra y cambia solo ese campo. Compara borde inferior, separación respecto al vecino y jerarquía general. Conserva la opción descartada hasta registrar la decisión, para que la conversación tenga una referencia visible.

Prueba también la tarjeta cerca del borde del contenedor previsto. Si el marco recorta el efecto, registra primero un problema de contenedor, antes de intensificar la sombra. Aumentar el desenfoque puede hacer más evidente el recorte sin resolver su causa. Aleja una vez la muestra del borde para aislar el problema; decide después si debe cambiar el contenedor o el tratamiento dentro de la composición real.

Vincula variables y guarda el estilo de efecto

Abre Variables desde la navegación actual y crea la colección o grupo del experimento. Añade las entradas numéricas y de color, sus valores y descripciones breves. La documentación de gestión de variables explica creación y ámbitos. Si restringes las variables a efectos, comprueba que las entradas previstas sigan disponibles en los campos donde necesitas aplicarlas.

Selecciona la muestra y añade una sombra paralela. Abre sus ajustes, vincula cada campo numérico compatible a su variable y vincula el color desde la pestaña Libraries del selector. Utiliza el selector documentado en lugar de copiar manualmente un valor resuelto. Que dos valores se vean iguales no demuestra que exista un vínculo que continúe respondiendo a cambios.

Modifica temporalmente solo la variable Y, de 4 a 8 en este ejemplo, e inspecciona la muestra. Restablece después 4. Repite un cambio controlado con el color. Es una comprobación propuesta del vínculo: el resultado debe seguir el origen previsto y volver a la receta acordada. Si no responde, inspecciona la capa seleccionada antes de rehacer la colección.

Guarda el tratamiento como estilo de efecto Elevation/Card y aplícalo a un duplicado nuevo. Inspecciona el efecto y los vínculos del duplicado; repite después la prueba temporal. Tener un segundo consumidor permite detectar una muestra bien configurada cuyo estilo guardado, o cuya capa consumidora, todavía conserva una definición anterior o un tratamiento diferente.

Prueba la elevación sobre sus superficies reales

Coloca la misma tarjeta sobre cada superficie donde aparecerá. Si el producto tiene temas claro y oscuro, revísalos juntos. La documentación de modos de variables explica los valores alternativos de las colecciones. Recomendamos cambiar solo los campos cuya apariencia deba variar, en lugar de duplicar todos los valores de sombra sin una razón visual concreta.

Una superficie oscura puede necesitar otra combinación de relleno, contorno y sombra. Aumentar únicamente la opacidad no es un método de diseño fiable. Mantén constantes contenido y geometría al comparar límites y capas. Documenta por separado el contorno cuando contribuya a distinguir la tarjeta: esa decisión no queda incluida implícitamente en la receta de sombra.

No describas una sombra como indicador de foco accesible solo porque puedas verla. La explicación de contraste no textual de WAI trata la información visual significativa de controles y estados, incluido el requisito pertinente de 3:1 y sus excepciones. Determina qué señal comunica esa información y evalúala en contexto. La elevación decorativa no sustituye una revisión del foco de teclado.

Prepara una ficha de aceptación con una fila por superficie y estado previstos. Incluye contenido normal, foco de teclado cuando proceda y otro componente elevado cercano. Comprueba si la jerarquía sigue clara sin que todas las tarjetas compitan. Son recomendaciones de revisión: una captura no demuestra que el control implementado tenga semántica adecuada ni funcionamiento correcto mediante teclado.

Aplica la receta a una tarjeta real de EmviUI

La muestra real de tarjetas procede del banco de contenido de EmviUI. Sus tarjetas blancas repetidas y sombras inferiores suaves permiten hablar de elevación coherente entre componentes vecinos. El sitio de EmviUI presenta componentes editables para Figma. Elige una tarjeta como referencia visual e inspecciona después el diseño editable antes de decidir qué campos deben compartir tu receta.

La imagen incluye nombres de productos, descripciones e importes de muestra. Son contenido de ejemplo, no ofertas ni precios actuales verificados. Tampoco revela vínculos de variables, nombres de estilos ni parámetros exactos de sombra. La receta propuesta 0/4/12/0 es independiente de la captura; no atribuyas esos valores a EmviUI a partir de los píxeles que aparecen en ella.

Elige el límite de una tarjeta, retira temporalmente su sombra en tu diseño de trabajo y compara la agrupación con el tratamiento original. Aplica después tu receta revisada a otra tarjeta con distinta longitud de contenido. Comprueba que la elevación compartida siga siendo coherente sin ocultar un problema de composición provocado por alturas desiguales o un contenedor que recorta.

Si el equipo adopta la muestra, registra qué tratamiento visual conservó, qué valores cambió y qué componente consume Elevation/Card. Para problemas ajenos de origen o actualización del componente, utiliza la guía de diagnóstico del origen y actualizaciones. Mantén esa reparación separada de la decisión sobre el aspecto que debe tener la sombra.

Traduce la receta a CSS y revisa los cambios

La referencia box-shadow de MDN documenta desplazamientos, desenfoque, expansión, color y sombras separadas por comas. Traduce la receta revisada de forma deliberada. El CSS siguiente explicita unidades y alfa. Es una muestra de entrega, no una exportación del archivo Figma ni una garantía de que números iguales produzcan píxeles idénticos en cualquier entorno.

Guarda un pequeño registro de correspondencias: estilo de efecto Figma, variables vinculadas, propiedad personalizada CSS y selector consumidor. Si después la receta incorpora dos sombras, registra sus dos entradas ordenadas; evita reducirlas a un desenfoque sin explicación. Pide al desarrollador comparar la tarjeta implementada sobre la superficie real, a la escala prevista y con el contorno acordado.

Revisa cada cambio con muestras anterior y posterior y una razón concreta. «Reducir la sensación de tarjetas flotantes en un espacio denso» ayuda más que «mejorar las sombras». Incluye un segundo consumidor. Un cambio global que resuelve la primera tarjeta puede dar demasiado protagonismo a un panel compacto vecino, aunque las variables funcionen exactamente según la configuración.

Conserva el registro junto a la versión de biblioteca o nota de entrega. Para organizar exportaciones y versiones completas, continúa con la guía del pipeline de tokens de Figma a código. Esta tarea termina cuando un consumidor nuevo sigue la receta, se han revisado las superficies previstas y existe una correspondencia CSS explícita.

:root {
  --elevation-card: 0px 4px 12px 0px rgb(0 0 0 / 12%);
}
.workspace-card {
  box-shadow: var(--elevation-card);
}

Realiza un ejercicio breve de aceptación

Entrega a otra persona una tarjeta nueva, el nombre de receta y la ficha de revisión, sin indicarle los números individuales. Pídele aplicar el estilo, identificar la variable Y y demostrar un cambio reversible. Un ejercicio correcto reproduce el tratamiento mediante la definición compartida, en lugar de reconstruir una sombra local que simplemente se parece a la referencia visual.

Introduce después un defecto deliberado en una copia desechable: sustituye el vínculo del color por un color literal. Pide cambiar la variable de origen e identificar qué consumidor deja de responder. Restaura el vínculo y repite la comprobación. Hazlo fuera de la biblioteca publicada; es una prueba controlada para saber si la documentación permite diagnosticar el problema.

Por último, repite la comparación de superficies tras la entrega CSS. Registra receta elegida, diferencia observada y corrección, si procede. Detente cuando pasen los casos acordados. Más niveles de sombra, colecciones y alias son útiles cuando un consumidor real los necesita; una receta clara y revisada aporta más como primer resultado que un catálogo completo sin comprobar.