Configuración de guías y retículas

Clase 3 de 25 • Curso Básico de Figma - 2022

Sebastian Heredia

student•

¡Hey chicos! 👀

¿Qué tal trabajarlo con un Dark Mode? . Hace poco tiempo Figma implemento el "modo oscuro" y como gusto personal no tarde en adoptarlo, ya que se me facilita mucho más y se vería algo así. 👇

Si quieren configurarlo de esta forma deberán hacer lo siguiente:

Van al icono superior izquierdo con el logo de Figma, se desplegará una lista en donde pueden pasar el mouse por "Preferencias" y luego encima de "Theme" y finalmente pueden seleccionar el modo oscuro. .

¡Espero les sea de mucha ayuda! <3

Roxana Carvallo

student•

A mí me encanta el modo oscuro 🚀

DARWIN JUAN CARLOS CATUNTA GARCIA

student•

Si, muchas gracias :)

ISAAC DANIEL ATAUCURI YNFANTE

student•

• Antes de empezar a colocar los objetos en el espacio de trabajo tenemos que saber por qué y cómo los colocamos. • Guías y retículas son artefactos nos permitirán ser consistentes en el diseño. • Las retículas recomendadas para Android son: o Una basada en 4 columnas. o 16 px dp (density point-punto de densidad) gutter(espacio entre las columnas). o 16 dp margen. • Las guías son las tan conocidas reglas: o Presionando shift+r aparecen. o Salen de jalar desde la parte vertical u horizontal hasta el punto objetivo. • Ahora crearemos nuestro primer espacio de trabajo y debe contener: o Un frame. o Retícula en columnas aplicada. o 2 guías para ubicar texto. • En nuestro proyecto: o Usaremos el frame Android small. o Creación de retícula en layout grid(cuadricula de diseño), y cambiamos a columnas y 16 px en margin y gutter. o Lo usado en retículas son las recomendaciones Google en material design. o Por último, jalamos una regla vertical a los 16 px de margen izquierdo según lo recomendado por Google.

Cristhian Villar

student•

Hecho... Usando FIGMA app Windows, Solo me quedo una duda los margenes del instructor tiene origen X y Y en valor 0, a mi me aparece en 300, el valor 0 horizontal y vertical me aparece casi en la mitad.. ¿como muevo el valor 0 a donde yo quiero o al inicio?.. Dejare esto en preguntas.

Jimena Haran

student•

Gracias!

Kelly Quintero

student•

Yo particularmente usaré Figma para diseño de sitios web, en las lecturas recomendadas, el enlace a Youtube, explica cláramente cómo organizar para diseño web responsive. Recomienda usar 12 columnas para Desktop, 8 - 6 para tablet y 4 para celular (smarthphone, teléfono...).

Jhon Carlos Colorado Angulo

student•

Gracias por el dato.

German Pinilla

student•

++Configuración de guías y retículas++

++Creando reticulas (grids)++ Son artefactos muy poderosos porque nos van a permitir ser consistentes a lo largo de nuestro diseño.

Reticula recomendada para este proyecto y para Android es: * 4 columnas * 16 puntos de densisdad (dp) gutter es decir de espacio entre columnas * 16 puntos de densidad (dp) margen

++Creando guias++ Las guias no son espacios que se aplican sobre todo el frame en particular. Es una sola linea que se puede sacar desde los bordes de la interfaz o tambien podemos usar el shortcut del teclado shift + r la cual podemos deslizar con el mouse hasta la zona en el frame donde queremos usarla

Vamos crear nuestro primer espacio de trabajo ++Debe contener:++
- Un frame
- Una reticula en columnas aplicadas
- Dos guias para ubicar un texto

William Ruiz

student•

gracias por tu aporte

Enmanuel Alejandro Mendoza Maldonado

student•

Las guías y las retículas son bastante útiles, ya que nos ayudan a mantener la consistencia y el orden de nuestro proyecto a lo largo del proceso de creación.

La grid es una plantilla compuesta por ejes verticales y horizontales que se entrecruzan dando forma a una rejilla que, según se combinen sus retículas, permite crear diferentes tipos de módulo, columnas, márgenes, delimitaciones, contornos…

En el lateral izquierdo podemos visualizar el panel de configuraciones del frame, para poder usar este superpoder en Figma debemos dirigirnos a donde dice “Layout grid”, ahí podemos crear la grid la cual también podrimos personalizar ya sea que se quiera trabajar con la rejilla completa, o sino solamente con columnas o filas.

Grilla completa

Columnas

Filas

William Ruiz

student•

gracias por tu aporte enmanuel

Maria Cristina Del Pilar De la Barra Portocarrero

student•

William Ruiz

student•

gracias por tu aporte maria

CLAUDIA TATIANA LADINO MORENO

student•

Me encanta la metodología de la clase, primero nos explica los terminos y despues vamos al programa a realizarlos, es excelente, asi se evitan vacios durante la ejecución que es donde a veces te puedes perder cuando eres principiante.

William Ruiz

student•

JOSE ENRIQUE GARCIA CRUZ

student•

Modo Oscuro:

John Jeison Gonzales Antunez

student•

gracias mis ojos ya estaban doliendo :V con mucha luz

William Ruiz

student•

gracias por tu aporte jose

Bryan Andres Vera Garcia

student•

Podemos dividir en tres secciones distintas nuestra aplicación

App bars
Navigation
Body

Dentro podemos definir 3 elementos ( Margin / body / columns) la guía que proporciona material design se organiza de la siguiente forma:

Pantallas de 0 - 599px de ancho:

16dp de margin
4 columnas
body se expande conforme se va ampliando la pantalla

Pantallas de 600px - 839px :

8 columnas
32dp de margin
body se expande conforme se va ampliando la pantalla

Pantallas de 905 - 1239

Cuando el body llega a medir 840px no sigue creciendo.
El margin comienza a crecer partiendo de 32dp hasta 200dp
12 columnas

Pantallas de 1240 - 1439

body escala horizontalmente
margin de 200dp
12 columnas

Pantallas de 1440 +

Cuando el body llega a medir 1040px no sigue creciendo.
El margin comienza a crecer partiendo de 200dp hasta el fin de página.

Camilo Jiménez

student•

Muy buena información

William Ruiz

student•

gracias por tu aporte bryan

Dario Falzone

student•

APUNTE PARA EXAMEN ✅

Es importante entender el “por qué” y el “como” se colocan nuestro objetos de diseño dentro de nuestro espacio de trabajo,
Para ello uso a las guías y retículas disponibles en Figma, las cuales nos darán consistencia a lo largo de nuestro diseño.

++RETÍCULA RECOMENDADA PARA ANDROID - Según Material Design++:

Está basada en 4 columnas,
Tiene 16 puntos de densidad (dp) de gutter*
Tiene 16 puntos de densidad (dp) en el margen

16dp ← ← || ← || ← ||← || ←

++GUIAS++

Es un conjunto de lineas que podemos sacar desde los bordes superior e izquierdo de la interfaz.
Esta linea nos servirán muchas veces para tomarlas como guia (margen, altura, separación, etc.).

Pasos para crear la reticula:

Creamos nuestro Frame (F).
Creamos nuestro layout grid (signo +).
En Layout Grid Setting, la convertimos en tipo: ++Columna++.
Cambiamos el valor a 4 columnas (basado en material design)
16dp de Margen (margen izquierdo y derecho).
16dp de gutter (entre las columnas)

SHORTCUTS

Letra: "F": Creamos nuestro FRAME.

DICCIONARIO

Gutter: Espacio entre columnas.

Dario Falzone

student•

vi la posibilidad de agregar múltiples retículas. En este caso agregar una RETÍCULA TIPO FILA, puede ayudarnos a alinear nuestros objetos de manera horizontal.

Configurada del tipo:

count de 100 type: top una altura de 10 gp y un glutter de 10 gp

William Ruiz

student•

gracias por tu aporte dario

David Cáceres

student•

¡Hola chicos!

¿Que tal la clase? Si gustan podemos compartir nuestras screenshots en este comentario.

Robinson Javier Ordoñez Barreiro

student•

William Ruiz

student•

gracias por tu aporte robinson

Martha Elena Loera Natera

student•

Wow aprendí muchísimo.

Marco Antonio Lopez

student•

Por favor actualicen el curso con la nueva interfaz 2024 y las nuevas actualizaciones

Mariley Erika Condori Calla

student•

Algunos comandos mencionados:

Shift + R = mostrar/ocultar reglas
Shift + G = mostrar/ocultar layout grid (columnas)
Alt = para ver medidas del elemento

William Ruiz

student•

gracias por tu aporte mariri

Jimena Haran

student•

Cuando vi los grids una vez, por arriba pensé que era algo re difícil de usar y ahora veo que no, me gusta lo bien explicado que está todo en todo el curso

Antonio Ramón Molina Simancas

student•

Tal vez lo digan más adelante pero yo lo descubrí de carambola y quizá sea de utilidad para el que no lo sepa: • Shift + Scroll de mouse: desplazamiento lateral. • Ctrl + Scroll de mouse: zoom. • Fn + Scroll de mouse: desplazamiento vertical.

Edhu Nuñez Alvarado

student•

Siempre que he trabajado con figma por default me pone un layout grid de 10px

Roxana Carvallo

student•

Puedes ir a "preferences > Nudge amount" y colocar la cantidad con la que sueles trabajar 😁

Isaac Yael Ruiz

student•

¿Cuál es la plantilla estándar para Desktop?

jesus piedrahita

student•

hola buenos dias isaac para desktop el estandar son de 12 columnas, para tablet son de 8 a 6 columnas y para mobile las recomendaciones que el profe da, que son de 4 columnas

Daniela Alexandra Lozada Rosillo

student•

Una pregunta si lo quiero hacer para pantalla de escritorio como sería la separación de retículas?

Santiago Camargo

teacher•

Tú escoges qué retículas usar. Yo te recomendaría empezar con 12 columnas.