Configuración de guías y retículas

¡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! ❤️

• 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.

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

Modo Oscuro:

¡Hola chicos!

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

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…).

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.

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

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

El uso de guías y retículas hace mucho más profesional el diseño de interfaces, ya que así nos aseguramos de que cada elemento esté alineado y dentro de un margen que proporciona estructura y armonía al conjunto visualizado en pantalla.

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:

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

SHORTCUTS

• Letra: “F”: Creamos nuestro FRAME.

DICCIONARIO

• Gutter: Espacio entre columnas.

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.

¡Me parece super útil que aparezca en pantalla (abajo a la izquierda) cuáles son las teclas que teclea! ^^

Información resumida de esta clase
#EstudiantesDePlatzi

• Es importante utilizar las guías y retículas, ya que esto nos permite ser consistentes en todos nuestros diseños

• La retícula recomendada para android y mobile es de 4 columnas, ellas deben tener una separación de 16px y un margin de 16px

• Puntos de densidad podemos entenderlos como pixeles

• Podemos ver las reglas utilizando las teclas “Shift + R”

• Las guías no se aplican sobre todo el Frame, son líneas que puedo ubicar yo

• Esto de las retículas son las recomendaciones de Google en material Desing

• Esto es una gran ayuda para saber donde deben ir nuestros objetos

Podemos dividir en tres secciones distintas nuestra aplicación

1. App bars
2. Navigation
3. 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.

Quería pertenecer subiendo el mismo screenshot que hemos subido todos

Excelente clase

nice!!