Contenido del curso
AutoLayout y Variants
Design Systems
Prototipado
Plugins
Despedida
AutoLayout: dirección, paddings, resizing y constraints
German Moreno
student
Luis Glex
student
Santiago Ramirez
studentContenido del curso
AutoLayout: dirección, paddings, resizing y constraints
German Moreno
studentLuis Glex
studentSantiago Ramirez
student
arturo
student
Julio Servan
teacher
Ivan Camilo Martinez Mendieta
student
Alexandra Vasquez
student
Figuera Marifel
student
Jimmy Caicedo
student
Kevin Paternina
student
Inee Aguiar
studentAlejandro Benjamin
student
Gabriela Urbano
student
Dani Landa
student
Yusting Andrés Mora González
student
Alejandro Om
student
Aarón González
studentYusting Andrés Mora González
student
Diego Perdomo
student
Yeraldine Ladino Figueroa
student
Dora Segovia
student
Luciana Holzmann
student
Pedro Isaac Aguilar
studentBolivarCapacitaciones 2 HD
studentJulio Servan
teacher
María Valentina Reyes Leon
student
Sura Naileth Cedeño Lopez
Team Platzi
Guzman Geraldine
studentSura Naileth Cedeño Lopez
Team Platzi
Laura Mujica
student
Luis Aguirre
student
María Luisa Barboza Restrepo
studentrecomiendo 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
