Creación y uso de componentes en Figma para diseño eficiente

Ya conocía el tema de los componentes, pero no sabía el comportamiento de las instancias que se sobreescriben. Para nada me arrepineto de hacer nuevamente otro curso de Figma actualizado.

📝 Interesante el concepto de “hijo rebelde” en las instancias. El componente padre/madre hereda sus atributos a las instancias que se crean a partir de este, pero la modificación de estas últimas no afecta al padre. Asimismo, cambiar las propiedades manualmente de una instancia vuelve “rebelde” esa propiedad, por lo cual no heredará los cambios que ocurran en el componente que la creó para ese atributo.

Un **componente** es una unidad reutilizable de diseño que permite mantener la consistencia a lo largo de un proyecto. Utilizar componentes facilita la creación de interfaces y la actualización masiva de elementos de diseño de manera eficiente. **Overrides (Sobrescribir)**: Las instancias pueden personalizarse sin afectar el componente principal. Puedes cambiar texto, colores y otras propiedades específicas de la instancia. **Actualización de Componente**: Al actualizar un componente principal, todas las instancias de ese componente se actualizan automáticamente, manteniendo la consistencia. **Ejemplos de componentes:** Pueden ser botones, íconos, tarjetas u otros elementos de interfaz que se usan repetidamente a lo largo de un diseño

Importante siempre estar poniendo en práctica lo que se va aprendiendo 

Mas clases con esas animaciones xD

Necesito que sea mi profe en todo lo que quiera aprender en la vida. AMO su claridad para explicar.

* Video que recrea una situación de trabajo real en este tema. * Al diseñar es muy común qué pasa que creamos varias veces el mismo botón, la misma figura, repetimos los mismos trazos. * Pues de esto se trata diseñar software, el ser eficiente con las cosas que creamos. * Por eso esta clase se trata todo sobre componentes, cómo vamos a diseñar algo increíble utilizando auto-Layout  * Utilizando las capacidades de vectores que ya sabemos de las clases pasadas y Como lo reutilizamos a lo largo de los espacios * Dentro de sigma componentes: intro * Vemos uno que llama la atención es la instancia de un componente maestro * Éste componente Fyma no me lo deja modificar, ya que es la instancia de algo que ya está escrito o creado * Voy a ir a la barra lateral de mano derecha en los tres puntos y voy a dar: Create component * Una vez creado nuestro link componente o componente cómo vamos a las capas * Al duplicar mi componente esta se convierten en instancias, todas estas siempre van a obedecer al componente principal, entonces si se modifica el componente principal las demás también van a tener modificación * Al duplicar las instancias las puedo modificar una una y mi componente principal no va a cambiar * Estas instancias se van a comportar o no de qué se a sobre escrito * Pero si después de haber modificado esas instancias con características diferentes, y modifico el componente principal estas instancias van a participar en esas modificaciones, *  en este ejemplo las instancias una de ellas fue alargada, al otra vez alargar mi componente principal todas las instancias modificadas se alargaron a ese tamaño exceptuando la que ya había alargado, y así con los demás ejemplos * Esto nos da una idea de cómo se relaciona las instancias con su componente principal, si una instancia rebelde en algún aspecto el componente principal va a respetar eso, y cuando se reescriba información el componente principal no va a ser demasiado estricto frente a eso * Qué pasa si los cambios de una de las instancias me parece que es bueno?: push changes to main component  * Cuándo le doy bien esta opción esos cambios se llevan a mi componente principal y por ende todos Las instancias cambian hacia esas características * Vamos a nombrar el Frame donde he puesto mi componente principal, Vamos a Assets nos va a mostrar cuáles son las bibliotecas que tenemos disponibles * En este caso los locales sólo tenemos esta biblioteca de ejemplo, y este es el primer componente que hemos publicado que se llama map, cuando yo tengo este componente creado en esta biblioteca simplemente lo puedo arrastrar, y lo puedo llevar a cualquier lugar donde lo solicite pudiendo duplicarlo cuantas veces quiera * qué pasa si quiero empezar un diseño desde ceros con un componente ya creado? * Así que Tomamos una instanciala cual queremos que ya no haga parte de el componente, así que le daremos * Detach instance  * Después de hacer esto nos quedamos con el layout original, que no obedece a mi componente del cual lo tomé, se vuelve independiente  * Cuando a mi instancia le he dado muchos cambios y quiero volver a como estaba desde el principio, le doy: Reset ➜ reset all changes o también hay otra opción de sólo el tamaño, esto nos regresa a mi componente inicial * Eso es toda la manera en que los componentes nos dan flexibilidad para utilizar y reutilizar en toda la interfaz

Esta clase de las que hasta ahora he visto son de las que más me han aterrizado en mi aprendizaje, siendo bien organizados se hacen maravillas con estos componentes.