Auto-Layout: un amigo para la vida

Clase 16 de 29 • Curso de Figma - 2020

Rafael Alejandro Belalcázar Burbano

student•

Hay que tener en cuenta la diferencia entre pading y margin. Padding: es la distancia que existe del borde del elemento hacia adentro. Margin: es la distancia que existe del borde del elemento hacia afuera. Visualmente pueden tener el mismo resultado si no se tienen bordes, pero es importante conocer estas diferencias.

Santiago Camargo

teacher•

Súper importante este aporte Rafael! Muchas gracias por mencionarlo!

Christian Velázquez

student•

Recomiendo mucho saber de una vez ésta diferencia. Cuando vayas a desarrollar el proyecto, te ayudará mucho.

Sergio Estrella

teacher•

Como me siento ahora que conozco el Auto-Layout :sweat_smile:

Rubén Vega

student•

jajajajajjajajajajaj

Hugo Montoya Diaz

student•

jajajajajajajaja magnifica imagen

David Gonzaléz

student•

Esta opción me convenció de pasarme a figma desde xd, ejercicio!

Basace Rey Jiménez

student•

Me gustan los colores que elegiste

Alfredo Gracia

student•

Hola David, pregunta ¿con el auto layout haces que la raya del input se ajuste al texto escrito en los inputs? Ejem. En tu input de "nombre" ¿Como haces el auto layout? ¿Creas primero un rectangulo encima el texto y despues generas el autolayout? Porque no encuentro la manera de hacerlo como tu.

Christian Diaz Portela Flores

student•

Una actualización de Figma cambió la manera de alinear los elementos dentro del Auto-Layout. se lo hace de esta manera.

Diego Ricardo Olivares Rivas

student•

Gracias!! tenia esa duda

Alejandro Zapata

student•

Gracias! solucionaste lo que me tenía confundido

Walter Daniel Sánchez Casallas

student•

Luis Higuera

student•

Hola!!!

Me gusto mucho mucho tu diseño y lo copie :v

No supe como hacer que la imagen quede con el efecto difuminado, ¿me podrias explicar como se hace? por favor :D.

Alfonzo Morales

student•

Luisehica, no sé si todavía te sirva, pero el difuminado lo logras en la sección efectos (donde anteriormente nos han mostrado para colocar una sombra), específicamente en "Background blur" ^^

Ismael López

student•

Santiago Jimenez

student•

Buen trabajo man, esta genial !

Miguel Ángel Lozada Niño

student•

Percy Del Águila

student•

Muy bueno Lo tomaré de referencia!!

Maria Paula Molano

student•

Hice dos opciones:

Carlos de Jesús Sánchez Pascacio

student•

Me gusta la segunda, pero con los inputs en blanco

John Orellana

student•

que perron le quedo Xd

Platzi Team

student•

Dayse Poma

student•

Naza maurice

student•

Se me complico el manejo de los textos y lo resolví volviéndolos frame también, no se si es una buena practica e igualmente no pude hacer para que los textos de ¨forgot password? ¨ estuviera mas cerca del botón, alguien me puede decir como se puede hacer?

Irving Juárez

student•

Lo que pudiste hacer fue crear un auto-layout con solo las ultimas dos opciones de hasta el final (forgot parssword? y sign in). Ya con esto hubieras tenido dos auto-layouts y hubieras podido poner los textos mas cerca del boton

Naza maurice

student•

ohh no se me ocurrió, muchas gracias!!

Pamela Candia Cardenas

student•

El Sign Up de EdTeam quedó muy cool

Carlos Alberto Romero Valentin

student•

jejejej bien ahi con la competencia, naaa quedo xvr

Javier Pomachagua Pérez

student•

Este es mi ejemplo, pero tengo algunas dudas:

He creado varios autolayout para poder formas filas y columnas dentro de todo el formulario, eso es correcto?
En mi campo **password **no puedo poner el placeholder "6+ characters" dentro del input ya que al hacerlo autolayout se separan, he intentado ponerlo dentro de un grupo y sucede lo mismo, no le pongo autolayout ya que se va achicar debido a que el placeholder tiene poco texto.

Jaime David Burbano Montoya

student•

Hola te recomiendo que el "Sing up to dribbble" y los botones de google, facebok y twitter, colocarlos en la parte inferior después del formulario

Jose L. Silva

student•

Se ve muy bien ese diseño

Daniel Felipe Merchan Fuquen

student•

Es increíble como entre el diseño y el desarrollo web se están creando sinergias. ¡Es el mejor momento para ser unicornios!:

Klaus Mauricio Moller Rossbach

student•

ya nos e puede cambiar la alineacion individual de los objetos enel auto lay out???

Patricio Villarroel Durán

student•

¡Hola Klaus!

Sé que en Figma hicieron una actualización al autolayout hace apenas 5 días y no sé si tu problema tendrá algo que ver con eso. Por eso te animo a leer este blog de Figma que explica los cambios:

https://www.figma.com/blog/behind-the-feature-the-making-of-the-new-auto-layout/

Klaus Mauricio Moller Rossbach

student•

@PatoVillarroel gracias!

Arles A. Pinzon Molina

student•

¡Esta es de las mejores herramientas que sacó Figma hace poco! Te permite ahorrar muchísimo tiempo a la hora de crear nuevos diseños. Yo lo usé para crear plantillas de e-mail marketing. Muy muy recomendado.

Santiago Camargo

teacher•

Qué buen uso Arles! Nos podrías mostrar un ejemplo por aquí? Imagino que te facilita mucho poder visualizar esos elementos de manera responsive sobre los diferentes tipos de pantalla.

Sergio Arcíbar

student•

Yo me dedico a diseñar emails (entre otras cosas) en mi trabajo. Me encantaría ver uno de tus ejemplos, Arles.

juan camilo castillo saucedo

student•

David Méndez Vázquez

student•

Inicio de Sesión

Naza maurice

student•

Hola David, como hiciste para que los textos de abajo quedaran uno al lado del otro?

Irving Juárez

student•

Figma ya no me deja mover los elementos de manera independiente, ¿Qué hago?

Al dia de hoy, Figma ya no te deja mover los elementos de manera independiente dentro de un auto-layout. Una solucion que yo encontre es tener mas de un auto-layout. Esto nos permite organizar nuestro contenido dentro de un auto-layout de manera horizontal o vertical segun sea el caso.

Guillermo Moreno Lopez

student•

Auto-Layout: un amigo para la vida

Colaborando y Co-Creando

Introducción a Figma

Figma: colaboración a gran escala

Diferencias entre la versión gratuita y los planes de paga

Conociendo la interfaz

Budgetrip: el proyecto de tu curso

Importando archivos desde otras apps

Fundamentos de Figma

Domina la herramienta de texto

Creación de objetos y efectos

Creando efectos

Retículas y Guías: componer la complejidad

Agregando imágenes

Selección de color

Vectores: aprende a combinar figuras

Composición Orquestada

Integración: importar y exportar elementos

Constraints: usa las restricciones a tu favor

Styleguides: creación de estilos

Auto-Layout: un amigo para la vida

Shortcuts: atajos para agilizar tu proceso

Colaborando y Co-Creando con Figma

Herramientas de Co-creación: comentarios

Agilidad y consistencia a través de componentes

Organiza tus componentes

Prototipado: dale vida a tu interfaz

Prototipado: conectando frames

Transiciones más suaves con Smart Animate

Versionamiento: recupera el pasado

Librerías de estilos y componentes

Plugins: extiende funcionalidades

Community: colaboración universal

Proyecto Final: Budgetrip

Mentoría Expert

Prototipado en vivo: Figma