AutoLayout: dirección, paddings, resizing y constraints
Contenido del curso
AutoLayout y Variants
Design Systems
Prototipado
Plugins
Despedida
AutoLayout: dirección, paddings, resizing y constraints
Contenido del curso
AutoLayout: dirección, paddings, resizing y constraints
German Moreno
Estudiante
Luis Glex
Estudiante
Santiago Ramirez
Estudiante
arturo
Estudiante
Julio Servan
Profesor
Ivan Camilo Martinez Mendieta
Estudiante
Alexandra Vasquez
Estudiante
Figuera Marifel
Estudiante
Jimmy Caicedo
Estudiante
Kevin Paternina
Estudiante
Inee Aguiar
EstudianteAlejandro Benjamin
Estudiante
Gabriela Urbano
Estudiante
Dani Landa
Estudiante
Yusting Andrés Mora González
Estudiante
Alejandro Om
Estudiante
Aarón González
EstudianteYusting Andrés Mora González
Estudiante
Diego Perdomo
Estudiante
Yeraldine Ladino Figueroa
Estudiante
Dora Segovia
Estudiante
Luciana Holzmann
Estudiante
Pedro Isaac Aguilar
EstudianteBolivarCapacitaciones 2 HD
EstudianteJulio Servan
Profesor
María Valentina Reyes Leon
Estudiante
Sura Naileth Cedeño Lopez
Team Platzi
Guzman Geraldine
EstudianteSura Naileth Cedeño Lopez
Team Platzi
Laura Mujica
Estudiante
Luis Aguirre
Estudiante
María Luisa Barboza Restrepo
Estudianterecomiendo mucho el plugin de iconify, presenta una gran variedad de iconos sin la necesidad de descargar el archivo
https://www.figma.com/community/plugin/735098390272716381/Iconify link para descarga
Genial no lo conocía, gracias German!
Este es el mejor plugin.. Yo lo uso y funciona perfecto
Ademças Unsplash para las imagenes
Como aporte quisiera decir que hay que usar los iconos que sean de un mismo autor o de un mismo paquete, porque si descargamos de diferentes paginas pierden consistencia los iconos. Y también hay que tener cuidado porque algunos iconos aunque los hayas descargado te piden que agregues la licencia.
También quiero agregar que es mejor usar svg para los iconos y evitar los png. Las paginas que agrego el profesor en los recursos están bien.
Exacto! O si usas de un distinto paquete encargarte de que estilo sea similar, ejemplo: mismo tamaño del borde, mismos ángulos (rectos o redondeados..)
Hug (abrazo): El contenido se ajusta al texto
Fill (lleno): El contenido se ajusta al contenedor
Fixed (fijo): El contenido no se ajusta, está fijo.
Mi aporte de esta clase espero les sirva
Copie el header de airbnb :D
Este plugin es para los pro level, para trabajar en trabajos complejos de forma rápida, y automatizada https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens
Gracias por el recurso Jimmy
Woow :)
Una duda, ¿por qué crea Auto Layouts para el texto y para el ícono? ¿Es una buena práctica o hay otra razón para realizarlo así?
¡Hola Gaby! Sí, es una buena práctica agregar auto layout :)
Es una practica que se te queda para toda la vida, y se va a dar toc ver a alguien no usar el autolayout en cada botón que crea.
Me doy cuenta de que todo lo hace con frames y no con grupos es una buena práctica o un motivo más profundo o solo es cuestión de gustos?
Los frames son más manipulables en general y puedes tener todo encapsulado de forma más prolija. Personalmente, recomiendo que usen siempre frames para la mayoría de casos.
Sin duda los frames son mejores que los grupos, principalmente porque le solucionan la vida a los desarrolladores de FrontEnd, el código CSS es más exacto con los frames a comparación con los grupos.
Pero igualmente en algunas ocasiones suelo crear grupos para los frames.
Les recomiendo usar los íconos para seguir con la misma línea visual de la marca.
. Ejemplos:
Hola, mi aporte.
Les comparto una pag donde se consiguen vectores muy cheveres, se puede copiar como png o descargar, hasta ahorita me ha funcionado https://www.flaticon.es/ espero les sirva :)
Muy buena explicación de cómo ir creando los elementos de la landing page (frames) en base a auto-layouts, lo cual es una buena práctica.
Hola, ¿dónde encuentro el enlace para poder duplicar el archivo de esta clase?
Hola Bolivar, aquí tienes: https://www.figma.com/community/file/784448220678228461/Figma-Auto-Layout-playground
¿Donde estan los iconos?
Hola ya están la sección de recursos. :)
Profe no aparecen los recursos, o yo no los miro.
Agradezco tu ayuda.
Hola, ya agregué los recursos :D puedes chequearlos.
¡Hola! Esta metodología de usar autolayouts y armar las cajas a partir del texto, ¿sirve para Atomic Design? ¿Podría decirse que hecho así la lupa de este ejemplo es un átomo? Muchas gracias :)
Para los que están llevando este curso en Mayo 2023, notarán que la Landing Page de Platzi cambió muchísimo después de la Platzi Conf. Por lo que al inspeccionarla en Google Chrome, pude ver que la fuente que están utilizando para la landing ahora es:
++IBM Plex Sans++
Lo que estoy haciendo es inspeccionar la página para ver todos los tamaños de la fuente que tienen en las distintas secciones, cajas y botones.
Les comparto mi actividad, quiero actualizar l página de mi emprendimiento
