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.

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

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

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

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.

Modo Oscuro:

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.

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.

¡Hola chicos!

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

Wow aprendí muchísimo.

Algunos comandos mencionados:

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

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

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.

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

guias y reticulas

En Figma, las guías y las retículas son herramientas de diseño que se utilizan para alinear y distribuir objetos en el lienzo.
Las guías son líneas verticales u horizontales que se pueden colocar en cualquier posición del lienzo. Para colocar una guía en Figma, simplemente arrastra una guía desde la regla vertical u horizontal en el borde del lienzo hacia el centro del lienzo. Puedes mover las guías arrastrándolas a una nueva posición y también puedes eliminarlas arrastrándolas de vuelta a la regla

Las retículas son una serie de líneas verticales y horizontales que se utilizan para alinear y distribuir objetos en el lienzo. Las retículas se pueden ajustar en tamaño y espaciado para adaptarse a diferentes diseños y se pueden activar desde el menú “View” de Figma.

Para utilizar las guías y las retículas en Figma, simplemente arrastra y suelta los objetos en el lienzo y asegúrate de que se alineen con las guías o las retículas. También puedes ajustar la posición de los objetos utilizando las medidas y la alineación que se muestran automáticamente en Figma.
Las guías y las retículas son herramientas muy útiles en Figma, ya que te permiten crear diseños más precisos y organizados, asegurándote de que los objetos se alineen y distribuyan correctamente en el lienzo. Además, son fáciles de usar y se pueden personalizar para adaptarse a diferentes diseños y necesidades.

• 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:
  • Una basada en 4 columnas.
  • 16 px dp (density point-punto de densidad) gutter(espacio entre las columnas).
  • 16 dp margen.
• Las guías son las tan conocidas reglas:
  • Presionando shift+r aparecen.
  • Se llevan de la parte vertical u horizontal de la interfaz hasta el punto objetivo.
• Ahora crearemos nuestro primer espacio de trabajo y debe contener:
  • Un frame. Tecla F
  • Retícula en columnas
  • Guías para ubicar el texto o nuestro contenido.
• En nuestro proyecto:
  • Usaremos el frame Android small.
  • Creación de retícula en layout grid(cuadricula de diseño), y cambiamos a columnas y 16 px en margin y gutter.
  • Lo usado en retículas son las recomendaciones Google en material design.
  • Por último, jalamos una regla vertical a los 16 px de margen izquierdo según lo recomendado por Google.

¿Seré el único estudiante de programación que hace Ctrl + S cada vez que hace algún nuevo cambio 😅?

Configuración de Guías y retículas

Layout Grid:

Count “Columnas” : Cuantas columnas necesitamos en el Grid

Margin: Márgenes laterales

Gutter: espacio entre columnas

<aside>
💡 Los espacios deben ir en múltiplos de 8
Los espacios de márgenes y gutter no deben ser demasiado grandes
Los espacios no deben ser del mismo ancho de las columnas

</aside>

A veces te aparece el grid a 10 puntos de densidad, y lo puedes modificarlo desde preferencias.

Me gusta que se capture las letras que usa en clase

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.

Me recordo mucho al diseño de columnas que tenia Aldus Page Maker… y se mantiene hasta ahora con InDesign

Excelente información!

Ya hay que actilizar este curso ,
no?

Aprendiendo a usar Figma en Macbook! Clase bien explicada.

Excelente clase profe, genial. estoy entendiendo muy bien!![](

Mi aporte

diseños precisos y bien estructurados. A continuación, te daré algunos pasos generales para configurar guías y retículas

• Las retículas recomendadas para Android son:

  • 4 columnas.
  • 16 px dp (density point-punto de densidad) gutter (espacio entre las columnas).
  • 16 dp margen.

  

  

• Shift+R activar la regla

¡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

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

Excelente clase

nice!!