Cómo desenfocar el fondo en Figma – Guía rápida de efectos de fondo

Aprende a desenfocar el fondo en Figma usando el desenfoque de fondo y los efectos de capa. Perfecto para diseño de interfaces y superposiciones elegantes.

Vídeos y documentación de producto con IA al instante a partir de grabaciones de pantalla en bruto

Empieza gratis

En esta guía, aprenderás cómo aplicar un efecto de desenfoque a un marco en Figma usando el menú de diseño.
Sigue los pasos detallados para lograr el desenfoque deseado de un elemento en tu proyecto de diseño.

Un efecto de desenfoque de fondo en Figma le da a tu diseño una apariencia de vidrio esmerilado, comúnmente utilizada en modales, tarjetas y superposiciones.

Paso 1: Prepara la capa de desenfoque

Crea una forma
Usa un rectángulo o cualquier forma/marco donde quieras que aparezca el efecto de desenfoque.
Añade un relleno
Rellénalo con un color sólido (por ejemplo, blanco o gris).
Reduce la opacidad
Disminuye la opacidad de la capa (normalmente alrededor del 10–40%). Este paso es esencial el desenfoque no se mostrará sin transparencia.

Paso 2: Aplica el desenfoque de fondo

Selecciona la capa
Haz clic en la forma que acabas de crear.
Ve al panel de efectos
En la barra lateral derecha, haz clic en el "+" junto a Efectos, luego elige Desenfoque de fondo en el menú desplegable.
Ajusta el valor del desenfoque
Haz clic en el icono de configuración junto al efecto y usa el control deslizante para ajustar qué tan borroso aparece el fondo.

Opcional: Ajustes finos

Puedes combinar el desenfoque de fondo con sombras paralelas para añadir más profundidad.
Ajusta la opacidad y el desenfoque juntos para crear un aspecto suave y esmerilado o uno más fuerte y cristalino.

Guía paso a paso: cómo desenfocar el fondo en Figma

Paso 1

Para comenzar a aplicar un efecto de desenfoque en Figma, primero selecciona el marco que deseas desenfocar.

Ve al menú de diseño ubicado en el lado derecho de la interfaz. Dentro de este menú, encuentra la sección de efectos y haz clic en ella.

En la sección de efectos, haz clic en 'Añadir un nuevo efecto' pulsando el símbolo '+' dentro de ella.

To begin applying a blur effect in Figma, first select the frame you wish to blur. Navigate to the design menu located on the right side of the interface. Within this menu, find the effects section and click on it. In the effects section, click on 'Add a new effect' by clicking the '+' symbol within it.

Paso 2

Una vez añadido el nuevo efecto, aparecerá un menú desplegable. Haz clic en este menú y selecciona 'Desenfoque de capa'. El efecto de desenfoque se ha aplicado correctamente al marco elegido.

Once the new effect is added, a drop-down menu will appear. Click on this menu and select 'Layer Blur.' The blur effect has now been successfully applied to your chosen frame.

Consejos profesionales para desenfocar el fondo en Figma

Aplicar desenfoque a un objeto:
Selecciona el objeto (imagen, forma o marco) que quieres desenfocar. En la barra lateral derecha, en la sección Efectos, haz clic en el icono + y elige Desenfoque de fondo o Desenfoque de capa en el menú desplegable.
Ajustar la intensidad del desenfoque:
Después de aplicar el desenfoque, usa el control deslizante para ajustar la intensidad del desenfoque. Puedes aumentar o disminuir la cantidad de desenfoque para lograr el efecto que deseas.
Usa Desenfoque gaussiano para tener más control:
Para un control más preciso sobre el efecto de desenfoque, usa Desenfoque gaussiano, que te ofrece un desenfoque más suave y gradual.
Desenfoque de imágenes o marcos:
Si estás desenfocando una imagen o un marco, asegúrate de que la imagen esté seleccionada. Puedes desenfocar la imagen sin afectar otros elementos de diseño.
Múltiples desenfoques en capas:
Puedes aplicar varios efectos de desenfoque a distintas capas. Por ejemplo, si quieres un fondo desenfocado con texto nítido, aplica el desenfoque solo a la capa de fondo.

Errores comunes al desenfocar el fondo en Figma

Desenfocar la capa incorrecta:
Solución: Vuelve a comprobar la capa que has seleccionado antes de aplicar el desenfoque. Usa el panel Capas para asegurarte de que estás editando la capa correcta.
Abusar del efecto de desenfoque:
Solución: No apliques demasiado desenfoque a elementos importantes como texto o logotipos, ya que puede reducir la legibilidad. Usa el desenfoque con moderación para dar énfasis al diseño.
Nitidez no deseada después del desenfoque:
Solución: Si al aplicar desenfoque a las imágenes obtienes una nitidez no deseada, ajusta la cantidad de desenfoque y experimenta con distintos efectos, como Desenfoque gaussiano, para lograr el aspecto deseado.
El desenfoque no aparece al exportar:
Solución: Si el efecto de desenfoque no aparece cuando exportas, asegúrate de exportar en alta resolución (PNG o SVG) para obtener mejor calidad.

Preguntas frecuentes comunes para desenfocar el fondo en Figma

¿Puedo desenfocar texto en Figma?
Si bien puedes desenfocar formas vectoriales e imágenes, no puedes aplicar directamente un desenfoque al texto en Figma. Sin embargo, puedes rasterizar el texto en una forma y luego aplicar el efecto de desenfoque.
¿Cómo puedo desenfocar el fondo de un diseño?
Selecciona la capa de fondo o la imagen, aplica el efecto de desenfoque de capa y ajusta la intensidad. Esto es ideal para centrar la atención en los elementos del primer plano.
¿Puedo controlar la dirección del desenfoque?
El efecto de desenfoque de Figma se aplica de manera uniforme. Si necesitas un desenfoque direccional (como desenfoque de movimiento), tendrás que usar herramientas externas de edición de imágenes como Photoshop o Illustrator antes de importar la imagen de nuevo a Figma.
¿El efecto de desenfoque se mantendrá después de exportar el diseño?
Sí, el efecto de desenfoque se mantendrá en el diseño exportado siempre que el archivo se guarde en un formato compatible como PNG o JPG.
¿Hay una forma de desenfocar solo una parte de una imagen?
Sí, puedes usar una máscara en Figma para aislar un área específica de la imagen y aplicar el efecto de desenfoque solo a esa parte.
¿Cómo grabar la pantalla en un Mac?
Para grabar la pantalla en un Mac, puedes usar Trupeer AI. Permite capturar toda la pantalla y ofrece capacidades de IA, como añadir avatares de IA, añadir locución y hacer zoom dentro y fuera en el vídeo. Con la función de traducción de vídeo con IA de Trupeer, puedes traducir el vídeo a más de 30 idiomas.
¿Cómo añadir un avatar de IA a una grabación de pantalla?
Para añadir un avatar de IA a una grabación de pantalla, tendrás que usar una herramienta de grabación de pantalla con IA. Trupeer AI es una herramienta de grabación de pantalla con IA, que te ayuda a crear vídeos con varios avatares y también te ayuda a crear tu propio avatar para el vídeo.
¿Cómo grabar la pantalla en Windows?
Para grabar la pantalla en Windows, puedes usar la barra de juegos integrada (Windows + G) o una herramienta de IA avanzada como Trupeer AI para funciones más avanzadas como avatares de IA, locución, traducción, etc.
¿Cómo añadir locución a un vídeo?
Para añadir locución a vídeos, descarga la extensión de Chrome de Trupeer AI. Una vez registrado, sube tu vídeo con voz, elige la locución deseada de Trupeer y exporta tu vídeo editado.
¿Cómo hago zoom en una grabación de pantalla?
Para hacer zoom durante una grabación de pantalla, usa los efectos de zoom en Trupeer AI, que te permiten acercar y alejar en momentos específicos, mejorando el impacto visual de tu contenido de vídeo.