Frames y constraints para diseño responsive
Contenido del curso
Cristian Damaso Calderon Rojas
Federico Acuña
Luis Leandro Leones
Alexandra García
Nicolayev Avendaño Romero
Vicente Spencer Noriega Moreno
Nicolas Vargas Montagut
Jhonny Iván Chapetón
Noelia Maldonado
Héctor Alonso Padilla Ramírez
Javier Molina
Lizania Peña
Liliana Mancera
JONATHAN RUBEN HERNANDEZ GONZALEZ
Carolina Gómez
Carlos Hernández Pérez
Daniel Idarraga
Ana Fernanda Valencia Castro
Rafael Pastore
Salvador Arévalo Rosales
Ester Sarai Galvez V.
Jhonny Iván Chapetón
Napoleón Pereyra
Cesar Heriberto Ramirez Ayala
Jaime Arturo Cárdenas
No se si toque algo antes de empezar el ejercicio del minuto 10, pero el frame que copiamos me aparecia con la propiedad "fixed" y creo que por esa razon no me funcionaba cuando agradaba horizontalmente el frame.
La manera que lo solucione fue elegir el frame copiado "top" y en la barra derecha de herramientas dice "Prototype" > Scroll behavior > Scroll with parent, esto me funciono a mi.
Me imagino que debe haber otra solucion mas correcta, estoy aprendiendo figma, saludos.
Gracias Cristian, me estaba pasando exactamente lo mismo....seguramente haya otra solución 🤞
Me pasó igual. Pero luego de aplicar "Left + Right" coloqué nuevamente su comportamiento "Fixed" y quedó responsive
A mi me aparece bloqueada la opción L + R para mover el elemento top al final del ejercicio :(
Hola, seleciona el Top y ve a la seccion de "Prototype" luego en "Position" seleciona "Scroll with parent". Asi se te desbloquea.
Gracias Nicolayev, me funciono a la perfección. Podrías explicar un poco más acerca de que fué lo que hicimos para que se desbloqueara o porque el Prototypo fixed lo bloquea, gracias.
Si tienen algún inconveniente al final al tratar de aplicar el "Left + Right" en el elemento global, aquí tienen unos pasos para solucionarlo (Incluyo imágenes también): Seleccionan el objeto > Prototipo (arriba a la izquierda de la pantalla) > Position > Scroll with parent.
Listo, ya después de eso los debería dejar aplicar el "Left +Right".
Pasos con imágenes: <img height="395" width="480" src="https://static.platzi.com/media/user_upload/upload-921f6c02-1aaf-4f76-b8c8-832c1afc3d8b.jpg" /> <img height="392" width="476" src="https://static.platzi.com/media/user_upload/upload-5a393cac-0442-466b-a89c-0856a8c9893a.jpg" />
Justo me sucedió eso y al activar el scroll with parent se activó. Muchas gracias
Buenos dias
He resuelto gracias a los comentarios, el poder seleccionar como posicion del top la opcion L+R."
Lo que hay que hacer es ir a la seccion de "Prototype" y luego en "Position" selecionar "Scroll with parent". Luego desde posicion van a visualizar desbloqueada esta opcion.
Saludos.
Si tienen varios niveles de anidamiento, pueden utilizar "Deep select" para elegir una capa interna o el marco de nivel superior. Solo necesitan mantener presionada la tecla modificadora y hacer clic en el objeto o capa anidada, o bien en el marco superior, directamente en el lienzo.
Fuente:
Buenas tardes, resolvi viendo los comentarios un problema que también me ocurría a mi, el elemento del status bar, no me dejaba usar la opción left + right, y era haciendo que en la pestaña prototype poner position en scroll with parent, por un lado es de agradecer tener una comunidad activa, pero me gustaría entender mejor porque ocurre esto.
Hola, me sucedió lo mismo que a varios compañeros con el comportamiento de Right + Left para la sección más grande de Top. Gracias a los comentarios, logré que funcionara al ir a Prototype>Position>Scroll with Parent. Sin embargo, me gustaría saber la razón por la que ocurrió esto.
Muchas gracias :)
Aunque al principio no me dimensionaba el tamaño como deseaba por fin lo pude resolver
Que bueno que apoyan con esos detalles aqui en el chat, pero que mal que en el curso no tenga cuidado con ese tipo de detalles. Finalmente logre alinearlo pero fue justo gracias a los comentarios.
Organizar Nuestro Espacio de trabajo
Sección:
Guías:
Frames: Puedo realizar de todos los tamaños, el profe le gusta el tamaño iphone 13 mini, tambien el ejemplo de pantalla de Mac-book Air
,la hora que esta ubicada a izquierda, coloco que se quede ubicada la izquierda (Estos Íconos usualmente estan ubicados centrados)
Vemos cuales son de las mejores prácticas para tener un espacio de trabajo consistente y escalable a lo largo de los diferentes dispositivos
Tap click en mi sección Local - Recomendados si los quiero dejar en su ubicación, pero si me interesa que esa línea divisoria si se acomode a los tamaños: Al modificar el tamaño de mi frame, vemos como se acopla al tamaño de mi dispositivo.
Esto me permite hacer diferentes versiones de este diseño muy rápido,
Una solución más correcta que encontré al error que muchos tuvimos en el ejercicio al mover las dimensiones del frame es seleccionar en prototype>Scroll behavior>Sticky, para que la barra de status se mantenga en la parte superior si tenemos elementos que nos obliguen a hacer scroll, de esta manera podemos tanto pre visualizarlo correctamente como aplicación de móvil como probar el "responsive".
Al seleccionar Scroll with parent al realizar una preview con Shift+Espacio la barra de estatus se deslizará hacia arriba si hacemos scroll.
Sí, en Figma puedes facilitar la organización de constraints utilizando el Auto Layout. Este permite establecer reglas de alineación y distribución que se aplican automáticamente a todos los elementos dentro de un frame, evitando que tengas que ajustarlos uno por uno. Al crear un Auto Layout, puedes definir cómo deben comportarse los elementos cuando cambian las dimensiones del contenedor, lo que te ahorra tiempo y reduce la tediosidad de la tarea. Es una excelente práctica para hacer tus diseños más eficientes.
¿Por qué pasa el error de L-R cuándo no esta activado la propiedad de Scroll with parent,?
Comparto el desarrollo del ejercicio :)
Práctica de esta clase finalizada muchas gracias Nicolas Vargas Montagut me paso lo mismo que a otros que al seleccionar el grupo la opcion de izquierda y derecha me salia bloqueada pero luego todo se arreglo.
listo.
