Cómo cambiar el color de fondo en Figma

Para cambiar el color de fondo del lienzo en Figma, deselecciona todas las capas, abre la sección Page del panel de propiedades derecho y elige su color. Para cambiar el fondo de una pantalla o tarjeta, selecciona ese frame y modifica su Fill. Si seleccionas una capa de texto, Fill cambia el color de las letras; coloca el texto dentro de un frame si necesitas colorear la superficie detrás. Esta diferencia entre lienzo, frame y relleno de capa resuelve la mayoría de las dudas sobre cómo cambiar el color de fondo en Figma.

El lienzo es el espacio de trabajo que rodea los diseños. Un frame es una pantalla o contenedor delimitado. El relleno de capa pertenece a un objeto seleccionado. En una captura pueden parecer un mismo fondo, pero cada nivel cumple una función, se comparte de manera distinta y afecta a la exportación de otra forma. Decide primero qué superficie quieres cambiar y edita la propiedad correspondiente. En una web o app, define el fondo del frame y revisa el contraste del contenido; cambiar el lienzo suele ser una preferencia del editor, no parte de la interfaz exportada.

Distingue el lienzo del frame y de una capa

Piensa en tres niveles. El lienzo es la superficie de trabajo de la página, detrás de frames, grupos y capas. El frame es un objeto con límites que puede representar una página, una pantalla de dispositivo, un panel o una tarjeta. Una capa, como un rectángulo, un icono o un texto, puede tener uno o varios rellenos. El mismo tono se puede usar en cada nivel, pero cambiar uno no modifica automáticamente los demás.

La diferencia importa al preparar una captura de interfaz. Un lienzo claro puede facilitar la revisión de la composición, pero no significa que el sitio web tenga ese fondo. El relleno de un frame forma parte de sus límites de diseño y se incluye al exportarlo. El relleno del texto colorea las letras, no el espacio que las rodea. La guía oficial de Figma explica que el relleno de capa se aplica al interior de una capa, incluidos frames, formas y texto; el fondo del lienzo se configura aparte, a nivel de página.

Usa el panel Layers como diagnóstico rápido. Si has seleccionado el frame de pantalla principal, edita su Fill. Si has elegido el rectángulo de una tarjeta, cambia la tarjeta. Si no hay selección, el panel derecho puede mostrar las propiedades de la página, incluido el lienzo. Si aparecen propiedades tipográficas, has elegido texto. Una jerarquía ordenada y frames con nombres claros ayudan al equipo, sobre todo en archivos con componentes anidados.

Cambia el color de fondo del lienzo

Para cambiar el fondo del lienzo, sal primero de la selección de objetos: haz clic en una zona vacía o pulsa Escape hasta no tener ninguna capa seleccionada. En el panel de propiedades derecho, busca la sección Page y pulsa la muestra de color del fondo. Elige el tono en el selector o introduce su valor HEX. La guía oficial de Figma indica que el fondo inicial depende del tema claro u oscuro y que las páginas nuevas heredan el color de lienzo de la página actual.

El cambio de página afecta a todas las personas con acceso al archivo, así que considéralo un ajuste compartido del espacio de trabajo, no una preferencia privada. Puede ayudar a revisar ilustraciones claras sobre una superficie oscura, distinguir páginas o presentar el archivo con un tema deliberado. Si solo quieres cambiar temporalmente la apariencia de tu editor, usa el tema claro u oscuro de Figma, en vez de modificar el color compartido de la página.

El fondo del lienzo permite ajustar opacidad u ocultarlo con el control de visibilidad que describe la ayuda de Figma. Esa misma documentación explica que no se puede cambiar mientras está activo Dev Mode. Si no ves la sección Page, comprueba que estás en un archivo de diseño, tienes permiso de edición, no estás en Dev Mode y has deseleccionado todas las capas. No añadas un rectángulo gigante detrás de todos los frames para imitar el lienzo, salvo que el rectángulo forme parte del arte que quieres exportar.

Cambia el fondo de un frame o una pantalla

Selecciona el frame en el lienzo o en el panel Layers y utiliza la sección Fill del panel derecho. Pulsa la muestra para abrir el selector, elige un color sólido e introduce un HEX si necesitas precisión. También puedes añadir otro relleno, ajustar la opacidad, cambiar su orden u ocultarlo. La documentación de frames de Figma incluye Fill entre sus propiedades, junto con esquinas, recorte de contenido, guías, trazos y efectos.

En una maqueta web, normalmente conviene cambiar el frame superior de escritorio o móvil. En una tarjeta, selecciona el propio frame o forma. Los frames anidados pueden tener fondos independientes: una tarjeta blanca sobre una página gris y un campo de entrada con una superficie neutra. Esta estructura se parece a los contenedores y fondos de CSS, pero sigue siendo una representación de diseño; no genera automáticamente CSS de producción ni garantiza que el código use exactamente esos valores.

Si parece que el relleno no cambia, comprueba que has seleccionado un frame y no un grupo. Un grupo no se comporta igual y quizá necesites añadir un rectángulo o frame detrás de sus elementos. También revisa si el relleno está oculto, transparente o cubierto por una capa hija. Un frame con Clip content puede recortar elementos que sobrepasen sus límites, pero el recorte es una propiedad independiente del color de fondo.

Usa una variable o un estilo para las superficies repetidas

Para una prueba puntual basta un valor directo. Para una interfaz de producto con superficies repetidas, aplica una variable o un estilo de color y mantén coherente la misma decisión de diseño. Selecciona el frame o la capa, abre la muestra de Fill y elige la variable o el estilo adecuado en Libraries. La documentación de Figma dice que las variables de color se pueden aplicar a rellenos sólidos, paradas de degradado, trazos y estilos de color. Su guía de variables explica los modos para valores contextuales, como los temas claro y oscuro.

Elige nombres que describan el propósito, como surface/page, surface/card o surface/inverse, en lugar de nombres que solo indiquen el tono, como «azul claro». El nombre semántico explica para qué sirve. En una colección con modos claro y oscuro, una variable de superficie puede ser casi blanca en un modo y un tono neutro profundo en el otro. Aplícala al frame y comprueba ambos modos, incluidos texto, bordes, iconos e indicadores de foco.

Las variables y los estilos resuelven necesidades relacionadas, pero distintas. Una variable almacena un valor reutilizable por modo; un estilo puede agrupar varias propiedades, como rellenos compuestos o un degradado. La guía de Figma sobre sus diferencias explica que los modos pertenecen a las variables y que los estilos pueden conservar propiedades compuestas. Para un tratamiento complejo con varios rellenos o un degradado, el estilo puede representar mejor la composición; usa una variable cuando la decisión central sea un color semántico que necesite modos.

Elige el tipo de relleno según la superficie

Los rellenos de Figma no se limitan a colores planos. La guía oficial enumera sólidos, degradados, patrones, imágenes y vídeos. El relleno sólido suele ser la opción más clara para superficies de página y tarjetas. Un degradado puede aportar profundidad o expresar la marca, pero el texto debe seguir leyéndose en toda la transición. Las imágenes crean una zona visual, pero requieren decidir recorte, punto focal y contraste. Los patrones funcionan mejor cuando no compiten con el contenido.

Se pueden apilar varios rellenos y reordenarlos. Esto permite tintar una imagen o crear un tratamiento por capas, pero también hace menos obvio un cambio sencillo. Despliega la lista Fill y revisa cada entrada. Un relleno puede estar oculto o semitransparente, y el resultado quizá dependa de otra capa o del lienzo. Modifica una propiedad cada vez e inspecciona la pila, en lugar de añadir un relleno nuevo para compensar una interpretación incorrecta del anterior.

Si una capa no tiene relleno, añadirlo desde Fill crea el sólido predeterminado. En el texto, sin embargo, Fill colorea las letras. Para poner un panel detrás, usa un frame con espaciado o coloca el texto encima de una forma independiente. En un sistema de diseño, separa la imagen decorativa, el color de superficie y el color del texto. Así será más fácil revisar el diseño adaptable, el contenido y la accesibilidad.

Comprueba el contraste y la legibilidad

El color de fondo nunca es solo decorativo cuando hay texto o controles encima. Revisa la combinación de primer plano y fondo después de cada cambio, incluidos los estados hover, deshabilitado, seleccionado y oscuro. El selector de color de Figma incluye una comprobación de contraste, según su documentación oficial; úsala como ayuda rápida y evalúa después el tamaño, peso y estados del texto real. Una puntuación de contraste no evalúa por sí sola jerarquía, significado, visibilidad del foco ni si la información depende solo del color.

Comprueba que el texto normal se lea a escala habitual y ampliado. En botones, revisa tanto la etiqueta como el borde o indicador de foco que corresponda. Un color de marca saturado puede funcionar como acento pequeño, pero no como fondo extenso con texto blanco pequeño. Ajusta la superficie, el primer plano o ambos: pertenecer a una paleta de marca no garantiza que el color sea accesible.

Prueba contenido real, no solo títulos de relleno. Los párrafos largos revelan si una superficie suave resulta cansada; las etiquetas traducidas pueden ocupar más líneas, y los rellenos translúcidos cambian de aspecto sobre imágenes distintas. Si usas una variable, comprueba sus otros modos. Si usas una imagen o degradado, inspecciona tanto las zonas claras como las oscuras bajo el texto. Documenta en el sistema de diseño las combinaciones aprobadas para que el equipo no repita la revisión en cada pantalla.

Resuelve los problemas habituales con el fondo

Si ha cambiado todo el espacio de trabajo, pero no el diseño, probablemente has cambiado el lienzo en vez del frame. Selecciona el frame y modifica su Fill. Si solo cambia el texto, editaste su relleno; crea o elige un frame que contenga la superficie. Si el color se ve bien en el lienzo y desaparece en un PNG, confirma que exportas el frame correcto y que el color forma parte de él o de una capa hija visible, no solo de la página.

Si el selector muestra un valor pero la capa parece distinta, revisa opacidad, visibilidad, modo de fusión y orden de capas. Un relleno semitransparente se mezcla con lo que hay debajo. Un modo de fusión cambia el aspecto según el fondo. Una variable puede resolverse de otro modo en un modo diferente o estar vinculada a una biblioteca. Comprueba si la muestra corresponde a un color directo, variable o estilo y revisa su origen antes de sobrescribirla.

Si no puedes editar el color, verifica tus permisos y el modo activo. La guía del lienzo requiere permiso de edición y advierte que no se puede cambiar desde Dev Mode; la guía de rellenos también indica que hace falta acceso de edición. Si faltan controles de color, deselecciona, sal de Dev Mode cuando corresponda y selecciona la capa adecuada. Distingue un problema de permisos de uno de selección, porque necesitan soluciones diferentes.

Define un fondo reutilizable para tu equipo

Para una pantalla puntual, selecciona la superficie exacta y usa su propiedad correspondiente: Page para el lienzo, Fill para un frame o forma y Fill de texto para las letras. En una interfaz compartida, convierte los colores repetidos en variables o estilos semánticos y prueba cada modo. Antes de pasar el diseño a desarrollo, nombra las capas, indica si cada valor es un token o una excepción, revisa el contraste y confirma que el frame exportado muestra la superficie correcta.

Los ejemplos de color e interfaz de EmviUI pueden ayudar a conversar sobre la diferencia entre una paleta, una superficie semántica reutilizable y un componente terminado. Son referencias para decisiones de diseño: no modifican tu archivo de Figma ni generan código de implementación. Combina un kit visual con variables documentadas y estados de componente para que desarrollo sepa no solo «qué azul», sino dónde corresponde y cómo cambia la interfaz entre temas.

Como siguiente paso, lee qué significan los tokens en diseño web y el flujo de Figma para diseño web adaptable. En inglés, consulta qué son los tokens de diseño web y el flujo de diseño web adaptable con Figma. Las referencias primarias de Figma son sus guías de color de fondo del lienzo, rellenos, frames, uso de variables y el selector de color y el contraste.