Diseño de Landing Page Responsive en Figma

Clase 21 de 29 • 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.

Mateo Ezequiel Nieto

student•

Al dia de hoy dentro de figma faltan archivos desde la clase 10 aprox, y están algo adelantadas las clases con pasos avanzados sin explicaciones. -_-

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

Diseño de Landing Page Responsive en Figma

Cómo iniciar los proyectos en Figma

Diseño Responsive y Prototipado Avanzado en Figma

Atomic Design: Creación de Componentes en Figma

Gestión de estilos y librerías compartidas en Figma

Diseño Responsive y Técnicas Avanzadas

Diseño Responsive y Grids en Figma

Uso de Constraints para Diseños Responsive en Figma

Menú Responsive en Figma: Uso de Constraints y Auto Layout

Nuevas Funciones de AutoLayout en Figma para Diseños Responsive

Montaje de Diseño Responsive con Figma: Mobile y Desktop

Creación de Interfaces Responsivas en Figma

Diseño de Interfaces Responsivas en Figma: Uso de Plugins y Breakpoints

Crea componentes avanzados

Creación de Componentes y Variantes en Figma

Propiedades de Componentes en Figma para Diseños Flexibles

Sincronización de Google Sheets con Figma para gestión de copies

Variables en Figma

Variables en Figma: Creación y uso para diseño eficiente

Gestión de Variables de Texto para Traducciones en Figma

Inteligencia Artificial para Figma

Plugins de IA en Figma: Uso de Magician para Diseños Eficientes

Generación de Títulos para Landing Page del Sector Banca

Crear Landing Pages con Figma

Integración de IA en Figma: Uso de Plugins para Diseño UI/UX

Paleta de Colores Corporativos para Banco Transfer

Diseño de Landing Page con Secciones y Wireframes

Diseño de Landing Page Responsive en Figma

Interacción Avanzada con Prototipos

Creación de Microinteracciones en Figma: Guía Paso a Paso

Creación de Microinteracciones con Figma Prototyping

Prototipado de Navegación en Figma: Interacciones y Animaciones

Prototipado avanzado con Figma

Cómo dar y recibir feedback constructivo en proyectos de diseño

Diseño Web Responsive con Figma y Atomic Design

Documentación de Diseño en Figma: Elementos y Plugins Esenciales

Cómo trabajar con los equipos de desarrollo

Colaboración con desarrollo: Dev Mode de Figma

Colaboración con Desarrollo: Figma y Visual Studio Code