Cómo corregir sombras recortadas o elementos desbordados en Figma

() translation by (you can also view the original English article)

En este consejo rápido, te enseñaré cómo corregir las sombras recortadas y los elementos desbordados que en ocasiones ocurren en Figma. Esto puede ser un problema común cuando creas un grupo o aplicas la distribución automática a elementos específicos.

Arreglando sombras recortadas o elementos desbordados

Aquí tienes una versión completa en video de este consejo breve de Figma. ¡No olvides suscribirte al canal de Envato Tuts+ en YouTube para conseguir tutoriales, cursos gratuitos y más!

Empieza con un objeto

Supongamos que estás creando un botón y le añades una distribución automática para que las proporciones se mantengan fieles incluso al escalar. Dale un color, y una sombra grande:

Luego duplica el botón, selecciona las dos versiones, y después aplica una distribución automática a ambas.

Inmediatamente podrás ver que la sombra ha sido recortada alrededor de los objetos. Es visible entre el botón, pero en ninguna otra parte.

Esta es la razón

Cuando creas un grupo con distribución automática en Figma se hace creando un marco (frame) con los objetos en cuestión. Los límites de los marcos están recortados por defecto, así que tenemos que desactivar eso.

Con los objetos seleccionados, ve al inspector de propiedades y desactiva la casilla Clip contents:

¡Problema resuelto!

Objetos desbordados

Lo mismo se aplica a los objetos que salen de los bordes. Por ejemplo, estos botones están dentro de un marco. Y si deseamos que sean visibles más allá de los límites del marco tenemos que asegurarnos de que no esté marcado Clip content para el marco.