Agilidad y consistencia a través de componentes

Clase 19 de 29 • Curso de Figma - 2020

Clase anteriorSiguiente clase

Daniel Lazarte

student•

SpaceX Crew Dragon Flight Control UI

Christian Velázquez

student•

Muy bueno el sitio.

María Jimena Rodríguez Contreras

student•

quedo muy bien

Félix Cuervo Ávila

student•

este tema es muy clave y algo complejo de entender pero esta bien explicado.

Santiago Camargo

teacher•

Muchas gracias por el cumplido! Cualquier pregunta es más que bienvenida. Una vez lo practicas un par de veces, deja de sentirse la complejidad :)

Neyeska Gonzalez Acosta

student•

Bueno honestamente no entendí :(

Jennifer Gomez

student•

Seria bueno que dieran los shortcuts especificos para windows y no solo los de Mac

Diego Fernando Hoyos

student•

Si le picas en el icono marcado Aparece un menu y buscas Keyboard Shortcuts al piarle te aparecen todos los shortcuts de tu S.O nativo

Marcos Orozco Rios

student•

Ctrl + Alt + K --> Crear componente Ctrl + Alt + B --> Desapegar o Reset Instance

Eduardo Pérez Suárez

student•

Saludos. tengo un duda. por fa si alguien pudiera ayudarme. Estaba practicando lo de grupos, frames y el auto-layout. Pero mi duda es. Cual es la diferencia de agruparlos como frames o como grupos o auto-layout. Y en que casos es recomendable uno que otro?

Daniel Adolfo Ordoñez Rubio

student•

Lo que un grupo hace es que se muevan juntos y los cambios al grupo se aplican a los elementos dentro. Un frame es como un contenedor con su propio tamaño, que muestra los elementos en su interior, y como en un grupo se pueden hacer cambios que afectan a los elementos dentro. Y auto-layout es como tenerlo en un contenedor con propiedades extra, como relleno (padding) y espaciado, para los elementos dentro.

Franklin Pérez

student•

Muy buena explicación la del compañero. Míralo como si cada "Frame" es un "mini-artboard" que está dentro de otro (justo como funcionan los div en la web). El convertir un simple grupo a un frame te da muchas más posiblidades de alineación de elementos (lo notarás mejor en componentes más complejos que un botón, como una lista o una card). También que puedes añadirle un fondo al frame sin tener que crear una forma (como tradicionalmente lo hacemos).

El autolayout es casi un mundo aparte, ya que te permite alinear o distribuir los elementos dentro de él de forma vertical u horizontal (ideal para carruseles o sliders), con espacios entre elementos que tú quieras y reordenarlos sin perder su alineación. Muy muy buena esa herramienta!

Fredy Frasser

student•

Lo malo es que el profesor ya tiene los botones hechos, no se sabe como los construyo, es decir de dónde creo tantos frames dentro de frames, los de el texto y la flecha por eso es confusa está clase

Stefa Cuartas

student•

Completamente de acuerdo, trate de poner elementos dentro de frames pero estos se redimensionan. No entiendo porque no explican como hacerlo o al menos que compartan en los recursos el ejemplo que esta usando.

Stefa Cuartas

student•

Ya termine el curso, aprendí que podés poner los elementos dentro de un frame (no es necesario crearlo y luego ponerlos dentro) Seleccionás los elementos, click derecho, Frame selection o Crt + Alt + G.

Valentina Fernández Rada

student•

Me parece que el profesor deberia dar los shortcuts para windowns también :( queda uno un poco perdido y toca irse a buscar cual es.

Juan Sebastián Sierra Morales

student•

Resumen SM 🚀

¿Qué es un componente?

Son elementos reutilizables que ayudan a:

Lograr mayor responsive
Optimizar velocidad en los cambios de los componentes porque solo basta cambiar las propiedades del padre para que cambien sus hijos o instancias

Creando componentes:

Pueden crearse a partir de:
- Frames
- Grupos
- Capas
Shortcut CTRL+ALT+K

Instancias

Cómo crear una instancia:

ALT + Arrastrar componente
CTRL C + V
Drag desde vista de “Assets”

Relación Padre-Hijo

Propiedades del master component se traducen en todas las instancias
Cambios sobre las instancias se llaman “overrides” y existen para:
- Texto
- Fill
- Stroke
- Efectos

No se pueden cambiar

Tamaño
Posición
Rotación
Constraints
Jerarquía de Capas

Pero las instancias pueden

Rebelarse y dejar de ser instancias de un componente convirtiéndose en un objeto (frame, capa o grupo)

CTRL + ALT + B para separar una instancia de su maestro
Click derecho y “Detash Instance” para cancelar todos los overrides que tiene una instancia y revertir al maestro

Un componente no se puede convertir en un objeto

Para “desapegar” los elementos de un componente maestro a un layer normal:
- Crear una instancia
- Hacer detach de la instancia (CTRL + ALT + B)
- Borrar al maestro

By SsimorPro

Fabian Flores

student•

Oscar Alexis Rojas Estrada

student•

Como se llama la App del cuadernito ?

Fabian Flores

student•

One Note de Windows, pero ya me cambié a Notion porque me gustó más

Irving Juárez

student•

¿Qué es un componente?

Un componente es como el molde sobre el cual nosotros vamos a hornear galletas. En este caso, cada botón creado en la clase fue una galleta tomada del molde del botón maestro o componente. Esto es la manera en la cual diseñamos de una manera mas rápida. . Si ya has usado programación orientada a objetos, un componente es solo como una clase de la cual sacamos objetos.

Fernando Campos

student•

¡Genial aporte, Irving! :thumbsup:

Maylith Ángulo Angulo

student•

La utilidad de los componentes es excelente ya que no solo logran mayor consistencia sino que también optimizan velocidad en los cambio.

Hernán Arica

student•

Ayuda con la alineación Hola, no sé porque no me centra el contenido hice todo paso a paso y nada alinee el auto layout al frame botón para que centre el texto y nada…

Gabriel Diaz

student•

selecciona elemento padre y su hijo, luego alinea con las opciones de arriba a la derecha

Joel Mendes Novo

student•

María Jimena Rodríguez Contreras

student•

excelente clase ,voy un poco lenta pero la verdad es que esta muy bien explicado muchas gracias

Hernan Maza

student•

Donde dice base, es una linea?

María Lucía Pérez

student•

Hola! Justo vine buscando si alguien sabía esto... no entendí tampoco, ya lo resolviste? :(

Stiven Castillo Montero

student•

El video arranca al minuto 4:00, la teoria no enseña mucho, la práctica si.

Franklin Pérez

student•

Creo que más adelante lo explicarán, pero la capacidad de cambiar un componente por otro de su misma "familia" (Ej Button/Rounded con Button/Square) es de los time-savers más geniales que he visto.

Lo que sí no me gusta de este apartado de los componentes son las limitaciones en cuanto a overrides. Por ejemplo en Adobe Xd puedes mover/agrandar un elemento dentro de una instancia, en Figma eso no se puede, y a veces he tenido que desvincularlo para crear otro componente solo porque necesitaba una imagen más grande o un texto era más grande de lo que el párrafo lo permitía. Pero bueno, quizá también es cuestión de costumbre, sigue siendo una herramienta genial.

David Santiago Morales Loaiza

student•

como sería el atajo de option en windows?

Gonzalo Alfaro

student•

El equivalente a Option en Widows es Alt

Carlos Javier Bazan Huaman

student•

LOS COMPONENTES SON LO MAXIMO, ASI PUEDES AVANZAR MAS RAPIDO.

Cristian Mauricio Cavanzo Arias

student•

Si que lo son , no solo por avanzar rapido si no por la consistencia

Jonathan Fernando Santana Quispillo

student•

Veo que este curso esta bajo el contexto que tengan una laptop o PC MAC. Seria chevere que hagan para windown porque el promedio de la gente no es que tenga plata para tener una MAC.

Alfredo Gracia

student•

Hola Jonathan, realmente es lo mismo lo unico que cambian son los shurtcuts pero es cosa que los busques dentro de figma para Windows, pero se tienen las mismas funcionalidades en ambas Mac o Windows, saludos.

Naza maurice

student•

Aqui puedes ver todos los shortcuts

César Mejía Silva

student•

Recuerden siempre trabajar sobre el hijo del componente, ya que en este así hagamos todas las modificaciones allí, no se modificará el original.

Naza maurice

student•

Totalmente, yo prefiero organizar todos mis componentes en un frame aparte y de ahí sacar las instancias para evitar errores