Consejos para trabajar con diseños en Figma

Spanish (Español) translation by Benjamín Porras (you can also view the original English article)

Cuando se trabaja con diseños en Figma (lo que será a menudo), es necesario estar cómodo con el cambio de tamaño, las medidas, el espaciado, la alineación y el enmascaramiento. ¡Aquí hay cinco consejos para ayudarte a lograrlo!

Mira los consejos

1. Formas inclinadas para facilitar el redimensionamiento isométrico

Si trabajas con ilustraciones isométricas en Figma, hay una gran manera de inclinar tus formas y ayudar a redimensionar las cosas de forma más intuitiva. Para ello, toma un objeto (por ejemplo, un cuadrado) y rótalo 45°, mantén presionada la tecla SHIFT y arrastra la esquina para rotarlo incrementalmente.

Para aplastar ese cuadrado al revés, primero hay que agruparlo (por sí mismo), restableciendo efectivamente el cuadro de límites en el proceso. Ahora, cuando lo selecciones, podrás aplanarlo en los ejes X e Y.

Para cambiar sus dimensiones sin dejar de ser fiel a sus líneas isométricas, desagruparlo, y luego redimensionarlo con las manijas.

2. Diseño rápido de columnas

Se puede generar rápidamente un diseño de columna utilizando el snapping y la distribución. Por ejemplo, encajar dos cuadrados a los lados de una artboard, y luego empujar cada uno ligeramente hacia adentro. Añade algunas otras formas entre ellos, luego selecciona todo el lote y ve al Main menu (menú principal) > Arrange (Organizar) > Distribute Horizontal Spacing (Distribuir el espacio horizontal). ¡Bingo! Un diseño de columna perfecto para trabajar.

3. Eliminar el espacio entre los artículos

Es posible eliminar rápidamente todo el espacio entre una serie de objetos. Selecciona los objetos en cuestión, y luego ve al Main menu > Arrange > Pack Horizontal (Agrupar horizontal) para deshacerte de todo el espacio horizontal. Lo mismo es posible verticalmente, yendo al Main menu > Arrange > Pack Vertical (Agrupar vertical).

Combina estas opciones con las herramientas de alineación para ayudarte a crear diseños basados en filas y columnas.

4. Hacer la alineación extra precisa

Puedes obtener ayuda para alinear los objetos con precisión asegurándote de que las reglas estén activas (SHIFT + R) y luego, cuando muevas una forma, verás su ancho y alto representados en las reglas.

Make Alignment Extra Precise with rulers in Figma — ¿Ves esos marcadores azules en las reglas?

5. Crear máscaras rápidamente

Para crear máscaras rápidamente en Figma, haz clic derecho en un objeto y elige Use Mask (Usar máscara). Sin embargo, ten en cuenta que necesitas que el objeto de enmascaramiento se agrupe con los objetos que quieres enmascarar.

Recursos para aprender a usar Figma

Esos fueron algunos consejos rápidos para que trabajes con diseños en Figma. Para ayudarte a llevar las cosas al siguiente nivel tenemos una serie de cursos de Figma en Tuts+:

Un agradecimiento especial para Carmel DeAmicis y Valerie Veteto por sus habituales resúmenes de consejos comunitarios: ¡ve a echarles un vistazo!
blog.figma.com
www.figma.com