Creación de componentes reutilizables: clase teórica

Estas clases están geniales. Me estoy esforzando en aprender muy bien a usar Figma para tener archivos organizados y agilizar mi proceso. Lo único malo es que he tenido compañeros que no se preocupan como yo 🫣 entonces muero lentamente cuando debo trabajar sobre los archivos de ellos.

Esta página muestra a fondo cómo tener un buen material design en nuestros proyectos o trabajos desde el lado de Diseño (UX/UI) y DEV ⬇️
https://material.io/design

Creación de componentes reutilizables: clase teórica

Que son y para que sirven los componentes en Figma?
Son elementos reutilizables que ayudan a:

• Estandarizar patrones de diseño
• Reducir errores y tiempo de ajustes

Creando componentes
Pueden crearse apartir de:

• Frames
• Grupos
• Capas

(cmd + shift + k)

Creando instancias
Como crear una instancia?

• option + arrastrar componente
• (cmd c) + (cmd v)
• Drag desde vista de “Assets”

Relacion 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
  • Effectos

No se pueden cambiar:

• Tamaño
• Posicion
• Rotacion
• Constrains
• Jerarquia de capas

Pero las instancias pueden rebelarse

• (cmd + option + B) para separar una instancia de su maestro
• Click derecho y “Reset Instance” para cancelar todos los
  overrides que tiene una instancia y revertir al maestro.

Nombrando y organizando componentes
Al momento de organizar tus componentes es muy importante tener en cuenta
donde se estan posicionando dentro de el espacio de trabajo y como se estan
nombrando para encontrarlos mas facilmente.

Organizando los componentes

• Para menos de 7 comoponentes, nombres independientes funcionan
• Para mas, es importante crear frames y/o paginas para ordenarlos

Nombrar los componentes

• Podemos usar “/” para crear jerarquias internas
  • Esto nos permite usar el swap entre instancias desde las
    propiedades:

        Boton/alerta
        Boton/carga

Componentes compuestos (Componentes que existen dentro de otros componentes)
Las interfaces mas complejas utilizan componentes dentro de otros componentes
para replicar la consistencia a lo largo de todo un mismo sistema.

Las instancias permiten darle flexibilidad a los componentes mas complejos,
por lo que es clave diferenciar sus diferentes estados.

Variantes
Figma ha agregado una funcionalidad muy importante, las variantes, que basicamente
son difentes versiones del mismo componente que aplica bajo parametros similares
pero que visualmente tienen un cambion significativo

Propiedades de componentes
Son caracteristicas de los componentes que nos permiten su manipulacion y personalizacion
sea mucho mas facil desde el panel de propiedades

Para nombrarlos generalmente se utiliza el Atomic Design
https://platzi.com/blog/por-que-atomic-design/

Las instancias son los elementos replicables obtenidos del componente o elemento maestro.

Información resumida de esta clase
#EstudiantesDePlatzi

• Los componentes combinan todos los elementos y debemos entender muy bien como funcionan ellos

• Los componentes son elementos reutilizables que me ayudan a estandarizar patrones de diseño, reducir errores y tiempo de ajuste

• Puedes crear un componente a partir de una capa, grupo o frame

• Una instancia parece ser la copia de un componente maestro

• Un componente maestro es un padre, una instancia es un hijo. Ellos mantienen una relación padre e hijo, es decir si yo hago un cambio al componente padre este se va a ver reflejado en todas las instancias del componente padre

• Un cambio sobre la instancia se llama overrides

• No se puede cambiar dentro de la instancia el tamaño, posición, rotación, constraints y jerarquía de capas

• Puede una instancia independizarse de su padre, así que tu también puedes 😃

• Las instancias también pueden ser reseteadas y esto significa que volverá a ser exactamente igual que el componente padre

• Es importante nombrar tus componentes de una manera que te sea fácil recordarlos

• Para menos de 7 componentes los nombres independientes funcionan, para más ya es importante crear Frames o páginas para organizarlos

• En el nombre del componente puedo usar “/” para crear jerarquías internas

• Pueden existir componentes dentro de los componentes

• Las variantes son versiones diferentes del mismo componente con parámetros similares pare que visualmente tienen un cambio

• Los componentes tienen propiedades y manejar esto es fácil

Una pequeña aclaración: El atajo para crear componentes en Windows es CTRL + ALT + K. De resto excelente clase como siempre.

¿Qué es un componente?
Son elementos reutilizables que ayudan a:
• Estandarizan patrones de diseño
• Reducir errores y tiempo de ajustes
Creando Componentes
Pueden crearse a partir de:
• Frames
• Grupos
• Capas
(CRTL + Shift + k)
Como crear una instancia
• Option + Arrastrar componente
• Ctrl + c – ctrl + v
• Drag desde vista “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 y efectos.

No se pueden cambiar
• Tamaño
• Posición
• Rotación
• Contraints
• Jerarquía de capas
Pero las instancias pueden rebelarse
• Ctrl + alt + b (Para separar una instancia de su maestro)
• Click derecho y “Reset Instance” Para cancelar todos los overrides que tienen una instancia y revertir el maestro.
Nombrando y organizando componentes
• Para menos de 7 componentes, nombres independientes funcionan.
• Para más, es importante crear Frames y/o paginas para ordenarlos.
Nombrar los componentes
• También podemos usar “/” para crear jerarquías internas (Esto nos permite usar el swap entre instancias desde las propiedades) botón/alerta botón/carga

Componentes compuestos
Componentes dentro de otros componentes
Las interfaces más complejas utilizan componentes dentro de componentes para replicar la consistencia a lo largo de todo un mismo sistema.

• Componente: Elemento re-utilizable que ayuda a estandarizar patrones de diseño y a reducir errores y tiempo de ajustes. Pueden ser creados a partir de frames, grupos y capas.
  .
• Componente compuesto: Son componentes dentro de otros componentes. Las interfaces complejas los utilizan para replicar la consistencia a lo largo de todo un mismo sistema.
  .
• Variante: Son diferentes versiones del mismo componente que aplican bajo parámetros similares pero que visualmente tienen un cambio interesante, van variando

que actualizado està el curso

Que interesante contenido… de mucha ayuda, gracias!

Me estoy esforzando para sacar el mejor provecho de las clases
Genial todo lo que he visto en las clases. 😃

Excelente Profe ¡Manos a la obra!

Excelente clase