Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Figma

Cómo corregir sombras recortadas o elementos desbordados en Figma

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Carlos (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:

button object

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

auto layout to buttons

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:

Clip contents

¡Problema resuelto!

Problem solved

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.

Así es como se pueden corregir las sombras recortadas y los elementos desbordados en Figma

Para más consejos rápidos de Figma, ¡revisa los recursos de la siguiente lista!

Recursos y activos para Figma (gratuitos y premium)

¡Inspírate con estos kits de UI y UX para Figma, gráficos, íconos y más!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.