Librerías de estilos y componentes

Librerías de estilos y componentes

Por que trabajar con estilos y componentes?

• Estilos: Hacen referencia a parametros versatiles de una marca
• Componentes: Hacen referencia a las diferentes partes que comoponen
  el sistema de una interfaz

Repasando: estilos
Una libreria de estilos contiene:

• Colores
• Textos
• Efectos
• Grillas

Repasando: Componentes
Una libreria de componentes contiene:

• Componentes
• Atomos
• Moleculas
• Organismos

Como publicar una libreria?

Dropdown -> Publish styles and components

Como publicar cambios en una libreria?
Cada vez que hagas cambios en los estilos o componentes maestros,
Figma te pedira que publiques una nueva version que actualice estos
cambios

Como actualizar una libreria?

• Hacer click en “Review”
• Luego en “Update”

A la miaaaauuu!! Dije 5 jajaja eaa no ando tan mal 😛

⚠ Hay que tener mucho cuidado con los nombres y las propiedades que configuramos en nuestro proyecto.

Si hay conflictos como propiedades con nombres iguales dentro de un mismo componente, el componente o estilo en conflicto no se va a publicará en la librería.

1. El ancho del componente Nav bar
2. El ícono hamburguesa y su grosor de línea
3. La paleta de color
4. La fuente tipográfica
5. El tamaño del titulo y su peso tipográfico
6. La fuente tipográfica del botón, su tamaño y peso
7. Los márgenes internos
8. La grilla constructiva
9. El espaciado entre elementos

Esta terminología de componentes hacen parte de la metodología atomicémoslos design de Brad Frost. La puedes leer aquí https://atomicdesign.bradfrost.com/table-of-contents/

1. El borde que se le dio al fondo principal

2. Al icono de menú

3. Imagen de perrito

4. Texto de “Platzi Dogs”

5. Botón

6. Texto “ingresar”

7. Barra del nav

¿Por qué trabajar con estilos y componentes?

• Te permiten estandarizar y potenciar el trabajo de diseño
• Esta es una de las funcionalidades más poderosas y útiles que ofrece Figma para los diseñadores y desarrolladores

Información resumida de esta clase
#EstudiantesDePlatzi

• El estilo y los componentes me ayudan a estandarizar el proyecto

• Los estilos hacen referencia a parámetros versátiles de una marca

• Los componentes hacen referencia a los diferentes partes que componen el sistema

• Tenemos que desarrollar un nuevo mindset para entender los estilos y librerías

• Si hago cambios en los componentes maestros figma me preguntara si quiero actualizar mi librería

No me permitió hacer el ultimo paso de “review” entonces no tengo claro si lo hice bien o falto alguna cosa por hacer.

La version gratuita no permite publicar una libreria 😦

Pregunta: Cómo hago si lo que quiero es compartir una librería UI para el resto del equipo y que ellos puedan duplicarla y adaptarla según el proyecto PERO que al guardar no se sobre escriban los estilos de la librería principal?

Me parece que publicar una librería con un equipo es de pago. 😬🔥

En estilos, dije 5, contando en blanco pero no la grilla
En componentes, 6, contando el texto , que me olvide que era estilo, y todo completo como otro componente.

Interesante aplicar el atomic design en este proceso!

Esta terminología de componentes hacen parte de la metodología atomicémoslos design de Brad Frost. La puedes leer aquí https://atomicdesign.bradfrost.com/table-of-contents/

Genial la clase!

Excelente clase