Librerías de estilos y componentes

Clase 21 de 25 • Curso Básico de Figma - 2022

Clase anteriorSiguiente clase

German Pinilla

student•

++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"

Xiomara Alejandra Hernández Arzola

student•

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

Luis Antonio Vargas Avila

student•

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

Gabriel Rached

student•

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

Mauricio Jose Rivero Padilla

student•

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/

Robinson Javier Ordoñez Barreiro

student•

Rubén Ernesto Aragón Gil

student•

El borde que se le dio al fondo principal
Al icono de menú
Imagen de perrito
Texto de "Platzi Dogs"
Botón
Texto "ingresar"
Barra del nav

Luis Felipe Fetiva Soriano

student•

No sé si al querer publicar ahora esto hace parte de una versión paga, pero no me aparece el mismo menú que al profe :thinking:

Quizás estoy en otro lugar?

Pedro Isaac Aguilar

student•

++¿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

Jeisson Espinosa

student•

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

JAIRO SALAZAR CASTAÑO

student•

Gracias por su aporte!

Jeisson Espinosa

student•

Con gustoooo

María Luisa Barboza Restrepo

student•

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

Yorgelis Falcon

student•

La version gratuita no permite publicar una libreria :(

Evelyn Sanabria Rodríguez

student•

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?

Vladimir Benitez

student•

Si tu la creaste, cuando la compartas solo da los permisos de Ver.

Jimena Haran

student•

La parte donde aparece para compartir, en dónde la encuentro?

Estefania Zorro Rodriguez

student•

Estilos: Colores, titulo, imagen, reticula.

Jeanniffer Pimentel

student•

Estilos en Platzi Dogs (Durante la pausa)

Layout grid
Colores
1. Violeta
2. Gris
3. Blanco
Tipografias
1. Titulo
2. Texto de boton
Boton
Menu Bar
1. Hamburguesa menu

Henry Alexander Velásquez Rosas

student•

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

Abigail Nahomi Chávez Lozano

student•

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.

Enrique Isasi

student•

Interesante aplicar el atomic design en este proceso!

Mauricio Jose Rivero Padilla

student•

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/

Librerías de estilos y componentes

Introducción

¿Para qué sirve Figma y por qué elegirlo?

Interfaz en Figma

Básicos

Configuración de guías y retículas

Creación de textos y estilos

Figuras e imágenes en Figma

Efectos en Figma

Redes de Vectores

Colores en Figma

Combo

Importar y exportar

Cómo crear guías de estilo

Auto-Layout

Los 15 mejores atajos para trabajar en Figma

Creación de componentes reutilizables: clase teórica

Creación de componentes reutilizables: clase práctica

Playground: Practica la creación de componentes reutilizables

Prototipado

Prototipado simple: interacción de scroll

Prototipado simple: conexión de diferentes frames

Prototipado avanzado: smart animate y componentes Interactivos

Co-Creando

Cómo agregar comentarios a los diseños

Historial de versiones en Figma

Librerías de estilos y componentes

Superpoderes

FigJam

Uso de plugins en Figma

Community: proyectos open-source y perfiles

Cierre

Proyecto final del curso de Figma