AutoLayout: dirección, paddings, resizing y constraints

Clase 7 de 20 • Curso de Figma Avanzado

Clase anteriorSiguiente clase

German Moreno

student•

recomiendo 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

Luis Glex

student•

Genial no lo conocía, gracias German!

Santiago Ramirez

student•

Este es el mejor plugin.. Yo lo uso y funciona perfecto

Ademças Unsplash para las imagenes

arturo

student•

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.

Julio Servan

teacher•

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..)

Ivan Camilo Martinez Mendieta

student•

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.

Alexandra Vasquez

student•

Mi aporte de esta clase espero les sirva

Figuera Marifel

student•

Copie el header de airbnb :D

Jimmy Caicedo

student•

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

Kevin Paternina

student•

Gracias por el recurso Jimmy

Inee Aguiar

student•

Woow :)

Alejandro Benjamin

student•

Gabriela Urbano

student•

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í?

Dani Landa

student•

¡Hola Gaby! Sí, es una buena práctica agregar auto layout :)

Yusting Andrés Mora González

student•

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.

Alejandro Om

student•

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?

Aarón González

student•

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.

Yusting Andrés Mora González

student•

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.

Diego Perdomo

student•

Les recomiendo usar los íconos para seguir con la misma línea visual de la marca.

. Ejemplos:

Si la marca usa trazos más rectos que redondeados, optar por íconos de esa forma.
Si sólo existe un ícono vertical y necesitan redondearlo, pueden usar el border radius para darle esa forma redonda.

Yeraldine Ladino Figueroa

student•

Hola, mi aporte.

Dora Segovia

student•

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 :)

Luciana Holzmann

student•

Pedro Isaac Aguilar

student•

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.

BolivarCapacitaciones 2 HD

student•

Hola, ¿dónde encuentro el enlace para poder duplicar el archivo de esta clase?

Julio Servan

teacher•

Hola Bolivar, aquí tienes: https://www.figma.com/community/file/784448220678228461/Figma-Auto-Layout-playground

María Valentina Reyes Leon

student•

¿Donde estan los iconos?

Sura Naileth Cedeño Lopez

Team Platzi•

Hola ya están la sección de recursos. :)

Guzman Geraldine

student•

Profe no aparecen los recursos, o yo no los miro.

Agradezco tu ayuda.

Sura Naileth Cedeño Lopez

Team Platzi•

Hola, ya agregué los recursos :D puedes chequearlos.

Laura Mujica

student•

¡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 :)

Luis Aguirre

student•

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.

María Luisa Barboza Restrepo

student•

Les comparto mi actividad, quiero actualizar l página de mi emprendimiento

AutoLayout: dirección, paddings, resizing y constraints

Introducción y community

Hemos actualizado el curso de Figma Avanzado

Introducción y bienvenida

Figma community: conoce, comparte y remixea

Platzi Card Community

Proyecto Landing Page Multi-idioma

AutoLayout y Variants

¿Qué es y por qué es importante el AutoLayout?

AutoLayout: dirección, paddings, resizing y constraints

AutoLayout dentro de AutoLayout

Variants de 0 a 100

Variants: complejos

Design Systems

Introducción a los sistemas de diseño

Sistemas de diseño en Figma

Prototipado

Construcción de pantallas

¿Qué son los Interactive Components?

Interactive Components avanzados

Plugins

Mejores Plugins

Plugins: multi-lenguaje y diseño dinámico

Despedida

Despedida

Autoevaluación del Curso de Figma Avanzado