Diseño de Landing Page Responsive en Figma

Clase 21 de 30 • Curso de Figma: Técnicas Avanzadas de Diseño

Clase anteriorSiguiente clase

Edson Rodríguez

student•

Mmm, se salta explicaciones, pero bueno...

Camilo Gil Vasquez

student•

Mi landing page Banca, siento que falta una clase, pero bueno, les comparto mi trabajo:

bruxly Patiño

student•

en la clase anterior estábamos en la documentación y esta ya pasamos directamente al diseño de la pagina con logos e imágenes? o se saltaron una clase o me perdí de algo?

Carmen Ansio

teacher•

Hola Brusly, en principio si sigues el orden de las clases está el mismo ejemplo iterado hasta realizar la landing page final

Juliana Ordoñez

student•

Profe pero no realizaste el proceso ,ya tenias realizado todo el ejercicio es lo que quiere decir el compañero

MIRIAM ELISA QUIÑONES VIERA

student•

Profe te saltaste una clase :( , la idea era ir haciendolo paso a paso

Adriana Guerrero Cordoba

student•

Hay noooo esta muy rara la clase

Samuel Carpinteyro

student•

Súper rara, se saltó todo el proceso

Diana Alexandra Rodríguez Rojas

student•

Hola! La idea de solo colocar el diseño ya realizado, en un frame, no me parece lo adecuado para ENSEÑAR. Lo ideal era hacer el diseño desde 0, nosotros agregarle nuestra esencia (como en la card) e irnos guiando la manera en la que realizabas el diseño, sobre todo en el autolayout. Ahora me encuentro en youtube buscando tutoriales, la suscripción no es nada económica (para mi que pagué el año) y migrar a otras paginas para aprender por algo que estoy pagando para aprender acá en platzi no me parece correcto.

Vanesa Vasquez

student•

La funcionalidad de las imagenes es solo apra la versión de pago? Intente agregar el min y el max en la imagen pero no logro ver el cambio de tamaño cuando disminuyo el frame padre. Si bien no esta dentro de un frame con autolayout, el frame de la landing, pero el que contiene la imagen si. https://www.figma.com/file/dIMDtSM7lA5sDq2Mf4frOD/curso-avanzadod-e-figma?type=design&node-id=53%3A172&mode=design&t=1pgK5qoc4L3BBNoe-1

Carmen Ansio

teacher•

Hola Vanesa! Te pedí acceso al archivo para poder revisarlo

Carolina Gómez

student•

Podemos hacer diseño responsive de madera super sencilla, podemos añadir textos como por ejemplo en inglés o en español
Pasamos de un espacio de trabajo al otro y cambiaría el idioma, por que lo tenemos en nuestras variables.
Frames
LandBar
Menu hamburguesa
Autolayout para que todos nuestros elementos se vallan ajustando
añadir contenedores para ir armando, Figma lo ha echo miui fácil
Mid y Max width - se va a justando segun tamaño
Diseño Responsive, múltiples columnas en footer, estas se van ajustando según tamaño

german muñoz mora

student•

Esta super que el documento hecho con IA, ya te diga lo que debes hacer. Veo que muchos estudiantes se molestaron por que no hicieron el diseño paso a paso, pero habrá que sacar toda la imaginacion para crear esa landing page.

Animo a todos, no se desanimen.

jesus garcia

student•

<img height="285" width="286" src="https://static.platzi.com/media/user_upload/pagina%20proyecto-b16a641a-1556-4314-99c1-af87aac6a640.jpg" />lo realice desde 0

jesus garcia

student•

No pero porque no puede hacer el paso paso de la landing page??? porque se salta pasos?,,en youtube te lo enseñan paso a paso y es gratis!

Claudia Agudelo

student•

Amo toda esta información, de verdad que si he aprendido con las clases

Gabriel Carpio Ochoa

student•

Para todos los que están teniendo un poco de dificultan en lograr que su diseño sea responsive, les sugiero que estudien el ejemplo que dio @Ferney Alexander Nava. A mi me ayudo lo siguiente:

Ir haciendo frames de a pocos de todos los elementos que quieren que respondan a cierta propiedad (como "wrap")
Para los frames de elementos más pequeños (como el titulo, el boton y el contenido) Ferney puso un auto layout para abajo y usó el "wrap" que se muestra en clase para todo el "hero".
Me ayudo ponerle un min-with al frame de título, botón y contenido para que lleguen a un nivel mínimo y obligue a la imagen a ir abajo.

Quizás haya una forma de poder ahorrarse todos estos pasos usando bien la propiedad de wrap.

Estará genial si alguien puede explicarnos como lo logró!

Derek Perez

student•

profe se salto la clase :c

Esteban Fraccascia

student•

Aprendí mucho!, muy buena la profe, les comparto mi Landing. Saludos