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

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

Crea vídeos y documentación de producto impactantes con IA

Este tutorial se creó con Trupeer en menos de 5 minutos

Crea 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 (p. ej., blanco o gris).
Reduce la opacidad
Disminuye la opacidad de la capa (normalmente entre 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 ajustes junto al efecto y usa el control deslizante para controlar cuán borroso aparece el fondo.

Opcional: Ajuste fino

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

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

Paso 1

Para empezar 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ú, busca 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 que elegiste.

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. Puedes aumentar o disminuir la cantidad de desenfoque para lograr el efecto deseado.
Usa el desenfoque gaussiano para tener más control:
Para un control más preciso sobre el efecto de desenfoque, usa el desenfoque gaussiano, que ofrece un desenfoque más suave y gradual.
Desenfocar imágenes o marcos:
Si vas a desenfocar una imagen o un marco, asegúrate de que la imagen esté seleccionada. Puedes desenfocar la imagen sin afectar a otros elementos de diseño.
Varios 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 equivocada:
Solución: Vuelve a comprobar la capa que has seleccionado antes de aplicar el desenfoque. Usa el panel de 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 enfatizar el diseño.
Claridad no deseada después del desenfoque:
Solución: Si aplicar desenfoque a las imágenes da como resultado una claridad no deseada, ajusta la cantidad de desenfoque y prueba con distintos efectos como el desenfoque gaussiano para lograr el aspecto deseado.
El desenfoque no aparece al exportar:
Solución: Si el efecto de desenfoque no aparece al exportar, asegúrate de exportar en alta resolución (PNG o SVG) para obtener una mejor calidad.

Preguntas frecuentes comunes para desenfocar el fondo en Figma

¿Puedo desenfocar texto en Figma?
Aunque 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 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 el desenfoque de movimiento), tendrás que usar herramientas externas de edición de imágenes como Photoshop o Illustrator antes de volver a importar la imagen 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 alguna 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 Mac?
Para grabar la pantalla en un Mac, puedes usar Trupeer AI. Te permite capturar toda la pantalla y ofrece capacidades de IA como añadir avatares de IA, añadir voz en off y hacer zoom in y out en el video. Con la función de traducción de video con IA de trupeer, puedes traducir el video 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 videos con múltiples avatares y también te ayuda a crear tu propio avatar para el video.
¿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 avanzada de IA como Trupeer AI para funciones más avanzadas como avatares de IA, voz en off, traducción, etc.
¿Cómo añadir voz en off al video?
Para añadir voz en off a los videos, descarga la extensión de Chrome de trupeer ai. Una vez registrado, sube tu video con voz, elige la voz en off deseada de trupeer y exporta tu video 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 video.