Buenas prácticas de grillas y componentes en Figma
Contenido del curso
Maria Paula Betancourt
Miguel Ángel Martínez Fernández
Cristhian Eduardo Castillo Meneses
Sailyn Mantilla
Philipp Ruíz Lozano
Arles A. Pinzon Molina
María Isabel Arias
Wladimir Rocha
Carolina Gómez
William Henry Luis Sánchez
Patrick Jhonatan Hernandez Blanco
Jessica Coanqui
Liliana Mancera
beatriz lobos ferrero
Company_admin
Jessica Moreno
David Ramirezperez Ramirezperez
Ana Estefania Aboytes Lozano
Platzi
William Henry Luis Sánchez
Jose Juan Calvo Espinosa
William Henry Luis Sánchez
Jairo Pinto
Wladimir Rocha
Natalia Rivera Perez
En Windows el comando para organizar las carpetas es Alt + L
no consegui el nudge en el menú de acciones xddddddd
Creo que en Figma, en español, aparece como "cantidad de desplazamiento". A mi me sucedió lo mismo. Lo que hice fue cambiar mi versión de Figma a inglés, y luego me apareció sin problema.
Anotación para recordar y compartir: Se estila crear una página especial, dentro del archivo de Figma, para crear los componentes que vamos a referenciar en nuestros diseños. También se puede hacer de forma global para compartir con varios equipos.
Justo tenía esta duda, ¡gracias por compartir!
Quisiera saber que otros cursos son recomendados para la parte de diseño de software, que otras bases uno debe tener?
Mejores prácticas en Figma para diseño de interfaces
Después de explorar prototipos variables y simetría rotacional, el enfoque se centra en aplicar buenas prácticas dentro de Figma. La idea es lograr que otros usuarios quieran revisar tus archivos y replicar tu método de trabajo por lo bien organizado y claro que se ve todo.
Uso de guías y grillas en Figma
Las guías o grillas en diseño gráfico sirven para ubicar los elementos correctamente dentro de un frame. En Figma, puedes configurarlas desde cero. Al añadir una guía desde la opción de "Layout Grid", aparece por defecto una grilla de 8 píxeles, una medida muy usada porque permite una organización basada en múltiplos de 4 y 8, facilitando la alineación y escalabilidad de los elementos.
Además de esa grilla base, puedes añadir columnas (por ejemplo, cuatro) y personalizarlas con colores distintos, ajustar su posición (centradas o expandidas), márgenes (recomendado 16 píxeles desde los bordes) y espacio entre columnas o "gutter" (también 16 píxeles). Esto ayuda a mantener un espacio de trabajo coherente y replicable.
Una vez configurada la grilla, es recomendable guardarla como estilo para reutilizarla fácilmente en otros frames. Por ejemplo, puedes guardarla como “Guía Mobile” desde el panel de estilos locales.
Principio de los 8 puntos (8pt Grid System)
Cuando mueves un elemento con las flechas del teclado, por defecto se desplaza 1 píxel. Para que estos movimientos respeten la grilla de 8 píxeles, puedes ajustar el valor de "Nudge" en la configuración de Figma. Presionando Command + K y buscando "Nudge", podrás establecer el valor de movimiento con Shift + flecha. Se recomienda que este "Big Nudge" esté en 8 para que todos los elementos caigan sobre la retícula correctamente.
Esto facilita la colaboración entre diseñadores, ya que se sigue un lenguaje visual común basado en múltiplos de ocho.
Organización de componentes
En la sección de componentes, es importante mantener un orden claro. Por ejemplo, puedes tener un frame titulado “Iconos con peso de 200” donde guardas íconos de 24x24 px nombrados de forma descriptiva.
Si necesitas reutilizar un ícono, puedes copiarlo y pegarlo en el botón correspondiente. Luego, conviertes ese conjunto en un nuevo componente usando Command + Option + K o desde el ícono de rombo en las propiedades. Es buena práctica nombrar los componentes de forma clara, como “Botón NAVNAV”.
Además, puedes crear propiedades dentro del componente para hacer "swap" de íconos. Esto permite reemplazar el ícono por cualquier otro de forma visual y sencilla usando un menú desplegable. Así, un mismo botón puede tener distintos íconos reutilizando la misma estructura.
Una vez creados, puedes posicionarlos usando la grilla y verificar que todos los íconos tengan un espaciado adecuado, como 16 píxeles entre ellos, respetando siempre la lógica de los múltiplos de ocho.
Organización del espacio de trabajo
Cuando hay muchas capas y elementos en un archivo, puede resultar abrumador. Para simplificar la vista, puedes usar el atajo Option + L para colapsar todas las capas abiertas y tener una vista más limpia. Esto es útil en archivos con muchas imágenes, botones y senderos activos.
Find and Replace
Si notas errores repetidos en tu interfaz, como nombres en otro idioma, puedes usar la herramienta de "Find and Replace". Por ejemplo, si aparece “Italy” en vez de “Italia”, puedes buscar todas las instancias y reemplazarlas en bloque sin tener que hacerlo manualmente en cada frame.
Cierre
Estas son buenas prácticas que ayudan a trabajar con mayor eficiencia, mantener la coherencia en el diseño y facilitar la colaboración. También se recomienda que empieces a explorar más a fondo tu propio proyecto, añadiendo interacciones, navegación entre pantallas, videos o animaciones, para llevar tus prototipos a un siguiente nivel.
no me funciono del nudge
Creo que algo importante o que al menos yo utilizo demasiado es ocultar las reglas y guías usando en windows SHIFT + R
Buenos tips.
si en español el termino "nudge amount" es cantidad de desplazamiento y para "Find and Replace" en windows es control+F
Hola por aqui le dejo mi actividad
que videos mas largos!!!!
¿Cómo podríamos usar una condicional para programar movimiento en este patrón?
Crear una interacción que sume 8 puntos al largo del rectángulo cada vez que se hace clic en el isotipo, mientras éste sea menor o igual a 375. Si supera 375 cambiar el color.
CTRL+SHIFT+O, para ver vectores
En Windows es CTRL + , Luego se busca Nudge y se puede cambiar
CTRL+P , con ese control en windows
