Curso gratuito de Figma para no diseñadores — Clase 2. Fundamentos visuales

22 min readNov 11, 2022

Temario clase 2: Fundamentos Visuales.

Teoría: La forma (punto, línea, plano, espacio y volumen, etc.)
Teoría: Tratamiento de la forma
Figma: Herramienta de formas
Figma: Máscara de recorte.
Figma: Cuadrículas de Diseño

Las formas son un elemento esencial a la hora de comunicar, por esto mismo es sumamente importante saber escoger las formas indicadas para el propósito de comunicación y trabajarlas con el mayor cuidado posible. De esta manera vamos a poder transmitir un mensaje de forma sencilla y concisa. Las formas se van a desenvolver y van a cumplir su función en un determinado espacio. Este espacio puede ser bidimensional o tridimensional.

Primero vamos a hablar de los elementos básicos del diseño y luego profundizaremos en aspectos como su distribución en el espacio.

— La forma —

El punto, línea y plano son las bases del diseño. A partir de estos elementos o formas, el diseñador puede crear diferentes piezas como imágenes, iconos, texturas, patrones, diapositivas, animaciones, sistemas tipográficos, entre otras muchas posibilidades.

📌Punto

Este elemento se considera la unidad mínima en diseño. Puede ser desde una molécula o una partícula muy chiquita, como también llamar la atención de inmediato y transmitir concentración de fuerza.

El punto puede perderse entre los demás elementos o bien expresar su propia identidad, esto puede lograrse a través de su escala, posición y relación con el espacio.

Si utilizamos varios puntos ordenados en cierta dirección podemos obtener una línea. En cambio, si utilizamos una gran cantidad de ellos podemos crear una textura, una forma o un plano. Siempre va a depender del tratamiento que le demos a este elemento según su finalidad. También podemos crear sombras a través de su repetición con diferentes tonalidades de grises.

Si lo llevamos a términos tipográficos, podríamos decir que el punto es la marca final de una oración.

📌Línea

Podemos definir a la línea como una serie infinita de puntos o el punto en movimiento o también podría ser la conexión entre dos puntos. A diferencia del punto, la línea puede representar movimiento y dirección.

La línea contiene longitud. Su grosor puede variar al igual que su recorrido, este puede ser recto, curvo, continuo o trazos. Su apariencia visual también puede cambiar combinándose con texturas.

Las líneas pueden funcionar para separar y unir espacios y objetos, encerrar, marcar una intersección, entre otros. Cuando vemos líneas determinando el borde de un objeto se crea un plano, también cuando la línea aumenta su grosor adquiere peso por lo que puede convertirse en un plano. Puedo obtener volúmenes, planos y texturas a través de la repetición de las líneas.

Llevándolo nuevamente a la tipografía, la línea está presente tanto implícita como explícitamente. Los caracteres se agrupan en línea de texto y por otro lado en las columnas se alinean sobre una línea que puede orientar su alineación a la izquierda, a la derecha o justificado.

📌Plano

El plano representa una superficie plana que se extiende a lo ancho y alto. En el caso de la línea, está conformada por puntos y en el caso del plano podemos decir que está conformado por una línea en movimiento o una línea de un ancho considerable o una línea que determina los bordes de un elemento.

Un plano no tiene porqué ser totalmente sólido y liso sino que puede estar perforado, puede contener texturas, también puede ser opaco o transparente.

En el mundo de la tipografía, el plano tipográfico puede ser la mancha tipográfica: esta puede ser densa o abierta.

📌Espacio y volumen

El volumen podemos definirlo como un objeto que contiene altura, ancho y profundidad, este objeto estaría ocupando un lugar en el espacio tridimensional. A través del uso de líneas, puntos, planos podemos crear una perspectiva que simula distorsiones ópticas. Podemos tratar los objetos haciendo que los más cercanos parezcan mucho más grandes con respecto a los lejanos, que van haciéndose mucho más pequeños a medida que se alejan.

— Tratamiento de la forma —

Ritmo y equilibrio

El ritmo es útil para la construcción de imágenes estáticas y las que no para dar sensación de movimientos que poseen duración y secuenciación. Sirve para crear composiciones atractivas, con interrupciones buscando un cambio y variación que rompa esta secuencia.

El equilibrio ayuda a posicionar los elementos en el espacio y al recorrido visual de las piezas. El equilibrio se logra a través del tratamiento de los elementos en su peso y distribución de manera uniforme y proporcional.

Vamos a ver algunos ejemplos de ritmo y equilibrio:

👉Simetría

La composición se establece a través de un eje común, donde en sus lados se ve reflejado exactamente lo mismo. Pueden ser simétricas de izquierda a derecha y de arriba abajo. Muchos de los elementos naturales poseen de esta estructura simétrica donde se ve una distribución uniforme y equilibrada.

En la simetría las contraformas son iguales lo que hace que la composición sea estática, ya que están en reposo los elementos. Esto provoca que, como espectadores, con un simple vistazo logremos reconocer el material completo.

💡 Las contraformas se tratan de los espacios que se generan alrededor de nuestras formas u objetos, el espacio en blanco entre ellos.

👉Asimetría

En este caso los elementos se van colocando de forma orgánica trabajando las contraformas para lograr un equilibrio y un peso visual indicado.

👉Simetría interrumpida

En el libro de Ellen Lupton, Diseño Gráfico: Nuevos fundamentos, podemos visualizar el ejemplo de la diseñadora Katrina Keane, donde rompe la simetría en forma de cruz. A través de esta esta pieza gráfica comunica el malestar político que existe entre las facciones ugandesa por la crisis del VIH sida. El texto narrativo alterna entre la claridad y la oscuridad hasta que tiene un estallido dónde comunica crisis caos y a su vez ayuda al equilibrio dentro de la pieza y punto de atención.

Fuente imagen: Katrina Keane. Diseño Gráfico: Nuevos fundamentos, Ellen Lupton (2016)

👉Repetición y variación

Estas características nos permiten generar una atracción visual muy fuerte gracias a la yuxtaposición de ambos aspectos, que dan como resultado composiciones llamativas y sugerentes.

👉Escala

Cuando trabajamos, normalmente podemos llegar a tener un diseño monótono y estático ya que tiene falta de contraste. El buen uso de la escala nos puede dar una composición atractiva y sumamente rica gráficamente.

La escala siempre es relativa. Esto va a depender según el tamaño, el color y la ubicación de los elementos que lo rodean. Gracias al contraste de diferentes escalas podemos lograr tensión, profundidad y movimiento. Normalmente las piezas pequeñas tienden a alejarse y las más grandes a acercarse.

👉Texturas

La textura es un elemento importante en la vida del ser humano, es la funcionalidad principal de nuestro sentido del tacto.

Este sentido es fundamental en todos los humanos y principal en el caso de las personas no videntes si hablamos de diseño inclusivo. La textura es un factor fundamental ya que a través de esta, las personas no videntes pueden leer a través del sistema braille y con este lenguaje pueden reconocer diferentes elementos a través del tacto.

Los grandes contrastes entre texturas nos pueden hacer una composición visualmente atractiva. Normalmente la textura de los elementos de diseño tienen una relación con su función visual y su objetivo. En lo físico, por ejemplo, las texturas físicas van a afectar al tacto y a su aspecto, mientras que otro tipo de textura puede afectarles visualmente.

Visual y gráficamente, la textura va a darle mayor nivel de detalle a un objeto o imagen, ya que va a proporcionar una cualidad distintiva a su superficie y va a recompensar la mirada de quien la observa con mayor nivel de detalle. Podemos tener texturas de alto nivel de contraste y otras de bajo contraste, que serían texturas más armónicas y sutiles.

👉Color

En esta ocasión nos enfocaremos en ver cómo el color aporta a la forma en cuanto a la composición gráfica. El color puede ayudarnos a resaltar elementos y a la vez hacer que otros sean más útiles. Si utilizamos bien el color, este nos puede ayudar a diferenciar, destacar, ocultar y establecer conexiones entre elementos.

Podemos diseñar a través del color haciendo una codificación de color. Por ejemplo: en muchas identidades de marca el color puede adoptar diferentes funciones en un proyecto o también en un servicio. En este tipo de proyectos se suelen utilizar paletas cromáticas acotadas y se explotan al máximo en cuanto al significado de cada una. A través del color podemos comunicar etapas, funciones, mensajes, diferenciar elementos, jerarquizar, entre otros. También podemos servirnos del color para crear un énfasis rompiendo el ritmo visual que se viene estableciendo.

— ¡FIGMA TIME! —

— Herramientas de Formas —

Para crear formas desde Figma podemos hacerlo accediendo desde la barra de herramientas. Hacemos clic en el Rectángulo (R), en caso de querer acceder a otras formas debemos hacer clic en la flecha ubicada debajo del rectángulo. O podemos hacerlo a través de los siguientes atajos:

✅Rectángulo (R)

✅Línea (L)

✅Flecha (Shift + L)

✅Elipse (O)

✅Polígono

✅Estrella

En caso de querer crear formas muy específicas podemos utilizar la Herramienta Pluma (P), con ella podremos dibujar y crear vectores.

💡Algunos tips:

👉Formas perfectas: Al momento de crear una forma, si mantenemos presionada la tecla Shift y arrastramos, vamos a obtener formas perfectas o proporcionales.

👉Crecer desde el centro: Podemos crear una forma que crezca desde el centro. Para esto debemos mantener presionada la tecla (Win: Alt ) (Mac: Option) mientras arrastramos con el mouse.

👉Formas perfectas + crecer desde el centro: Presionando las teclas (Win: Shift + Alt) (Mac: Shift + Alt) al mismo tiempo lograremos hacer las dos acciones detalladas anteriormente.

Veamos a continuación como crear y configurar cada una de las formas que nos brinda Figma.

📌Rectángulo

Para crear un rectángulo vamos hacemos clic en la herramienta rectángulo de la barra de herramientas o usamos el atajo del teclado (R).

Una vez seleccionada, hacemos clic en un punto del lienzo o de nuestro Frame y arrastramos.

En cada una de las esquinas de nuestro rectángulo tenemos un controlador. Estos nos permiten cambiar el tamaño y la forma de nuestro rectángulo como queramos.

Radio (vértices)

Podemos ajustar los radios o vértices de nuestros rectángulos para crear formas más suaves.

En este momento nos enfocaremos en los radios de un rectángulo. Podemos configurar todos los radio de todas nuestras esquinas o de forma individual.

Para ajustar los radios del rectángulo completo debemos:

Seleccionar la capa.
Vamos al panel de diseño ubicado en la barra lateral derecha.
Ponemos los valores en el campo de radio de esquinas/vértices.
Podemos también determinar el valor desplazando el cursor sobre el campo y arrastrando hacia la izquierda para reducir o hacia la derecha para aumentar su valor.

✨ Tip extra: Esta configuración puede utilizarse no sólo en formas sino también en frames o redes vectoriales.

📌Líneas

Para crear una línea debemos:

Seleccionamos la herramienta línea desde nuestra barra de herramientas, haciendo clic sobre la flecha al lado del rectángulo y seleccionando la línea o usamos el atajo del teclado (L).
Hacemos clic en nuestro lienzo y arrastramos.
El cuadro azul que aparece alrededor de nuestra forma, tiene un controlador en cada una de sus esquinas. Desde ahí podemos cambiar el tamaño de la forma.
Para cambiar su apariencia, podemos hacerlo desde la barra lateral derecha. Desde esta sección podemos cambiar su peso de trazo, su color, posición o continuidad de trazo.

📌Flechas

Para crear la forma de flecha, es bastante similar a la línea debemos:

Seleccionar la herramienta flecha desde nuestra barra de herramientas o usamos el atajo del teclado (Shift + L).
Hacemos clic sobre un punto de nuestro lienzo o frame y arrastramos.
El cuadro azul que aparece alrededor de nuestra forma, tiene un controlador en cada una de sus esquinas. Desde ahí podemos cambiar el tamaño de la forma.
Cambiamos la apariencia de nuestra flecha desde el panel derecho.

📌Elipses y círculos

Para crear círculos y elipses debemos:

Seleccionar la herramienta Elipse en nuestra barra de herramientas o usamos el atajo del teclado (O)
Para crear una elipse hacemos clic sobre un punto de nuestro lienzo o frame y arrastramos. En caso de querer hacer un círculo perfecto debemos arrastrar y apretar la tecla (Shift).
El cuadro azul que aparece alrededor de nuestra forma, tiene un controlador en cada una de sus esquinas. Desde ahí podemos cambiar el tamaño de la forma.
Con la herramienta de elipse podemos también crear otras formas como anillos, donas, semicírculo, entre otros.

📌Polígonos

La herramienta de Polígono brinda la opción personalizar la cantidad de líneas rectas, si bien en el icono de la herramienta vemos un triángulo, nosotros podemos agregar los puntos que queramos.

Seleccionar la herramienta polígono
Para crear un polígono hacemos clic sobre un punto de nuestro lienzo o frame y arrastramos.
El cuadro azul que aparece alrededor de nuestra forma, tiene un controlador en cada una de sus esquinas. Desde ahí podemos cambiar el tamaño de la forma.
Haciendo doble clic sobre nuestro polígono vamos acceder al modo editar objeto. Desde esta configuración podemos agregar los puntos adicionales y manipularlos de manera individual.
Podemos redondear sus esquinas accediendo desde el controlador pasando con nuestro cursos hasta una esquina, una vez que aparece el icono de radio, hacemos clic y arrastramos.

📌Estrellas

Al igual que la herramienta polígono, podemos configurar la cantidad de puntas de nuestra estrella. Para hacerla debemos:

Seleccionar la herramienta estrella
Para crear una estrella hacemos clic sobre un punto de nuestro lienzo o frame y arrastramos.
Podremos manipular 3 puntos de la estrella:

- La cantidad de puntas. El mínimo es de 3 y el máximo de 60.
- El ratio podemos cambiarlo desde los puntos interiores del centro o desde afuera.
- El radio que nos permite suavizar sus vértices o puntas, similar a cómo funciona el radio de esquina en un rectángulo.

📌Imágenes

Las imágenes no son un tipo de capa específicas sino que las imágenes son un tipo de relleno, de esta manera podremos agregar imágenes a cualquier vector o forma.

Figma nos permite insertar formatos de imagen y video:

mp4
PNG
JPEG
HEIC
GIF
WEBP

Cuando insertemos una imagen o video en Figma, podremos ver en el panel de capas (barra lateral izquierda) que se representan con el siguiente icono.

Tenemos muchas maneras de importar imágenes en nuestro archivo Figma. Algunas son un poco más avanzadas, como bien sabemos este es un curso básico así que nuestra idea no es marear a los más principiantes, sino ofrecerles herramientas que sean fáciles de entender. Por lo tanto haremos foco en las formas más sencillas y básicas.

Cómo insertar imágenes

Como mencionamos recién, las imágenes son rellenos que pueden agregarse a cualquier vector o forma, esto nos ayuda a tener mayor flexibilidad al momento de diseñar. Podemos insertar imágenes de las siguientes maneras:

Arrastrar y soltar la imagen desde nuestra computadora al lienzo.
Importar archivos de imagen desde el explorador de archivos.
Desde el selector de color podemos utilizar el importador de imágenes
Pegar imágenes desde nuestro portapapeles en el lienzo.

Veamos en un pantallazo rápido como realizar cada una de estas formas:

👉Arrastrar y soltar

Seleccionamos una imagen desde nuestra computadora y la arrastramos al lienzo, automáticamente Figma creará un rectángulo con las medidas de la imagen y aplica la imagen como relleno.

👉Explorador de archivos

Desde nuestro panel de herramientas podemos acceder a la importación de imagen desde la herramienta formas. Una vez que lo seleccionamos se abrirá una ventana donde nos deja seleccionar la imagen que tenemos guardada en nuestra computadora. En cuanto a las medidas de la imagen, Figma actuará de la misma manera que en el punto anterior.

👉Selector de color

Otra manera de importar una imagen es:

Seleccionando una forma
Cambiar el modo de color a imagen
Luego cargar la imagen desde el selector de color

En este caso la imagen se implementará con las medidas y nombre pertenecientes a la capa original (la forma).

👉Portapapeles

Este tipo de importación la realizamos cuando encontramos una imagen desde la web y queremos utilizarla sin descargarla. Para hacerlo debemos:

Hacer clic derecho en la imagen que veamos desde el navegador
Elegimos la opción pegar.
Nos trasladamos a nuestro lienzo de Figma
Hacemos clic derecho y seleccionamos la opción pegar.

✨ Tip: Lo bueno de esta manera de importar imágenes es que nos evitamos descargar imágenes a nuestra computadora y luego tener que importarlas. De esta forma ahorramos espacio en nuestra computadora y también un paso extra en la implementación ¡Super sencillo!

👉Editar imágenes

Figma nos brinda la posibilidad de poder hacer una edición sencilla o ajustes de nuestras imágenes:

Escalar, girar y ajustar dimensiones
Recortar y reposicionar
Ajustar el modo de relleno, la rotación y modos de fusión
Incluir las imágenes en estilos y componentes
Aplicar máscaras de recorte
Cambiar el tono, la saturación o el contraste.

— Máscara de recorte —

Ya tuvimos un vistazo sobre las máscaras en la clase anterior. Pero ahora vamos a profundizar un poco más sobre esta función.

¿Qué son las máscaras de recorte?

Las máscaras podemos usarlas para mostrar sólo partes específicas de un elemento u objeto, mientras se oculta el resto.

Podemos pensarlo como si colocaramos una foto dentro de un marco chiquito con una pequeña abertura. Podemos ver una parte de la foto, pero el resto va a estar oculto sin necesidad de recortarlo en un tamaño específico.

Lo bueno de las máscaras es que no tienen una acción destructiva, ya que las partes enmascaradas no se modifican ni se eliminan. Esto nos permite conservar las partes ocultas sin necesidad de recortarlas para que encajen.

📌Cómo funcionan las máscaras

Cualquier capa se puede usar como máscara, incluidas las formas vectoriales, capas de texto, imágenes con canales de transparencia, grupos y más.

👉Anatomía de una máscara de recorte:

Cuando usamos una capa como máscara, se crea un objeto de máscara, que incluye la máscara y las capas que está enmascarando.

En el panel de Capas (barra lateral izquierda), un objeto de máscara se puede identificar mediante un ícono de un círculo casi lleno como base y una flecha hacia arriba. Las capas enmascaradas aparecerán encima de la máscara. La flecha que se extiende desde la máscara muestra qué capas están incluidas en la máscara de recorte.

👉Orden de capas

En Figma, las máscaras se colocan debajo de cualquier capa que desee enmascarar en el eje z (de abajo a arriba y viceversa). Podemos reordenar las capas en el eje z seleccionando las capas que queremos mover y con clic derecho elegir la opción enviar hacia atrás (send to back) o traer hacia adelante (bring to front). También podemos arrastrar las capas hacia arriba o abajo desde el panel de capas en la barra lateral izquierda.

En el siguiente ejemplo, el círculo violeta actúa como máscara. Si la máscara se encuentra debajo de la imagen de la persona en el eje z, enmascarará con éxito esa imagen. Si la máscara se encuentra sobre la imagen, no se enmascarará.

👉Cómo crear una máscara de recorte

Las máscaras tienen que contener un relleno con una opacidad superior al 0 % para que se muestren los efectos y los objetos enmascarados.

A continuación, veremos cómo crear máscaras y cómo reposicionar, cambiar el tamaño, cambiar las propiedades y eliminar máscaras.

Para crear una máscara tenemos que hacer lo siguiente:

Elegir un elemento que queramos usar como máscara y enviarlo detrás de todos los objetos que vamos a enmascarar.
Seleccionar todas las capas que formarán parte del objeto de máscara.
Podemos hacerlo con cualquiera de los siguientes métodos:

Haciendo clic en el icono del círculo casi lleno en la barra de herramientas:

Haciendo clic derecho en el objeto y seleccionar la opción “Usar como máscara” (use as a mask)
Usar el atajo de teclado
(Win: Ctrl + Alt + M) (Mac: Control + Command + M)

Al hacer esto, el objeto que se encuentra más abajo va a ser el que cumpla su función como máscara y se colocará el objeto de máscara creado en un grupo.

Si queremos agregar capas adicionales a un grupo de máscaras existente, podemos hacerlo haciendo clic y arrastrándolas al grupo de máscaras desde el panel Capas de la barra lateral izquierda.

También podemos arrastrar la máscara hacia arriba o hacia abajo en el panel Capas para incluir o excluir capas para enmascarar.

👉Redimensionar y reposicionar

Cambiar el tamaño de una máscara no cambiará el tamaño de las capas que está enmascarando, y viceversa. Lo mismo aplica para el reposicionamiento de máscaras y capas que está enmascarando.

👉Aplicar propiedades a una máscara

Las máscaras son “invisibles” en el lienzo. Todas las propiedades, como trazos, rellenos o efectos, agregadas a una capa de máscara también se tratan como máscaras.

Figma reconoce los niveles de transparencia de las máscaras, por lo que podemos ajustar la opacidad como queramos que se vean los objetos enmascarados.

👉Quitar una máscara

Para dejar de usar un objeto como máscara, podemos aplicar cualquiera de los siguientes métodos para deshacerla:

Seleccionando la máscara y haciendo clic en el círculo casi relleno en la barra de herramientas.

Haciendo clic derecho en la máscara y seleccionando “Usar como máscara” (use as a mask).
Seleccionando la máscara y usando el atajo:
(Win: Ctrl + Alt + M) (Mac: Control + Command + M)

— Grupos —

Los grupos son una herramienta de diseño de Figma que nos permite combinar varios elementos como una sola capa de nivel superior.

Para crear un grupo seleccionamos los objetos o capas que queremos agrupar, hacemos clic derecho y seleccionamos la opción crear grupo (group selection), sino también podemos hacerlo con el atajo de teclado (Win: Ctrl + G - Mac: Command + G) y para desagrupar (Win: Shift + Ctrl + G — Mac: Shift + Command + G)

El objetivo principal de los grupos es combinar elementos siminales y administrar menos capas dentro de nuestro diseño, lo que hace que nuestro archivo sea más manejable.

En caso de querer seleccionar un elemento dentro de un grupo, podremos hacerlo haciendo doble clic o (Ctrl + clic).

Cuando cambiemos el tamaño de un grupo, los elementos secundarios también se escalarán, pero los trazos y tamaños de letra no se escalarán. Para esto es recomendable usar la herramienta de Escala ingresando a ella con el atajo de teclado K.

Izq: Escalando un grupo normal — Der: Escalando un grupo con la herramienta Escala

— Cuadrículas de diseño —

Las cuadrículas de diseño y grillas nos permiten definir la estructura, ritmo y jerarquía de nuestros diseños. Por medio de los diferentes tipos de cuadrículas y grillas podremos establecer un enfoque más racional para utilizar escalas, posicionamientos, tamaños y espaciados.

💡Aplicado al mundo del diseño UI: cuando usamos diseño responsive es fundamental establecer una amplia variedad de grillas y tamaños de dispositivos para que, de esta forma, podamos diseñar una buena experiencia de usuario.

En nuestro artículo Grillas UI nos enfocamos en la parte teórica de los tipos de grillas, en este artículo nos enfocaremos a ver la parte práctica desde Figma.

📌Conceptos básicos

En Figma, las cuadrículas o grillas sólo se aplican a los frames. Ya sean tamaños de pantallas, frames dentro de otros frames o frames dentro de componentes.
Podemos agregar más de una grilla o cuadrícula a un mismo frame. También podemos copiarlas y pegarlas a otros frames, ya que se pueden aplicar como propiedades desde la barra lateral derecha.
Podemos controlar la apariencia (color y opacidad) de cada grilla o cuadrícula para diferenciarlas fácilmente.

📌Tipos de Cuadrículas

Figma nos brinda tres tipos de cuadrículas:

Cuadrícula
Columnas
Filas

Con la opción cuadrícula podremos crear una serie de módulos espaciados de forma uniforme en el tamaño que especifiquemos (como una hoja cuadriculada). Por otro lado las columnas y filas podremos determinar la cantidad que deseemos.

Dentro de estas tres opciones podremos controlar su posición y comportamiento de escala.

📌Cómo crear cuadrículas

Podemos crear una cuadrícula o grilla de diseño en cualquier frame.

💡Cuando creamos un componente, también se convierte en frame, por lo que podemos aplicarle una cuadrícula o grilla.

Para empezar a crear una cuadrícula podemos hacerlo desde la barra lateral derecha desde “Layout Grid”:

Para aplicar una cuadrícula a nuestros frames tenemos que seguir estos pasos:

Seleccionar un frame del lienzo o de nuestra sección de capas.
Hacer clic en el signo “+” junto a “Layout Grid” de nuestra barra lateral derecha.

3. A nuestro frame se le aplicará una cuadrícula por defecto.

4. A continuación, podemos hacer clic en el ícono “cuadrícula” para configurar y actualizar las propiedades.

Podemos cambiar las propiedades de cada tipo de cuadrícula.
👉 Para la cuadrícula (Grid) podemos cambiar el valor del tamaño de los módulos.

👉Para las columnas (columns) y filas (rows) podemos cambiar:

El conteo (Count): determina cuántas columnas o filas hay en la cuadrícula.
Las calles (Gutter): definen la distancia entre cada columna o fila.
El margen (Margin), se trata de la distancia desde el borde que comienza la columna o fila.
El desplazamiento (Stretch) es la distancia desde la parte superior o izquierda desde la que comienza la columna o la fila. Esto se aplica a las filas configuradas en la parte superior y las columnas configuradas a la izquierda.

📌Color para nuestras cuadrículas

El color predeterminado de una cuadrícula de diseño es rojo (#FF0000), con una opacidad del 10 %.

Podemos cambiar el color y la opacidad de cualquier cuadrícula de diseño:
1. Hacemos clic en el ícono “cuadrícula”.

2. Hacemos clic en la muestra de color.

3. Podemos elegir un nuevo color con el selector de color y también definir la opacidad que queramos.

💡Podemos crear más de una cuadrícula en un mismo frame, esto sirve para el desarrollo de diseños más complejos:

Como hicimos al principio seleccionamos un frame y agregamos una cuadrícula. Una vez que agregamos una cuadrícula, podemos volver a hacer clic en el ícono “+” para sumar una nueva y combinarlas.

📌Crear estilos de cuadrícula

Seleccionamos el frame en el lienzo con las cuadrículas de diseño aplicadas.
Hacemos clic en el ícono de 4 puntos en la sección “Layout Grid” de la barra lateral derecha.

3. Hacemos clic en el ícono “+” en la ventana de estilos de cuadrícula (Grid styles)

4. Podemos darle un nombre al estilo de cuadrícula y luego guardarlo haciendo clic en el botón “Create style”.

Para aplicar un estilo de grillas hacemos lo siguiente:

Creamos o seleccionamos un frame en el lienzo.
En la barra lateral derecha, hacemos clic en el ícono de los 4 puntos en la sección “Layout Grid”. Ahí nos van a aparecer nuestros estilos de cuadrícula guardados.
Seleccionamos un estilo de cuadrícula para aplicar a nuestro frame.

Ejercicio práctico

Descargá el archivo para practicar acá ⬅️

¡Gracias por haber llegado hasta acá! 🤓❤️ Si te gustó nuestro contenido no te olvides de darle me gusta, comentar y compartir, esto nos ayuda muchísimo para poder seguir creando contenido para ustedes.