Auto Layout en Figma: cajas responsive
Contenido del curso
Wilbort Encomenderos Ruiz
Pedro José Chávez Mera
Ingrid Raquelo Landa Santiago
jorge Zavala Olivares
Maricielo Anchahua Flores
Juan Esteban Palacio Herrera
Maria Camila Riascos Salas
Noelia Maldonado
Laura Alzate
Paloma Canales
Ingryd Mosquera
Mark El hage
Natán Barrón Lugo Barron Lugo
Yasmin Garcia
Pedro José Chávez Mera
Natalia Rodriguez
Jhonny Iván Chapetón
Harold Sánchez
Jhonny Iván Chapetón
JONATHAN RUBEN HERNANDEZ GONZALEZ
Jhonny Iván Chapetón
Daniela Cobos
Brenda W Castrillón López
Leiver Choconta Gomez
Alexandra García
Marcos Mesias
Sabrina Salinas
Genesis Milano
Napoleón Pereyra
Liliana Mancera
Jahan BarrazaJimeno
Paloma Canales
Dan Rojas
En el minuto 2.34 al aplicar el 'Auto layout' no se menciona que se están presionando las teclas Chift + A.
Pensé que se habían cortado esa parte pero afortunadamente me di cuenta al ver las teclas que el profesor está presionando en la pantalla.
Gracias por mencionarlo amigo.
eso era lo que no entendia, gracias
En mi caso Ctrl + Shift + A funciona como seleccion invertido, tuve que utilizar Ctrl + Alt + Shit + A para utilizar el Suggest auto layout
muchas gracias!!
Muchas gracias, en el curso deberían explicar los comandos para windows también
Auto Layout, Frame y Layer son conceptos fundamentales en Figma que ayudan en la organización y diseño de interfaces.
Auto Layout: Es una herramienta que permite que los elementos se adapten automáticamente al tamaño de su contenido y al contenedor. Facilita la creación de diseños responsivos que cambian de tamaño de acuerdo a la información que contienen.
Frame: Es un contenedor que agrupa elementos y puede tener propiedades de Auto Layout. Los Frames pueden ser estáticos o dinámicos, dependiendo de cómo configures su contenido.
Layer: Se refiere a cada elemento individual dentro de un Frame. Las Layers pueden ser cualquier tipo de objeto, como formas, textos o imágenes, y se organizan jerárquicamente dentro de un Frame.
Comprender estas diferencias es clave para dominar el diseño en Figma.
Recomiendo ingresar al link en el apartado de Lecturas recomendadas. Te permite ir probando distitnos ejercicios para asimilar aun mas toda la información,
Que buen curso! El mejor que hice en platzi .
Gracias!, no sabía que estaba, me srivió mucho :)
No me resulta algo, en el min 4:48 usa autolayout y los organiza como "Wrap" a mi no me queda así, se me ordenan los botones en dos filas, pero los deja en 4 columnas al usar SHIFT + A y no me salen los espaciados entre elementos. Pero me di cuenta que mienras se ve el frame seleccionado aparece en la esquina derecha inferior un cuadrito azul con 6 mini cuadritos blancos dentro y al presionarlo me los organiza igual, pero me muestra los espaciados entre elementos. La interfaz del menú se ve algo diferente a la de Santi, creo que actualizaron y agregaron eso...como que me perdí un poco. Image 1 con Shift + A / Image 2 con el cuadrito azul.
mage
Me pasa lo mismo, me podrías decir si pudiste solucionarlo, gracias
Alguien lo a solucionado? me pasa igual
Figma tiene tantas opciones que es dificil y este profe no ayuda en nada. Veo a muchos estudiantes con bastantes dudas y el profe brilla por su ausencia, no da buenos tips con los comandos espera que hagamos lo que el muestra el video y nos salgan las cosas igual, Y al final hay que estar preguntándole a la IA o viendo videos de Youtube para arreglar las cosas que el profe no enseña bien.
Hagan otro curso con otro profe!
figma es super intuitivo, si es tu primer programa de edicion si te va a resultar dificil al principio, con practica y mucho interes de tu parte para la investigacion veras que pronto se te resolveran muchas cosas
Pregunta: ¿Cuál es la diferencia entre autolayout, frame y layer?
Para Los que no entiendan del todo el tema, Este es un excelente Tutotrial
Tutorial Autolayout en Figma para Principiantes
Muy buen tutorial, justo acabo de verlo y la interfaz es más actualizada, me enredaba sobretodo con el tema del wrap. Confirmo también que los comandos son diferentes tanto en mac como en windows. Gracias!!
Consulta el esta usando Mac de Apple, y para los mortales que usamos Windows, ¿es igual la misma tecla Shift y demás o cambia? 👀
Me perdí desde que que seleccionó todo y usó Ctrl + Shift + A en el 6:39, no sé si es por lo que usa Mac y algunos comandos son diferentes pero bueno, en conclusión hay que profundizar mucho sobre Auto Layout, siento que ahorra dolores de cabeza y es muy útil a la hora de hacer todo responsive.
Es una locura, no queda como dicen finalmente lo logre pero no son claros con eso
No me dajaba asi qeu primero lo puse en forma de grid beta y luego ya que presoine shift + a, lo cambie a forma de HOrizontal en su flow y seleccione el wrap, deberian ser mas especificos.
Tal cual, así también me salió, jugando con el flow y el wrap quedó alineado como cuadrícula, faltó que el profe espeficicara esa parte y también aclarar que la opción de wrap directamente ya no se encuentra en esta actualización de Figma.
Auto Layout es una función en Figma que te permite diseñar interfaces responsivas de manera eficiente. Con Auto Layout, los objetos dentro de un frame se comportan como "cajas inteligentes" que se adaptan automáticamente al contenido y al tamaño del contenedor. Esto significa que, al modificar el texto o añadir elementos, el layout responde automáticamente, manteniendo una alineación adecuada y respetando los espacios definidos. Es fundamental para crear interfaces que se ajusten a diferentes dispositivos y tamaños de pantalla de forma fluida.
Por algún motivo al agregar el fill (Ya tiene uno predeterminado color blanco) intente poner otro color verde pero no me rellena el fondo sino me cambia el color de la letra. ¿Qué estoy haciendo mal? Gracias ☺️
Brenda, revisa que tu selección de relleno se esté aplicando a tu frame o auto layout y no a la capa de texto.
Un truco es que siempre visualices que estas seleccionando desde el panel de capas en la parte inferior izquierda.
Saludos!
Para aplicar el auto-layout en Figma, simplemente pulsa Shift + A
Increíble, me parece que hacer auto layout en CSS es mas fácil que en figma, por lo menos para mi.
No sé por qué pasa esto cuando intento hacer el autolayer. Se descoloca todo, y sino me aparece un cartelito que dice que no me puede sugerir un auto layer...
para el sugerido en windows es ctrl+alt+shift+a
Hola buenos días a todos les comparto mi practica de auto layout. Algo que me gusto mucho es que si quieres sustituir un icono por ejemplo la flecha de descarga de los botones, lo ú
gracias a los comentarios de los compañeros pude realizar el ejercicio porque no me saliá organizado
Buenas tardes, cordial saludo, he estado tratando de hacer que el auto layout funcione pero la herramienta wrap me sale inhabiliatada o tengo que entrar en el grupo y darle a cada botón la opción de warp y aun así los botones no colapsan ¿A que se debe esto?
Los botones no me queden organizados de la misma manera en "Wrap". Cuando les aplico autolayout, como que crea unas cajas o botones invisibles para rellenar el espacio, selecciono los 6 botones y luego aplico Autolayout y el resultado es diferente a como se le muestra a Santi.
¿Por qué sera?
Alguien sabra por qué en mi caso por ejemplo mi texto se ve tan píxelado?
